The 1001 Faces of Semiomantics XO
New Semiomantics XO Theme for WordPress The above Screenshots represent just some of the pages, features and looks the 2012 Edition of the high performance XO Theme for WordPress has up its sleeves. The above site is the fruit of the 2 Days Ycademy Online Seminar for Semiomantics Developers and designers. XO Theme Features The 2012 Edition of XO is focused on even more flexibility in as much as editing, cross-browser and cross-platform compatibility are concerned. The Site displays perfectly on Mobile devices, showing responsiveness also of the plugged in scripts chosen of which some have been adapted to satisfy the high standards of ...
Facebook Strategy with WordPress
10 Steps to Implement your Facebook Strategy with WordPress Contents 10 Steps to Implement your Facebook Strategy with WordPress 11 Efficient Facebook Strategies 7 Ways to jeopardize your Facebook success for sure 4 Important Facebook features to focus on Facebook Privacy and Accessibility settings Workshop: Information and Profile Friends, Fans and Subscriptions Facebook Pages Workshop: Build a simple Facebook page Creative and useful Facebook Page Content Integrating WordPress with Facebook Workshop: Build your Facebook with WordPress Create Unlimited Facebook Fan Pages with WordPress Increase Likes by 150% with Reveal “Like” Tab Gateways Unlimited Customization Options When Designing Your Fan Pages Create Unlimited Custom Pages with the WordPress Page Editor Create Custom Menus and Navigation with Just a Few ...
Archive Page 2
The 1001 Faces of Semiomantics XO
0 Comments Published by Yorgo Nestoridis January 30th, 2012 in Best WordPress Theme, Development, Elegant WordPress, Online Seminar, Plugins, Publishing, Publishing Online, Responsive Theme, Semantic Publishing, Semiomantics, Semiomantics Mobile, Semiomantics Project Management, Semiomantics Web Development, Semiomantics XO, Semiomantics Ycademy, Social Network Publishing, WP Best, WP Best Business Theme, WP Best Newspaper Theme, Web Design, WordPress, WordPress Development, XO Theme for WordPress, YCADEMY, Ycademy Online Seminar, Yorgo Nestoridis, social mediaNew Semiomantics XO Theme for WordPress
The above Screenshots represent just some of the pages, features and looks the 2012 Edition of the high performance XO Theme for WordPress has up its sleeves. The above site is the fruit of the 2 Days Ycademy Online Seminar for Semiomantics Developers and designers.
XO Theme Features
The 2012 Edition of XO is focused on even more flexibility in as much as editing, cross-browser and cross-platform compatibility are concerned.
The Site displays perfectly on Mobile devices, showing responsiveness also of the plugged in scripts chosen of which some have been adapted to satisfy the high standards of Semiomantics Publishing Scripts for Excellence.
The site elaborated at the Ycademy Online Seminar this past week-end features some smashing features, such as:
- Background Slideshow, customizable for each page, post or archive
- Built in Directory
- Media Library for YouTube and Vimeo
- Pro-sliders which can be deployed anywhere on the site
- In addition to the responsive design, a separate light Mobile Version is available
- Bold and Efficient Navigation
- Built in Custom Fonts
- Social Network connectivity and publishing
- and much more.
XO for Developers
The XO script is well commented and offers designers a clean and straight forward environment for custom developments. XO uses best practices for WordPress development and makes the best use of the possibilities offered by the WP back-bone, assuring smooth integration and optimized conflict handling.
XO for Designers
XO is a great playground for designers. The DIY version allows anyone to adapt layout and colors to taste right from the back-office; there is no need to have any knowledge about coding or designing. The theme behaves like a Chameleon and adapts to specific needs with just a few clicks of the mouse: pre-configured layout elements transform your XO quickly into a Magazine, Newspaper, personal Author Blog, a Media Hub, a Shop, a Marketing Machine, a Social Media Publisher, a Product Promoter or a Fan Site or most anything your imagination dictates.
For the professional designer, XO offers a well commented environment. Custom code can be added right from the dashboard or, as I prefer using a child theme. XO is tuned for HTML5 and CSS3 use, making it a modern and inspiring framework for exceptional design effects.
XO out of the Box
Out of the box, the XO Theme for WordPress provides a stable and reliable, robust and optimized solution for common use. It provides built in features such a slider with multiple transitions and a one click selector for easy use.
Layouts can be easily adapted to needs and purpose of the site. In fact, most custom designers rely on the theme engine to format efficiently layouts.
Custom XO
The site featured in the above gallery uses a few pro plug-ins to add functionality in function of customer requirements. The integration of such add on scripts is a relatively simple process for designers and developers.
Customization of the XO Theme
XO has been developed for high performance, productivity, excellence in publishing and flexibility. For the professional users, the XO Theme constitues a solid base with a huge potential for customization and creative artistic expression.
Semiomantics XO 2012 Release
The release of XO Version 3.3.x is planned for the first week of February. The present Release Candidate has been thoroughly tested. A few minor issues will be taken care off before XO will be available to the public.
Upgrading existing XO installations
If your site is running on Semiomantics XO suing basic customization, the theme can just be overwritten. (Save your custom CSS beforehand.)
If you are using a custom version with custom developments or a child theme, some of your customization will need to be adapted to the enhancements of XO 2012. This concerns namely custom headers and footers as well as custom functions.
Support for developers and designers is available as usual at our Ycademy Online Calls and Seminars or through Semiomantics Pro Support.
Related posts:
How to make WordPress Themes Responsive
0 Comments Published by Yorgo Nestoridis January 25th, 2012 in Responsive WP Themes, Responsive Web Design, Tutorials, WordPressOriginal Article at How to make WordPress Themes Responsive.
Responsive Themes for WordPress
Responsive Websites become a must in 2012. This tutorial demonstrates how to make your WordPress Theme Responsive.What is Responsive Web Design?
In very simple terms: Responsive Web Design aims to display content adapted to the visitors screen size. This means namely that the layout width must be fluid, i.e. expressed as a percentage of the width of the screen, typefaces expressed inem and images must be scalable.
Practically speaking: a responsive designs can be viewed on a smart-phone or on a large PC screen, the display will always be the same and adapted to the size of the screen or browser window. n stead of using multiple style-sheets for different screen sizes, designers use Media Queries which allow to create multiple layouts using the same content. To achieve scalability, CSS media queries, such as min-width or orientation are used.
Make your WordPress Theme responsive using a Child Theme
A quick and easy way consists in creating a child theme; this allows you to upgrade your theme as the case may be without altering your customizations.How to create a responsive child theme?
1. Create a new folder in your wp-content/themes folder and name it anything you like; for the purpose of this exercise I call it “responsive” 2. Create a style sheet in your new Child Theme folder (call it styles.css). 3. Suppose your main theme is called “wptheme”; paste the following into style.css /* Theme Name: wptheme Child Theme URI: http://www.yourdomain.com/ Description: Child theme for wptheme Author: Your Name Author URI: http://www.yourdomain.com Template: wptheme Version:1.0 */ The only line you really need to respect is Template:wptheme; this line refers to the parent theme folder. 4. Import the parent themes style-sheet by adding now the following line to your new style.css:@import url(“../wptheme/style.css”);
5. Define the screen sizes you design for. (Smart-phones, tablets, PC) To test the result we just create different h1 color values for the different screen sizes:
@media screen and (max-width:320px)
{
h1 {
color: #ff0000;
}
}
@media screen and (min-width:321px) and (max-width:768px)
{
h1 {
color:#00FF00;
}
}
@media screen and (min-width:769px)
{
h1 {
color: #0000FF;
}
}
Having set these basic parameters, you can now apply styles and layout values to taste, such as vertical navigation display on small screens.
How to make Images responsive
To make images responsive we will need to take some WordPress specifics into account and there fore we will intervene with CSS3 and Media Queries and modify styles.css and functions.php of our theme. Add the following to your style-sheet to make images scalable: img{max-width: 100%;} img{ –ms-interpolation-mode: bicubic; } Now the images will be re-sized to fit horizontally, while the vertical scaling is still defined by WordPress. We need to remove WordPress image height and width values to scale our images proportionally. In WP, image classes come with a with and height properties; we delete these properties like so: change in your WP editor: <img class=”imgclass” src=”../images/imagethumb.jpg” alt=”” width=”100? height=”100? /> to this: < img class=”imgclass” src=”../images/imagethumb.jpg” alt=”” /> This will work for your post and page images, however not for the images created by WP dynamically, such as post thumbnails. We need to delete with and height properties dynamically with a function. Add to functions.php: function remove_wp_width_height($string){ return preg_replace(‘/\/i’, ”,$string); } Now you need to make a final modification in your template and replace: the_post_thumbnail(); with the following: echo remove_wp_width_height(get_the_post_thumbnail(get_the_ID(),’large’)); That’s all! Hopefully the above will help you to do additional customization wok and as the case may be, to adapt your great themes to the requirements of 2012 Web Design.No related posts.
Copyright © Yorgo Nestoridis - Original Article at How to make WordPress Themes Responsive.
How to make WordPress Themes Responsive
0 Comments Published by Yorgo Nestoridis January 25th, 2012 in How to make WordPress Themes Responsive, Responsive WP Themes, Responsive Web Design, Tutorials, WordPressResponsive Themes for WordPress
Responsive Websites become a must in 2012. This tutorial demonstrates how to make your WordPress Theme Responsive.
What is Responsive Web Design?
In very simple terms: Responsive Web Design aims to display content adapted to the visitors screen size. This means namely that the layout width must be fluid, i.e. expressed as a percentage of the width of the screen, typefaces expressed in em and images must be scalable.
Responsive WordPress Theme XO by Semiomantics
Practically speaking: a responsive designs can be viewed on a smart-phone or on a large PC screen, the display will always be the same and adapted to the size of the screen or browser window. n stead of using multiple style-sheets for different screen sizes, designers use Media Queries which allow to create multiple layouts using the same content. To achieve scalability, CSS media queries, such as min-width or orientation are used.
Make your WordPress Theme responsive using a Child Theme
A quick and easy way consists in creating a child theme; this allows you to upgrade your theme as the case may be without altering your customizations.
How to create a responsive child theme?
1. Create a new folder in your wp-content/themes folder and name it anything you like; for the purpose of this exercise I call it “responsive”
2. Create a style sheet in your new Child Theme folder (call it styles.css).
3. Suppose your main theme is called “wptheme”; paste the following into style.css
/*
Theme Name: wptheme Child
Theme URI: http://www.yourdomain.com/
Description: Child theme for wptheme
Author: Your Name
Author URI: http://www.yourdomain.com
Template: wptheme
Version:1.0
*/
The only line you really need to respect is Template:wptheme; this line refers to the parent theme folder.
4. Import the parent themes style-sheet by adding now the following line to your new style.css:
@import url(“../wptheme/style.css”);
5. Define the screen sizes you design for. (Smart-phones, tablets, PC) To test the result we just create different h1 color values for the different screen sizes:
@media screen and (max-width:320px)
{
h1 {
color: #ff0000;
}
}
@media screen and (min-width:321px) and (max-width:768px)
{
h1 {
color:#00FF00;
}
}
@media screen and (min-width:769px)
{
h1 {
color: #0000FF;
}
}
Having set these basic parameters, you can now apply styles and layout values to taste, such as vertical navigation display on small screens.
How to make Images responsive
To make images responsive we will need to take some WordPress specifics into account and there fore we will intervene with CSS3 and Media Queries and modify styles.css and functions.php of our theme.
Add the following to your style-sheet to make images scalable:
img{max-width: 100%;}
img{ -ms-interpolation-mode: bicubic; }
Now the images will be re-sized to fit horizontally, while the vertical scaling is still defined by WordPress. We need to remove WordPress image height and width values to scale our images proportionally.
In WP, image classes come with a with and height properties; we delete these properties like so:
change in your WP editor:
<img class=”imgclass” src=”../images/imagethumb.jpg” alt=”” width=”100? height=”100? />
to this:
< img class=”imgclass” src=”../images/imagethumb.jpg” alt=”” />
This will work for your post and page images, however not for the images created by WP dynamically, such as post thumbnails. We need to delete with and height properties dynamically with a function.
Add to functions.php:
function remove_wp_width_height($string){
return preg_replace(‘/\/i’, ”,$string);
}
Now you need to make a final modification in your template and replace:
the_post_thumbnail();
with the following:
echo remove_wp_width_height(get_the_post_thumbnail(get_the_ID(),’large’));
That’s all!
Hopefully the above will help you to do additional customization wok and as the case may be, to adapt your great themes to the requirements of 2012 Web Design.
Incoming search terms:
- ?ervený k?íž
- is there a wau to make a wp theme responsive after creation
- how to create a wordpress theme
- how to make a responsive wordpress theme
- how to make wordpress theme responsive
- how to make a wordpress theme responsive
- make wordpress responsive
- make a responsive web design wordpress child theme
- wordpress responsive theme
- responsive wordpress theme
Related posts:
