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.

Related posts:

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

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

10 Steps to Implement your Facebook Strategy with WordPress

Implementing your Facebook Strategy will be at the center of the November Ycademy Seminar. This hands-on Seminar and Workshop will stretch over two days and build with participants an eye-ball-twisting Facebook presence. See the seminar schedule at the bottom of the post.

The Seminar is designed for WordPress Developers and WP users who are looking for high productivity and customized publishing and marketing solutions.

This topic deals with efficient strategies which will efficiently improve your Facebook presence.

Visit the Semiomantics Facebook Page

Surfing through Facebook we notice some common errors well intended people commit when building their Facebook presence. We will discuss these issues and show you how to eliminate them from your personal or business Facebook.

While content is king, there are different ways of making it accessible to visitors. We will discuss the recent changes Facebook has implemented and show you where the focus should be in order to improve your visibility, traffic and business or network expansion on Facebook.

Function of your strategy we will define and optimize privacy settings in order to grant potentially interested visitors access to relevant information. Privacy, Accessibility and List-building as well as Targeted Communication are the essentials of this key session.

For people looking for you, your business, services or products, your Profile and Info page are of the utmost importance, the more that your info is visible from outside Facebook and therefore Google efficient. We will set up with participants an efficient Info Page.

We will discuss the recent changes implemented by Facebook and how they impact on our strategies.  Friends, Fans and Subscription features impact on the way we expand our network and influence on Facebook.

Overview of the Facebook Page feature. Integration techniques, Apps, Content, Canvas and Pages.

The focus is on the technical set-up of a Facebook Page. As  content we will use a graphic, picture of video.

What is it you actually wish to display on your Facebook page? In fact there is no limit and it depends entirely on your strategy.

This is the center piece of the seminar. Creating Facebook Page right from your WordPress site is now possible. We will set up a reveal page and different Facebook pages depending on participants needs. In fact we show you how to create a whole website in Facebook, straight from your WordPress.

While this works with most any WordPress 3.1 enabled Theme, we will demonstrate the integration with Semiomantics XO.

In fact we will work with a professional plugin modified for Semiomantics XO.

The Seminar will guide you to master the following and more:

• 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 Clicks

• Comments, Like, Send and Over 50+ Custom Shortcodes for Enhanced Customization

• Facebook Open Graph Integration for Enhanced Facebook Integration and Google SEO

• Auto Post to Facebook From Your WordPress Blog

• Use Your Facebook Albums and Photos on Your Blog and Fan Pages

• Add Google Maps to Your Facebook Fan Pages

• Create Squeeze and Sales Pages with Just a Few Clicks on Facebook

Add Facebook related widgets to your front and/or content pages. Google+ and Twitter buttons. Pull in Facebook Albums, Events, like Buttons and more. Use Facebook Connect to log in to or to register with your blog.

Create content which is only accessible after visitors clicked the “Like” button. A smashing filter which allows you to manage accessibility right from your XO.

Saturday and Sunday November 26/27, 2011.

We start at 1 pm London Time and end at 9 pm London time both days.

You need a WordPress blog preferably with FTP access.

Scripts and all other materials are provided.

We will install the necessary scripts for you previous to the Seminar; please get your Tickets early. If we are not yet in possession of the FTP access to your site, please send it by email to Bianca Gubalke at bianca(at)ycademy.com.

The Price for Participating, Materials and access to recordings is $85.

Click to get your Ticket

Discount as usual for Ycademy Pros. Please contact Bianca Gubalke at bianca(at)ycademy.com for the code or any other question you may have pertaining to the Seminar.

• social community feature like facebook in wordpress
• strategy for facebook wordpress integration
• facebook strategy
• creating efficient blog pages in wordpress
• scheduled facebook page posts
• price create facebook page
• integrate wordpress blog with facebook page
• increase likes on a wordpress post
• implement strategy to add to our number of facebook fan
• auto post to facebook from wordpress

Related posts:

1. WordPress on Facebook
2. Facebook and Mobile Web Seminar by Ycademy
3. Facebook Marketing 2
4. WordPress for Facebook Fan Pages with FBlaster
5. Semiomantics Optimization for Facebook

• black and white photoblog template — blogger
• wordpress slide gallery
• Photopress wordpress
• wordpress aggregator themes

Related posts:

1. Transparent WordPress Theme Design
2. Best Consultant Theme for WordPress
3. WP Best Old Fashion Theme
4. Glossy WordPress Theme Development
5. Best Car Dealer Theme for WordPress

Copyright © Yorgo Nestoridis - Original Article at XO Photo Press WordPress Theme.

This tutorial is based on a recent Custom Photo Blog Theme Development for WordPress on the base of Semiomantics XO. The Solutions apply to most any clean WordPress theme whereas some of the style sheet syntax may vary from theme to theme.

The Goal of the exercise was to build a site which will display on mobile platforms as well without the use of WPTouch Pro for example and which offers the possibility to navigate without zooming on mobile phones.

This gave us the opportunity to style the Main Navigation (horizontal menu on top of the site. As we are on a photo site we thought about using Menu tabs with images and rollover effects which can be achieved either with sprites or as individual images.

We opted for a solution without sprites in this case considering that the difference will not be material on this site.

The screenshot shows the rollover effect as it has been taken while the mouse was hovering over the CONTACT tab.

The Menu Normal View and the Hover View show the same picture, whereas we put a transparent black layer (85% alpha) over the image for the Normal View. Also the font changes from white to blue.

On other sites we used black and white images which evolve to color or simply two entirely different pictures or text labels.

The question we will answer here is:

First of all we create a menu from the WordPress dashboard under Appearance –>Menu.

We call this main navigation ‘Main’. Now, and this is important, open the Screen Options on top right of the screen and tick all options, namely the Advanced Menu Properties.

Click to see large version.

These allow you to configure your menu items further, for example you may open the link in a new tab or window, you may define the link relation, add a description and important for us: you may define CSS Classes!

These classes allow us to style each list item in the menu individually by defining the corresponding styles in the custom syle sheet.

As you can see from the above screen-shot, we created a menu tab for FREE B&W PHOTO FEEDS. We expand the tab in the back-office to see all properties and we create a CSS Class which we call “navfeed” (You just type in the name of the class, not the “.” (dot) which you will use in the CSS Style-sheet only.).

Repeat this procedure for  all menu items creating for each a CSS class (or multiples).

If all tabs will be styled in a uniform way, you may use the same class for all; it is however likely that you wish to create individual styles, namely if you use different images and width of the tabs.

Now we just style the menu from the XO design tab as much as possible: fonts, font color and size and hovers if you wish. Our example shows that we have spread the menu over the full width of the page simply by adapting the fonts and font sizes, right from the XO Design panel.

Once done, take a screenshot of the menu and load it to Photoshop or any other image editor where you dispose of rulers to measure the width of each tab.

In our example, we are using 4 tabs with different width, the page width being 980 pixels.

The tabs have the following width:

1. navhome:       157 px
2. navfeed:          459 px
3. navcontact:    280 px
4. navy:                 84 px

Total, 980 pixels.

We wish to separate the tabs leaving a space of 1 pixel between them; we therefore decrease the with of 3 tabs by 1 px each to create the space for the spaces (this is getting smart, huh).

If you use Photoshop, you can just design your menu bar and slice it then accordingly, If you go one by one, you just create individual pictures of the same height and the width as defined above.

As we like to use the menu layout from XO, we will use the font definition from XO; the images we create will serve just as background pictures for each menu tab.

Our XO Settings for the menu are:

• Font: Quicksand
• Font size: 32 px
• Font Color: #FFFFFF (white)
• Hover Color:  #0000FF (blue)
• Background: #000000 (black)

These settings result in a nice menu which we will expand with an image. The height of the menu is 80 px at present and we wish to expand it to 182 px by adding an image.

There you go! Now let’s fit everything together!

Finally we open our CSS Style-sheet and define the newly created classes.

As you see above, our classes are:

navhome, navfeed, navcontact and navy.

The corresponding classes in the Style-sheet will be:

.navhome

.navcontact .….   a dot in front of the label defines a “class” in the CSS Style-sheet.

Also, as these tabs contain hyperlinks, we will create the classes

.navhome a

.navcontact a .…  and so on.

This way we will then be able to create the hover pseudo classes:

.navhome a:hover .… and so on.

Now we just type into our style-sheet whatever result we want to achieve, in our case this looks as follows for the HOME tab (the others are similar, except the width and image reference).

.navhome, .navhome a {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navhome-o.png') no-repeat !important;height:130px !important;}
.navhome a:hover {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navhome.png') no-repeat !important;}

.navfeed, .navfeed a {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navfeed-o.png') no-repeat !important;height:130px !important;}
.navfeed a:hover {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navfeed.png') no-repeat !important;}

To this we add the little 1 px space:

.navfeed  {margin-left:1px ;}

That’s it!

Hope you enjoy and let me know about your results by commenting here below.

• how to style wordpress menu
• style wordpress menu
• wordpress menu styles
• wordpress menu style
• how to style menu in wordpress
• menu stylé wordpress
• style sheets themes for wp

Related posts:

1. Transparent WordPress Semiomantics XO
2. Transparent WordPress Theme Design
3. How to Customize WordPress 2
4. How to Create an Ad with Rollover Effect
5. Web Design Workshop 4 – Navigation

Copyright © Yorgo Nestoridis - Original Article at How to Style the WordPress Menu.

“How to Edit and Publish Digital Photos” is the focus of the Ycademy Online Seminar in July.

Taking photos has become a relatively easy and cheap task with the proliferation of accessible digital cameras and mobile devices, such as smart-phones and tablets. Of course the quality of the pictures varies in function of the quality of the camera and the skill of the photographer. Some of the shortcomings can be compensated by improving skills and post editing.

The Seminar will deal with editing digital photos using namely Photoshop and OnOne Professional Photo Tools.

Original 124 Kb

… after some basic editing …

Edited 153 Kb

… for web and devices with reduced JPEG quality.

30% JPEG for Web 27 Kb

Editingand post editing have a lot to do with the purpose of the image as well as on the destination platform. We will look into different options and detail specific requirements for the mobile web.

The above sample shows that editing makes the image heavier! The more filters, masks and brushes we apply the more Kb we ad and the slower the image will load once on the site. Here it is getting interesting: the above image counts 124 Kb as shot (it has just been cropped to 300 pixels wide), then we have added 29 px while editing and in the end reduced the JPEG quality to end up with a final 27 Kb, i.e. 2 Kb less than what we added by editing, amd yet, the image is more dynamix, vibrant and sharper.

In order to use editing tools efficiently, we must acquire some knowledge about the different filters and masks. We need to learn some terminology and we need to learn to translate the desired results into professional lingo, so that we use the appropriate tool to achieve the desired result.

The absence of such knowledge results in a “roulette approach” and therefore to unpredictable results and bloated file sizes.

Publishing Images and Photos with Semiomantics XO on WordPress

With WordPress 3 many new features became available and Semiomantics exploits them with the recent XO versions. In as much as images, videos and galleries are concerned, XO provides special post formates which are ideal for Media Publishng.

We will explain the custom formates and how to create a specific media feed stream throughout an XO publishing Network.

To apply the new skills and knowledge, we will build a photo content management system on XO. To anticipate the work and to make the best use of the time we dispose of, we will start building the Photo Site during the 2 Pre-Seminar calls on Tuesday and Thursday next. During these two sessions we will namely focus on customization and design of the XO to end up with a photo site which will provide multiple media streams to be used on other sites of the network.

July 30 — 31, 2011 as usual starting at 1 pm London Time each day and ending at 9 pm London Time.

Tickets: $85 with the usual special discount of $50 for Ycademy Pros; please get the Ycademy Pro Discount code from Bianca (@) ycademy.com as usual.

Click on the Image to get your Ticket — Thank You.

• edit and publish photos
• how to publish a jpeg to web
• how to publish photo in wordpress
• ideas for digital media design seminar
• web27 edit photo

Related posts:

1. Digital Photography Ycademy 1
2. Ycademy Digital Photography Seminar
3. Digital Photography and Photo Editing
4. Digital Photography and Photo Editing II
5. Digital Photography Ycademy 10

Copyright © Yorgo Nestoridis - Original Article at How to Publish Digital Photos.

Brilliant new YORGOO Press set ups! After the recent move from News Cast scripts to Semiomantics XO, and the clean out after an important hack, the YORGOO Press sites have been set up with a new structure, whereas each site got it’s own independance.

Here some screenshots of the recent YORGOO Press Developments on Semiomantics XO.

• best wordpress aggregator plugin
• best wordpress aggregation
• wordpress aggregator
• wordpress as a new aggregator

Related posts:

1. Make Money with YORGOO Press Seminar
2. New YORGOO Plugin for YORGOO Press
3. YORGOO Press NewsCast
4. YORGOO Press on Google
5. YORGOO PRESS New Servers

Copyright © Yorgo Nestoridis - Original Article at YORGOO Press Aggregators for WordPress.

Customizing your WPTouch Pro skin is similar to customizing your XO all together, In fact, from an editing and design point of view, be prepared to some work! To display your Mobile XO on multiple platforms of the mobile web, you need to take into account the different screen resolutions and of course screen sizes, which means that you may have to load different versions of your graphics and images.

For the purpose of the XO Blog Mobile version, I have thought about sticking to my preferred design colors and fonts: red and gray scale as well as Helvetica for easy reading.

As you can see, from the above blog home, I have taken out backgrounds, round corners, paddings and margins to just separate posts by a dotted line. Header size, icons and post thumbnails have been increased in size for a better surf experience.

The menu page underwent the same cure:

As you know, I like it bold and minimalist and I guess it’s pretty much what you get here.

The same style you find on pages, such as the author page which includes the contact form:

/*WPTouch Pro Style for Semiomantics XO Mobile
Author: Yorgo Nestoridis
Style URL: http://semiomantics.com/xo/xo/xo-mobile-them…th-wptouch-pro
Designed for Semiomantics XO Blog at http://semiomantics.com/xo
tags:mobile theme for wordpress, wordpress mobile, xo, mobile, semiomantics xo.
Date: June 29, 2011
*/
.post .thumbnail-wrap {position: relative;float: left;display: block; height: 90px;width: 120px;margin-right: 8px;}
.post img.attachment-post-thumbnail {width: 120px;height: 90px;border:2px #FFF;}
body.wptouch-pro {background:#fff;}
.clean-white a#logo-title {color:#000000 !important; text-shaddow:none !important;text-shadow:none !important;font-variant:small-caps;font-size:24px;font-style:bold;}
.clean-white #header {background:#FFFFFF;color:#000;height:70px;border-bottom:3px double #000;}
.clean-white a#header-menu-toggle {background: #D40000;width:40px;height:40px;}
.clean-white #tab-bar {background:#ffffff;border-top:3px double #000;}
img#logo-icon {width:57px;height:57px;}
#main-menu{margin-top:18px;}
.post {padding:0px !important;margin:1px 3px 0 3px;border-bottom: 1px dotted #222222;border-top:0 !important;!important;border-left:0 !important;}
.post h2, .post h2 a {font-weight:bold;}
#content{margin-top:9px;}
a#logo-title {padding-top:22px;}
a.read-entry {background:#d40000;color:#FFFFFF;margin-bottom:5px;}
.post.page-title-area img{width:114px;height:114px;}
#main-menu ul li img {width:48px;height:48px;}
.clean-white #main-menu ul li a {background:none;color:#111111;}
.rounded-corners-8px {border-radius:0;}
a.read-entry {margin-left:10px;}

• wp touch pro themes
• wptouch pro themes
• theme wptouch pro
• wptouch custom themes
• wp-touch pro themes
• wptouch custom theme
• backgrounds for wptouch-pro

Related posts:

1. Semiomantics XO on iPad
2. Tutorials
3. Semiomantics XO Blog
4. Facebook and Mobile Web Seminar by Ycademy
5. 4 Web Design Tips for Mobile Websites

Copyright © Yorgo Nestoridis - Original Article at XO Mobile Theme with WPTouch Pro.