How to make WordPress Themes ResponsiveMove your mouse over image or click to enlarge

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 in em and images must be scalable.

Responsive WordPress Theme XO by SemiomanticsMove your mouse over image or click to enlarge

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.

Ycademy Online Seminar January 2012Move your mouse over image or click to enlarge

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 Theme for WordPress

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.

screens2h1-300Move your mouse over image or click to enlarge

XO Edition 2012

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 XO Seminar

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)

XO on MobileMove your mouse over image or click to enlarge

How to expand XO functionality?

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!

XO on iPhoneMove your mouse over image or click to enlarge

Build an extraordinary Site

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.

Materials

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.

Schedule

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

Tickets

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

Ycademy Online Seminar TicketMove your mouse over image or click to enlarge

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

Copyright © Yorgo Nestoridis – Original Article at Ycademy Online Seminar January 2012.

data-text='Semiomantics XO 2011 for WordPress' data-url='http://yorgonestoridis.com/?p=22499' data-counturl='http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/semiomantics-xo-2011-for-wordpress-2/'
data-count='none'
data-via='YorgoNestoridis' >

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.

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

Copyright © Yorgo Nestoridis – Original Article at Semiomantics XO 2011 for WordPress.

data-text='12 Principles of Animation with After Effects' data-url='http://yorgonestoridis.com/?p=22494' data-counturl='http://yorgonestoridis.com/design/12-principles-of-animation-with-after-effects/'
data-count='none'
data-via='YorgoNestoridis' >

12 Principles of Animation with After EffectsMove your mouse over image or click to enlarge

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

12 Principles of Animation

and see, how to apply them with After Effects.

1. Slow in — slow out

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

2. Anticipation

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.

3. Squash and Stretch

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.

4. Arc

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

5. Straight Ahead Action vs. Pose to Pose

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

6. Staging

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.

7. Exaggeration

Well placed exaggeration can make movements more interesting.

8. Follow Through and Overlapping Action

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.

9. Secondary Action

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.

10. Timing

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.

11. Solid Drawing

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

12. Appeal

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!

Related posts:

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

Copyright © Yorgo Nestoridis – Original Article at 12 Principles of Animation with After Effects.

data-text='Happy New Year After Effects' data-url='http://yorgonestoridis.com/?p=22476' data-counturl='http://yorgonestoridis.com/design/happy-new-year-after-effects/'
data-count='none'
data-via='YorgoNestoridis' >

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 by Semiomantics

Related posts:

1. Happy New Year
2. Best Facebook Pages
3. Happy Birthday Zo
4. Happy Valentine Gals and Guys
5. Happy Easter from Vouliagmeni

Copyright © Yorgo Nestoridis – Original Article at Happy New Year After Effects.

data-text='Christmas Media Design Seminar' data-url='http://yorgonestoridis.com/?p=22469' data-counturl='http://yorgonestoridis.com/ycademy-online-seminar/christmas-media-design-seminar/'
data-count='none'
data-via='YorgoNestoridis' >

Christmas Media Design SeminarMove your mouse over image or click to enlarge

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.

Schedule

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

Goals

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.

Materials

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.

Tickets

Special Christmas price: $45

Discounts as usual for Ycademy Pros.

Related posts:

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

Copyright © Yorgo Nestoridis – Original Article at Christmas Media Design Seminar.

data-text='Eugenides Foundation Exhibition' data-url='http://yorgonestoridis.com/?p=22460' data-counturl='http://yorgonestoridis.com/yorgo-nestoridis-development/eugenides-foundation/eugenides-foundation-exhibition/'
data-count='none'
data-via='YorgoNestoridis' >

Eugenides Foundation ExhibitionMove your mouse over image or click to enlarge

Eugenides Foundation Technology Exhibition

Chemical clock Belousov-Zhabotinsky from Eugenides Foundation on Vimeo.

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

eugenides-foundation-480Move your mouse over image or click to enlarge

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

Related posts:

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

Copyright © Yorgo Nestoridis – Original Article at Eugenides Foundation Exhibition.

data-text='Eugenides Foundation Science and Technology' data-url='http://yorgonestoridis.com/?p=22448' data-counturl='http://yorgonestoridis.com/yorgo-nestoridis-development/eugenides-foundation/eugenides-foundation-science-and-technology/'
data-count='none'
data-via='YorgoNestoridis' >

Eugenides Foundation Science and TechnologyMove your mouse over image or click to enlarge

Interactive Science and Technology Exhibition

Eugenides Foundation Physics Experiment Collections and Technical Exhibits

The Eugenides Foundation’s Physics Experiment Collections and the Technical Exhibit Halls were created in 1966 and operated at the Foundation facilities on Syngrou Avenue until the mid-1990s. Their goal was to fill the gaps in experimental equipment at the institutions of technical education in post-war Greece and to more adequately carry out the essential educational function in the technical and scientific fields.

Two new wings were added to the Foundation in September 2003; one of them houses the New Digital Planetarium and the other, in a section of the building symmetrical to the Planetarium, houses a unique exhibition hall, the “Marianthi Simou” Interactive Science and Technology Exhibition Hall.

eugenides-foundation-480Move your mouse over image or click to enlarge

The first periodic exhibition, titled Science of Sports, was held there in November 2003, staged by the General Secretariat for the Olympic Games in cooperation with the Eugenides Foundation in light of the 2004 Athens Olympic Games.

Permanent Interactive Science and Technology Exhibition

A permanent Interactive Science and Technology Exhibition has been on display in this new exhibition wing since December 2006.

Related posts:

1. Eugenides Foundation
2. Protected: Global Sports Update
3. Publishing and Editing Images 2
4. Semiomantics XO 2010 Edition
5. How to Make Money with Images

Copyright © Yorgo Nestoridis – Original Article at Eugenides Foundation Science and Technology.

What is a Facebook Business Account?Move your mouse over image or click to enlarge

Facebook Business Account

What is the difference between a Business and a Personal Account? Which is the ideal solution for you and what are the implications of your choice?

First of all, be aware that according to Facebook rules you are not allowed to use multiple Facebook Accounts. However, you may create multiple Advertizing Accounts as a Managed Advertiser having a dedicated Facebook Representative.

What is a Facebook Business Account?

You can set up a Facebook Business Account, if you don’t already have a standard account,

Business Accounts are mainly designed for Advertisers and to manage pages.

yorgonestoridisMove your mouse over image or click to enlarge

How to create a Facebook Business Account

To create a business account you start by setting up a Facebook Ad or a Facebook Page.Once you have provided the required information, you will be taken to the log-in page and you will be asked if you have already a Facebook Account.  Select “I do not have a Facebook account” and continue by providing email and date of birth.

What can you do or not do with a Business Account

As the owner of a Business Account you can view and edit your pages and ads, add photos or videos and consult stats relating to your pages and ads.

You cannot see other users profiles or timelines as Business Accounts have limited access to information of Facebook.

You cannot see Facebook content that does not live on your pages.

Business accounts cannot be found on search or added as friends.

Business accounts cannot send or receive Friends Requests.

Converting Business Accounts

A business account can be converted into a regular account. Once done, the process cannot be reversed.

Note: The Big Disadvantage

The big disadvantage of Business Accounts are their absence from the internal search and friend feature, making it almost compulsory to spend big time and/or money to promote the content.

Related posts:

1. Facebook Strategy with WordPress
2. Facebook and Home Business
3. Facebook Marketing 2
4. Semiomantics Optimization for Facebook
5. Best Facebook Pages

Copyright © Yorgo Nestoridis – Original Article at What is a Facebook Business Account?.