Original Article at Photo Sprites Menu Tutorial.Photo CSS Sprites for WordPress — Free PSD This Tutorial will show you step by step how to build an attractive menu using sprites for your WordPress Photo website. I have used this feature on the below demo site: The menu is placed in the header.php of the WordPress theme (here its Semiomantics XO) in replacement of the navigation. 1. Create the Image file in Photoshop The image file consists roughly of a Filmstrip serving as mask and then the images which are inserted into the film strip. In the normal position, the images are dimmed by a black fill layer at about 75% opacity. The final image looks as follows: Download the PSD File Download my PSD file from HERE. Open the PSD file in Photoshop and inspect it When you open the file in Photoshop, you will find 3 folders in the layer stack: The bottom folder contains the lower film-strip, the next folder concerns the upper film-strip and on top you find the Semiomantics XO Photo Publishing ad which I kick in as a bonus. To start, just make the “ad” folder invisible by clicking on the eye icon placed to the left of the “ad” folder. [...]
Copyright © Yorgo Nestoridis - Original Article at Photo Sprites Menu Tutorial.
Related posts:Evo 2 Home Page Tutorial
Evo2 Gallery Tutorial
Simple Sprites Menu
Thesis Tutorial Header Banner Rotator
Apple Touch Icon Tutorial
Original Article at How to Style the WordPress Menu.WP Custom Menu with Rollover Effect 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 WP Photo Theme — XO Photo 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% [...]
Copyright © Yorgo Nestoridis - Original Article at How to Style the WordPress Menu.
Related posts:Transparent WordPress Semiomantics XO
Transparent WordPress Theme Design
How to Customize WordPress 2
How to Create an Ad with Rollover Effect
Web Design Workshop 4 – Navigation
Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/web-design/simple-sprites-menu/.How to build a fading Navigation with Sprites To build a navigation bar using sprites we need an image (menu design), some CSS code to style the menu area and some HTML code to link the menu to target. Finally we drive the feature with [...]Related posts:Simple Shopping Cart for your BlogWeb Design BackgroundsWeb Design Workshop 16 – Scroll over BackgroundTransparent WordPress Semiomantics XOTransparent WordPress Theme Design
Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/wordpress-development-seminar/.Ycademy January 2011 Online Seminar Back to work! After a busy 2010 and hopefully a good rest over the year end, let’s start 2011 with WordPress based Website Development using Semiomantics XO. After multiple exercises such as the Christmas site or the personal blog, we [...]Related posts:Ycademy WordPress and Flash SeminarWordPress Seminar by YcademyYcademy Online SeminarYcademy Seminar December 2010Ycademy November Seminar
Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/semiomantics-evo2/evo2-menu-tutorial/. Contents [ hide ] 1 How to Structure the Evo2 Menu 1.1 YorgoMan Menu 1.2 How to Edit the Menu 1.3 Multiply the Image Galleries 1.4 Customize the Galleries 2 Author: How to Structure the Evo2 Menu The Evo2 Menu is as flexible as you need it to be. To adapt the menu to fit your project, decide first which modules you wish to use and then edit the menu in function of the desired structure. YorgoMan Menu The YorgoMan site will feature mainly Photos. The preferred gallery module is the Images module. YorgoMan wants to organize the images in albums and for each album he wants to load a menu entry. Albums: Sun and Sea Basketball Friends Holidays I me and myself We will need 5 times the Image module. A further category will be Music where he wants to load his preferred songs; for this we will use the Music Module. Finally, he wants to load some YouTube clips, for which we use the YouTube Galley module. For the good order’s sake we keep the contact form and eliminate all other modules. How to Edit the Menu [...]Related posts:Elegant Web Design Evo2Elegant Evo2 Web DesignEvo 2 Home Page TutorialHow to build your Evo2Elegant Evo2 Web Design
Copyright © 2010 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis/wordpress-menu-problem.WordPress 3 Menu Limits When editing the new custom menu feature in WordPress 3 you may notice that you cannot add an unlimited number of items for display. On our Semiomantics Author Blogs we were limited to 16 items when Bianca commented about the issue. [...]Related posts:Elegant WordPress by Semiomantics 101Elegant WordPressWordPress Seminar by YcademyWordPress for Authors SeminarFirefox Crashes on WordPress
August 17, 2011
0