Transparent WordPress with Semiomantics XO

Developing a transparent WordPress Based Photo Blog, I got inspired to use some elements in a Grunge environment. It’s creative, it’s fun, it’s the Semiomantics XO Theme for WordPress.

Grunge Background

The first step is to create a grunge background:

Grunge Background for WP

This background is 1680 x 1250 pixels big and has a weight of 130 kb only.

Transparent Header Footer and Content Backgrounds

Step 2: make your backgrounds transparent and set opacity to 70 %.

Fancy Fonts

Add some fancy fonts for h1 and h2 using the Fontburner plugin.

Fancy Fonts for h1 and h2

Background Opacity and Hover Function

It is not easy to read content on colored backgrounds, therefore we add a hover function to show white backgrounds on left content and sidebar.

Save load by Scrolling over the Background

No vertical tiling is needed, also on long blog posts when the content scrolls over the background. We fix the background attachment (background image).

Header Transparency and Site Title

To get the header effect I have loaded a transparent header png with no content and added a top margin to adjust the position of the content.

The blog title is painted on the background with position top left to allow display on any monitor irrespective of resolution and size.

Transparency Variations

Your creativity is the limit. You could create an overlay look by adding a black background with 80% opacity:

Transparent Overlay Hover

Try and enjoy!

More about this Topic

• Blockquote, Pullquote and Code
• Yorgo Nestoridis Design Brand Header
• Fancy Fonts Headers
• Design Branding
• Design Graphic Background

Transparent WordPress with Semiomantics XO

Developing a transparent WordPress Based Photo Blog, I got inspired to use some elements in a Grunge environment. It’s creative, it’s fun, it’s the Semiomantics XO Theme for WordPress.

Grunge Background

The first step is to create a grunge background:

Grunge Background for WP

This background is 1680 x 1250 pixels big and has a weight of 130 kb only.

Transparent Header Footer and Content Backgrounds

Step 2: make your backgrounds transparent and set opacity to 70 %.

Fancy Fonts

Add some fancy fonts for h1 and h2 using the Fontburner plugin.

Background Opacity and Hover Function

It is not easy to read content on colored backgrounds, therefore we add a hover function to show white backgrounds on left content and sidebar.

Save load by Scrolling over the Background

No vertical tiling is needed, also on long blog posts when the content scrolls over the background. We fix the background attachment (background image).

Header Transparency and Site Title

To get the header effect I have loaded a transparent header png with no content and added a top margin to adjust the position of the content.

The blog title is painted on the background with position top left to allow display on any monitor irrespective of resolution and size.

Transparency Variations

Your creativity is the  limit. You could create an overlay look by adding a black background with 80% opacity:

Try and enjoy!

More about this Topic

• Transparent WordPress Semiomantics XO
• Transparent WordPress Theme Design
• Blockquote, Pullquote and Code
• Fancy Fonts Headers
• Yorgo Nestoridis Design Brand Header

To give some ideas for fancy fonts headers I have prepared some files you may download and use as the case may be. They consist of a 1024 x 200 pixels Photoshop file (which can be edited in GIMP as well). Please download and install the fonts before editing.

1. Fancy Header Fonts

Some Fancy Fonts including Cats Alphabet, Zebra, Lost World, Amadeus, download HERE.

Unzip and place the .ttf files in Windows/Fonts on your main hard drive (C usually).

Fancy Header Fonts

2. Samples of Fancy Font Headers

Some applications with the above fonts.

[Show as slideshow]

3. Ute Schaedler Special Fitness Font

I have the sneaky suspicion that these fonts, at least some letters could also interest Gene Line .

4.  Download Photoshop Header Files

The PSD files can be downloaded from HERE.

Unzip and open with Photoshop or GIMP.