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. Transparent WordPress Gallery Scripts and Plug-ins 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. Incoming search terms:xo theme wordpresstheme blogtheme wordpress typographyxo wordpress themewordpress semiomanticswindows 8 theme for wordpresswordpress transpert themewordpress transparent responsive themewordpress theme windows 8transparent wordpress theme cssRelated posts: Transparent WordPress Semiomantics XO Transparent WordPress Theme Design Semiomantics XO Blog The 1001 Faces of Semiomantics XO Semiomantics XO 2011 for WordPress
Related posts:
Transparent WordPress Semiomantics XO
Transparent WordPress Theme Design
Semiomantics XO Blog
The 1001 Faces of Semiomantics XO
Semiomantics XO 2011 for WordPress
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
Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis/how-to-create-an-ad-with-rollover-effect/.Add Rollover Effects to your Ads The principle is simple: the ad consists of a styled link, the style consisting of positioning a background image with a rollover effect when the mouse passes over the image (hover). When clicking on the image the target page opens. A few years ago the rollover effect could only be achieved using JavaScript. The same effect can now be achieved using CSS and namely the pseudo-class :hover. 1. Create your Image The rollover effect can be achieved using two separate small images which alternatively load as a background or by creating one big image containing multiple small images and by shifting the background position. (CSS Sprite). For the purpose of this exercise we will use the CSS Sprite version. The example shows the rollover effect as used on the homepage. For our image we need the normal view as well as the hover view of the ad united on one image created in Photoshop: the image here below is 250 pixels wide and 250 pixels high. In stead of creating two images we create only one and leave a vertical space between the two [...]
Related posts:Create 125 x 125 pixels Ads
How to create a Favicon with Photoshop
Simple Sprites Menu
Create a Favicon with Photoshop
Create Apple Touch Icons and Startup Images
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 © 2010 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/semiomantics/christmas-skin-for-xo-2011-wp-theme. Contents [ hide ] 1 Time for a High Performance WP Christmas Theme 1.1 How to create a Christmas Website with Semiomantics XO 2011? 1.2 Sophisticated Christmas Theme for WordPress 1.3 Join our calls this week and we will build your site together 2 Author: Time for a High Performance WP Christmas Theme Beginners often are unaware of the impact a theme can have on the performance of a website and therefore they tend to change themes often. Downloading free themes is a great way of changing the look and feel of the site quickly, however there is more to a theme script than looks. Semiomantics XO 2011 is a theme which allows to quickly adapt to seasonal or mood challenges right from the dashboard. Further customization is always possible with some knowledge of CSS and php or by discussing the project with a Semiomantics Developer. How to create a Christmas Website with Semiomantics XO 2011? The easiest way is to follow just the following steps: 1. Choose a color scheme, say in the reds and greens and apply them to your backgrounds, fonts and features from the Semio [...]Related posts:Christmas at Ycademy starts TonightSemiomantics XO 2011 for WordPressSemiomantics XO 2011 Edition ReleaseSemiomantics XO 2011Christmas Cards Personalized
Copyright © 2010 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-development/edit-wordpress-theme-css. Contents [ hide ] 1 Edit Theme CSS with Firebug 1.1 2 Good Reasons for using Firebug 2 Test your Site with YSlow Edit Theme CSS with Firebug Tonight’s call will focus on the use of Firebug to quickly test and edit your Theme style. Please download and install it. Firebug integrates with Firefox and is immediately ready for use. Firebug is one of the most efficient tools for professional developers and newbies alike. 2 Good Reasons for using Firebug Have you ever edited your website’s style? And, have you ever had a hard time to find within the CSS style-sheet the exact block of code you needed to edit to implement a desired modification? With Firebug, you will see immediately which line of your code you need to edit and best of all, you can test the modification on the fly before actually hacking your CSS code. Having Errors on your page, in your CSS or HTML code? Firebug is an ideal debugger pointing you directly to the problem area and suggesting the necessary modifications. If you are not yet using Firebug, it’s time to get started tonight [...]
Related posts:Glossy WordPress Theme Development
Transparent WordPress Theme Design
How to Customize WordPress 2
WP Best Old Fashion Theme
Semiomantics Thesis Interpretation
Copyright © 2010 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/yorgo-nestoridis-media/how-to-customize-semiomantics-thesis. Contents [ hide ] 1 How to Customize Semiomantics Thesis 1.1 What are CSS Classes and IDs? 1.2 Example: ID 1.3 Example: Class 1.4 Custom IDs and Classes in Thesis 1.5 Thesis Custom CSS How to Customize Semiomantics Thesis After Basics CSS Syntax let’s [...]
Related posts:How to Customize WordPress
Semiomantics Thesis Interpretation
Customize WordPress with Semiomantics XO
Transparent WordPress Theme Design
Transparent WordPress Semiomantics XO
Copyright © 2010 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/web-design/how-to-customize-wordpress. Contents [ hide ] 1 Customize WordPress Style 1.1 Basic CSS Syntax 1.2 Inheritance 1.3 Commenting Tags 1.4 Note Customize WordPress Style To customize your WordPress based website, it is useful to have some knowledge about CSS. CSS stands for cascading style sheet: “Cascading [...]
Related posts:Customize WordPress with Semiomantics XO
Web Design Workshop 16 – Scroll over Background
Elegant WordPress by Semiomantics
Windows 7 Installation Tips
Web Design Backgrounds
By Yorgo Nestoridis
Contents
[ hide ]
1 Web Design Workshop 17 – Resizing Large Background Image
1.1 Large Background Image Marble Stadium
1.2 Edit the image in Gimp or Photoshop
1.3 Apply the Background to the Site
1.4 Ycademy Web Design Workshop
Web Design Workshop 17 – Resizing Large Background Image
Web Design Workshop 17 follows Workshop 16 where we discussed [...]
By Yorgo Nestoridis
Contents
[ hide ]
1 How to let your Content Scroll over the Background
1.1 Background CSS
1.2 CSS Background Properties
1.3 Background Attachment
1.4 CSS Fixed Background Example with Semiomantics XO
1.5 Web Design Workshop by Ycademy
How to let your Content Scroll over the Background
Scr5olling over a background image may save resources, namely if you use a [...]
Blockquote and Code
On WordPress powered web sites Blockquote and Code tags can help to edit posts in a more attractive and differentiated way. By Semiomantics XO styles the blockquote as a “pullquote”; the difference between block and pullquote is that text wraps around pullquotes, while blockquotes keep empty space left or right of the blockquote.
What [...]
by Yorgo Nestoridis
Contents
[ hide ]
1 Web Design Title Fonts
1.1 Title Fonts
1.2 Flash Fonts
1.3 Installation
1.4 Get Title Fonts
1.5 Title Fonts Configuration
1.6 CSS Customization
1.7 My Title Fonts – the Result
Web Design Title Fonts
Title fonts, namely on your home page can completely change the look and feel of your site. One of the ways to get [...]
by Yorgo Nestoridis
Contents
[ hide ]
1 Web Design Colors
1.1 Web Design Colors and CSS
1.2 What are Color Keywords
1.3 Numerical Color Values
1.4 Opacity – RGBA Values
1.5 More about this Topic
Web Design Colors
Colors are an important element to improve Web Design. To use colors efficiently it it recommended to get familiar with Color Charts and the [...]
by Yorgo Nestoridis
Contents
[ hide ]
1 Web Design Backgrounds
1.1 Body Backgrounds
1.2 Content Backgrounds
1.3 Web Design and Backgrounds
1.4 Background Web Design
1.5 How to design good backgrounds
1.6 How to use Images as Body Background
2 Background CSS
2.1 Background
2.2 Background Color
2.3 Background Image
2.4 Background Position
2.5 Background Repeat
2.6 Background Attachment
2.7 More about this Topic
Web Design Backgrounds
Web Site Backgrounds are [...]
by Yorgo Nestoridis
Contents
[ hide ]
1 What is CSS
1.1 CSS and HTML
1.2 How to start creating a Style Sheet
1.3 Example
1.4 Write your Style Sheet
1.5 How to create a separate style-sheet file
1.6 More about this Topic
What is CSS
CSS or Cascading Style Sheets are declarations which allow to define the look and feel of a website. [...]
by Yorgo Nestoridis
Contents
[ hide ]
1 Web Design Workshop 12 Blockquote
1.1 Pullquote Example 1
1.2 Pullquote Example 2
1.3 Pullquote Example 3
1.4 Pullquote Example 4
1.5 Pullquote Example 5
1.6 More about this Topic
Web Design Workshop 12 Blockquote
A special set up allows you to use blockquotes as PullQuotes in Semiomantics XO without Java Script. This is a nice [...]
by Yorgo Nestoridis
Contents
[ hide ]
1 Web Design Workshop 11 Background
1.1 The Background
1.2 The Image
1.3 The Background Image Fading
1.4 The Background Style
1.5 More about this Topic
Web Design Workshop 11 Background
Now that we have formatted about all the content of our page, let’s add a background. The Style-sheet allows for adding a background color and [...]
by Yorgo Nestoridis
Contents
[ hide ]
1 Web Design Workshop 10 Content Fonts
1.1 Post Content
1.2 1. Post Title
1.3 2. The Date
1.4 2a The Author
1.5 3. The Subtitle (commercial release only)
1.6 4. Post Subtitle h2
1.7 5. Post Content Font
1.8 6. Additional Meta Information (commercial release only)
1.9 More about this Topic
Web Design Workshop 10 Content Fonts
Our Content [...]
by Yorgo Nestoridis
Contents
[ hide ]
1 Web Design Workshop 9 Left Content
1.1 The Content Style – default style-sheet
1.2 The Desired Result
1.3 More about this Topic
Web Design Workshop 9 Left Content
Let’s look at our main content area where our posts and page content will be on display. There are quite a number of items to [...]
by Yorgo Nestoridis
Contents
[ hide ]
1 Web Design Workshop 8 Footer
1.1 The Semiomantics XO Footer
1.2 Footer Text Formatting
1.3 More about this Topic
Web Design Workshop 8 Footer
The footer of a WordPress based site can have many more functions than just to serve as the sport for copyright notices. It’s a place where widgets can add [...]
by Yorgo Nestoridis
Contents
[ hide ]
1 Web Design Workshop 7 Sidebar
1.1 Semiomantics XO Sidebar
1.2 The Sidebar
1.3 The second Sidebar
1.4 Sidebar Fonts
1.5 Sidebar Widgets
1.6 More about this Topic
Web Design Workshop 7 Sidebar
Editing the sidebar style will depend on the content and purpose of the bar. If the sidebar serves mainly to display ads, then the [...]
February 8, 2012
0