Thumbnail sizes are set in your dashboard under Settings > Media.  When we change the thumbs’ sizes, the change will apply only to new content. These thumbnails are used by default in the XO Basic Home Page Layout.

In order to modify thumbnails created previously to a change in WordPress settings, we use the “Regenerate Thumbnails” plugin; install from your dashboard and then just run it: this will create thumbnails corresponding to the new WP Media settings for all images in the library and galleries.

The Regenerate Thumbnails plugin will have no impact on syndicated posts unless you also pull in the images to your library when syndicating.

When we upload an image from our dashboard in XO, XO creates 12 thumbnails adapted to the needs of the site and stores them in the default uploads folder for faster loading. If we change the layout settings in XO advanced home page settings, or if we change thumbnail sizes under the layout settings, the previously created thumbnails may not fit anymore.

Using the Regenerate Thumbnails plugin will create a new set of thumbnails corresponding to the new settings. Syndicated content will not be altered by the plugin, unless you pull in the images while syndicating and store them in your library.

Basically we are looking at two elements: the image and the caption.

Also XO allows for different styling of images

Yorgo Logo

inserted into a post and galleries or images and thumbs used in Custom Formats, such as Images and  Gallery Posts.

The example shows XO default style which sets borders with rounded corners, a background and some padding.

These settings can easily be modified with custom CSS, for example by adding and customizing a CSS3 property, such as some shadow:

This example uses inset box-shadow and a hover effect decreasing opacity by 30%.

For box-shadow to work in IE, we use the PIE support:

The example pulls in the PIE script; as done in previous examples (on the menu) make sure that you load the PIE.php and PIE.htc files into your child theme and link to the absolute or relative URI with the behavior property.

Captions can be customized by modifying the following selectors, for example:

You could of course chose a font-family, display the text with a reduced, fixed width or pull the caption into the image using a semi-transparent background and a negative top-margin. The limit is … your imagination.

To style Gallery Thumbnails just customize, for example:

Related posts:

Enjoy Your Valentine and Make it a Great Day!

No related posts.

Related posts:
Happy New Year After Effects
How to Customize your WordPress Typography
12 Principles of Animation with After Effects

Related posts:

1. Happy Valentine Gals and Guys
2. Happy New Year After Effects
3. How to Customize your WordPress Typography
4. Happy New Year
5. 12 Principles of Animation with After Effects

Author Name Style on Semiomantics XO

We want to display the author’s name underneath the main title in small but remarkable fonts:

Note: we just use letter-spacing to gain visibility.

]]> http://businessmarketwatchlondon.com/2012/02/13/meta-tag-styling-on-wordpress/%/feed http://businessmarketwatchlondon.com/2012/02/13/xo-theme-typography/% http://businessmarketwatchlondon.com/2012/02/13/xo-theme-typography/%#comments Mon, 13 Feb 2012 10:25:15 +0000 Yorgo Nestoridis http://typography.ycademy.net/?p=126

1. How to Customize your WordPress Typography
2. XO Mobile Theme with WPTouch Pro
3. Christmas Skin for XO 2011 WP Theme
4. XO Photo Press WordPress Theme
5. Transparent WordPress Theme Design

Transparent WordPress Custom Theme

Playing with the XO Theme Version 3.3.x from Semiomantics and CSS3, I notice how easy it is for most anyone to customize the XO Theme by adding transparencies and other CSS3 elements. Here below you find some drafts. You may visit the test site from : http://globalthebrand.com.

On the test site we use the Semiomantics Widgets and Theme Handler plug-in as well as a modified Supersized plug-in; the latter needs some more work to make it more responsive. Also we use TubePress which behaves fine also on mobile.

The Theme is Semiomantics XO with 3 custom child-themes; any theme can be associated with any page, post, category, tag or sidebar.

Related posts:

1. Transparent WordPress Semiomantics XO
2. Transparent WordPress Theme Design
3. Semiomantics XO Blog
4. The 1001 Faces of Semiomantics XO
5. Semiomantics XO 2011 for WordPress

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.

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.

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 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.

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.

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.

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.

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.

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.

• wordpress xo theme

Related posts:

1. Semiomantics XO Blog
2. Facebook Strategy with WordPress
3. Ycademy Online Seminar January 2012
4. Semiomantics XO 2010 Edition
5. WordPress Shop Version 3 by Semiomantics

Responsive Themes for WordPress

Responsive Websites become a must in 2012. This tutorial demonstrates how to make your WordPress Theme Responsive.

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.

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.

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.

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.

• how to make wordpress themes
• how to make wordpress theme responsive
• how to make a wordpress theme responsive
• is there a wau to make a wp theme responsive after creation
• červený kříž
• how to make a responsive wordpress theme
• creating a responsive wordpress theme
• how to create a wordpress theme
• make wordpress responsive
• how to make responsive themes

Related posts:

1. WordPress Christmas Themes
2. WordPress Themes and Development
3. Best WordPress Business Themes
4. How to Style the WordPress Menu
5. New XO53 Theme for WordPress

Semiomantics XO with CSS3 and HTML5

Time has come to learn about new technologies available for web designers and developers. All common browsers are increasingly able to read and interpret CSS 3 and HTML5 and about all computers are equipped to read java and jQuery. Therefore new possibilities become available to XO developers which we will focus on during the January Seminar.

XO has evolved over the past 4 years along with WordPress Developments. The theme has become responsive and shows perfectly on smart phones and tablets.

Subsequent to the release of WordPress 3.3.x XO needed some adjustments and updates which we have implemented and tested. New design functions become available for advanced customization. XO remains the most flexible theme for custom development, accessible to most anyone.

The goal of the seminar is to become familiar with XO and it’s new features as well as to learn how CSS3, HTML5 and jQuery allow to adapt XO to most any customer’s needs.

Some of the technical issues we will have a detailed look at are:

• Transparencies with CSS3
• Background Sliders
• Mobile Verions using WPTouch Pro
• Content and Frame sliders with Pro Slider and SlideDeck Pro
• Social Network connectivity with FacePages
• How to make a WP theme responsive (adapting to different screen sizes such as Smart Phones Tablets and bigger)

The most obvious expansions are via plug-ins. We will show how to make the best use of plug-ins for the Mobile Web, Social Networking, Social Media Publishing, Social Network Marketing as well as for more attractive display. Time permitting we will look into additional functions, such as shopping cart or marketing specific scripts.

We also will start looking into another important chapter:

How to convert your XO sites into a Mobile App!

In order to make the understanding easier, we will build a new site during the 2 days event. Please join our pre-seminar call on Thursday to prepare the event by setting up a new XO powered site.

All materials will be provided. You will just need some images/photos, videos and other content you may want to use to populate the XO site.

Saturday and Sunday, 28/29 January, 2012 from 1 pm London time till 9 pm London time.

Tickets are available on our new shop at HIOD.com. Please click on the below image to order.

Discounts as usual for Ycademy Pros: Please mail Bianca at bianca(at)ycademy.com for the coupon code.

Related posts:

1. Ycademy Online Seminar January 2010
2. Ycademy Online Seminar May 2011
3. Ycademy Online Seminar
4. Ycademy Online Seminar April 2011
5. Ycademy Online Publishing Seminar

A clip with XO 2011 Sites

 

The clip presents some of the custom sites built on Semiomantics XO 2011.

Semiomantics XO 2012 will be released in January to catch up with the latest WordPress developments.

• semiomantics xo wordpress

Related posts:

1. Semiomantics XO 2011 for WordPress
2. Best WordPress and Semiomantics
3. Semiomantics XO 2011 Release FAQ
4. Semiomantics XO 2011
5. WordPress 2.8 Baker

Animation for Beginners with After Effects

Since Disney’s hand-drawn animation, nothing has changed when it comes to the basic principles of animation. The success of Disney was not just in the design of Mickey and friends but in the way the characters were put into motion.

At Saturday’s Ycademy Seminar we will explain the

and see, how to apply them with After Effects.

Acceleration and deceleration is created with Easy Ease in and out functions is AE. The effect creates fluid motion.

Anticipation designs the action leading to the actual movement, like the backwards swing before hitting a ball with a golf club. Anticipation prepares the viewer for the action which will occur. Surprise actions can be more effective without anticipation.

Squashing and stretching blows life into a volume. The rule is, not to change the volume while designing the effect: a vertical squash goes with a horizontal stretch.

Objects tend to move along an arc, rather than along straight lines. In After Effects we animate along a path.

Straight Ahead Action refers to drawing frame by frame, while Pose to Pose refers to designing first the key-poses and then filling in the frames in-between, hence the terms of “keyframe” and “tweening”.”

Staging refers to the act of drawing the audiences attention to important actions or events in the movie. It has to do with camera positioning and handling and composition.

Well placed exaggeration can make movements more interesting.

Follow Through refers to the motion of objects after the action while Overlapping Action means that an action does not have to stop when or before another starts.

Secondary action makes the principal action more interesting. While the principal action may be a man walking, secondary actions could be arm swinging, movements with the head and so on.

Speed of action impacts on perception and emotion created. One of the most difficult principles to master, often expressed with the distance between two keyframes in After Effects.

This does not really refer to After Effects but to other programs you may use to draw objects, such as Photoshop.

Objects need to be appealing to draw in the audience. This is not only true for animated characters. The best animation is not eye-catching if what you show is not designed in an appealing or charismatic way.

After Effects is not just about motion, it’s about expression, design, appeal and emotion created. An animation designer is therefore a multi-tasker and the best are multi-talents!

• 12 principles of animation
• principles of animation
• 12 principle of animation
• after effects squash
• 12 animation principles
• after effect paper animation
• overlapping action drawing
• Straight Ahead Action and Pose to Pose animation principles
• squash and stretch after effects
• Squash and Stretch TUTORIAL IN AFTER EFFECTS

Related posts:

1. Best Auto Parts by GenesBiz
2. Auto Parts Website for WP

After Effects Openers for Global Sports

Two simple and bold openers for Global Sports US. The opener will be used on the Season 2 fashion presentation clip by Listen Up London.

• after effects openers
• sports opener after effects
• after effects sports
• opener after effect
• opener after effects
• adobe after effects openers
• sports opener after effetcs
• sports after effects
• SPORTS After Effect
• sport opener after effect

Related posts:

1. Global Sports US Logo Reviewed
2. Global Sports US New Headers
3. Best Nike Kicks at Global Sports
4. Global Sports US
5. Global Sports $1500 Sneaker Artwork

After Effects Happy New Year

Tonight at YorgoLive we will focus on editing Inkman’s Christmas After Effect Template. This is a first simple adaptation; in fact the project can be further transformed namely by changing colors and backgrounds. The goal is to become familiar with simple changes of an existing After Effects project.Of course we will show participants how to embed the movie into a Facebook page for sharing with friends and fans.

• Happy New Year after effects
• new year after effects
• after effects new year
• happy new year after effect
• new year after effects project
• new year after effect
• happy new year after effects project
• project after effect happy new year
• after effect new year
• happy new year effects

No related posts.

Christmas Media Design at Ycademy

The Ycademy Seminar in December will focus on Christmas Media, namely on working with Adobe After Effects.In stead of producing static Christmas cards participants will be able to add motion, sound and other effects to produce a stunning customized Christmas Clip.

The above draft for a UVUYO video is a typical example for what After Effects can do for you.

The Christmas Media Design Seminar will take place on December 17, 201, starting at 1 pm London time and closing at 9 pm London time.

As we have only one day available for the December Seminar, we will use all Daily Call sessions for an introduction into the secrets of After Effects. All pre-seminar calls will be recorded as well and video tutorials will be made available to seminar participants.

Acquire enough After Effects related knowledge to be able to work with After Effects templates and to customize, adapt or modify them.

All participants will create a customized Christmas Clip.

Participants need Adobe’s After Effects, preferably CS 5.5 64 bit version, however CS4 running on 32 bit will do.

For Customization, you may want to use some of your family photos or, if you create a business clip, some business related pictures , screen-shots or graphics.

All other materials, namely professional templates, will be provided.

Special Christmas price: $45

Discounts as usual for Ycademy Pros.

Click to get your Ticket

• after effects seminar greece
• what are the media effects during christmas

Related posts:

1. Digital Media Design Online Seminar
2. Yorgo Media Design
3. Photo Media Stock Seminar
4. Online Media Production Ycademy
5. Social Media Marketing Seminar

Eugenides Foundation Technology Exhibition

The experiment will show how a complex solution changes color in a circular manner, acting as a chemical clock.

“Chemical clock Belousov– Zhabotinsky” is a demonstration performed by staff of the Interactive Science and Technology Exhibition, Eugenides Foundation. The demonstration is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License. Based on a work at www.sciencetweets.eu.

• technology exhibition

Related posts:

1. Eugenides Foundation Science and Technology
2. Eugenides Foundation
3. Creative Commons vs Copyright
4. Creative Semiomantics

Today just a few images shot at Cap Sounio where I went for some Sea Urchins with YorgoMan and a nice Lunch with Chris and family.

Related posts:

1. Best Auto Parts by GenesBiz
2. Acropolis Rally 2011 Images
3. Publish Google Maps
4. YorgoMan on Semiomantics Evo2 and XO
5. Vouliagmeni New Church

Copyright © Yorgo Nestoridis - Original Article at Cap Sounio — Sea Urchins.

Today just a few images shot at Cap Sounio where I went for some Sea Urchins with YorgoMan and a nice Lunch with Chris and family.

Related posts:

1. Best Auto Parts by GenesBiz
2. Acropolis Rally 2011 Images
3. Publish Google Maps
4. YorgoMan on Semiomantics Evo2 and XO
5. Vouliagmeni New Church

Copyright © Yorgo Nestoridis - Original Article at Cap Sounio — Sea Urchins.

This post is for my friends, shareholders and investments in Empire Avenue. It shows you the rational behind my EA performance.

Living in Greece, south of Athens at the beach, the internet is the ideal working place, the more that here in Vouliagmeni, the beaches are equipped with high speed WiFi :-).

I have been developing and building websites for the last 10 years. Today the main demand comes from all over the world for custom design and developments with the aim to gain high visibility on Google and in social networks.

Over the years I have built a solid team of partners from all around the globe with whom we share project developments.

High demand for WordPress based sites have led to the development of an own highly customizable and optimized framework which has proven its performance and efficiency over the last 3 years. The XO Theme for WP can also be bought as a DIY version at http://semiomantics.com.

EA Icon Apple Cloud Style

More recent developments point into the direction of the mobile web, whereas we optimize sites for various mobile platforms and build applications for the restless :-).

I am writing a Blog at http://yorgonestoridis.com which deals with many issues related to my business and life. More specific blogs deal with Digital Photography, Web Design, Online Editing and Publishing, Online Marketing and Website Development.

To pass on the know-how I have been offering daily online calls and monthly 2-days seminars for years, helping people to succeed with their home business or in their endeavor to bring their offline activity to the top of Google.

I like EA as it demonstrates the interaction and interactivity between different networks and the impact of socializing online on traffic and conversion; of course the investment game is far from realist, but it stimulates people to hang in there and to continue to promote less their business than EA.

EA also allows to study networkers’ behavior compared to investors’ behavior in as much as networkers typically seem to use the formula: “I buy your shares if you buy mine”, which is complete nonsense, whereas an investor would rather buy a stock with potential and do everything to help the baby grow ( for example: I recommend all shares I buy, I Twitter about them and as the case may be I look at the blogs and endorse them, I like them on Facebook and I may look at their Fan Page and so on.)

I am too new to the program to measure the impact of Social Network activity on the personal growth, but it will be interesting to draw some conclusions from the stats.

EA Icon Apple Cloud Style 2

There is a lot to learn from EA to finally implement some of the lessons into our own Strategies to promote our own websites and business rather that to build wealth for Facebook, Twitter, YouTube, Flickr and … EA.

For the time being I am happy about any kind of support, be it as a recommendation, a mention, an endorsement or if you like to invest into an aggressive strategy, you are most welcome to grab my shares. Don’t however ask me to reciprocate on investment, as my investment decisions are function of building value for my shareholders; the best I can do for you, is to keep the value of the stock you buy growing faster than your over all performance …  makes sense, does it?

For this reason, I also kick out shares which don’t perform, which would be a problem if the deals were based on reciprocity.

If I can help you or support your action (not your lethargy …) please give a shout using the comment form below and I will sure find a way to stimulate your share value.

If you like the above icons, just grab them, I did them for fun. If you want the PSD file … you better have some influence on the designer … a solid stake in my shares could help :-).

Just shout here below.

• ea icon

Related posts:

1. Empire Avenue
2. Build your Flash Intro
3. The Semiomantics Team News
4. YORGOO new Orientation
5. Mobile WordPress and Shop

Copyright © Yorgo Nestoridis - Original Article at Empire Avenue Intro.

Just some Photos from Syros

Related posts:

1. Syros Church
2. Ermoupoli Syros
3. Syros Small Church
4. Church Syros
5. Syros Ferry

Copyright © Yorgo Nestoridis - Original Article at Syros.