Transparent WordPress Theme Design

October 4, 2009
By

Trans­par­ent Word­Press with Semi­oman­tics XO

Devel­op­ing a trans­par­ent Word­Press Based Photo Blog, I got inspired to use some ele­ments in a Grunge envi­ron­ment. It’s cre­ative, it’s fun, it’s the Semi­oman­tics XO Theme for WordPress.

Grunge Back­ground

The first step is to cre­ate a grunge background:

Grunge Background for WP

Grunge Back­ground for WP

This back­ground is 1680 x 1250 pix­els big and has a weight of 130 kb only.

Trans­par­ent Header Footer and Con­tent Backgrounds

Step 2: make your back­grounds trans­par­ent and set opac­ity to 70 %.


Transparent 80% WordPress

Fancy Fonts

Add some fancy fonts for h1 and h2 using the Font­burner plugin.

Fancy Fonts for h1 and h2

Fancy Fonts for h1 and h2

Back­ground Opac­ity and Hover Function

It is not easy to read con­tent on col­ored back­grounds, there­fore we add a hover func­tion to show white back­grounds on left con­tent and sidebar.


Transparent WordPress Hover Main Content


Transparent WordPress Hover Sidebar

Save load by Scrolling over the Background

No ver­ti­cal tiling is needed, also on long blog posts when the con­tent scrolls over the back­ground. We fix the back­ground attach­ment (back­ground image).


Transparent WordPress Scroll over Background

Header Trans­parency and Site Title

To get the header effect I have loaded a trans­par­ent header png with no con­tent and added a top mar­gin to adjust the posi­tion of the content.

The blog title is painted on the back­ground with posi­tion top left to allow dis­play on any mon­i­tor irre­spec­tive of res­o­lu­tion and size.

Trans­parency Variations

Your cre­ativ­ity is the limit. You could cre­ate an over­lay look by adding a black back­ground with 80% opacity:


Transparent Overlay Look

Transparent Overlay Hover

Trans­par­ent Over­lay Hover

Try and enjoy!

Transparent WordPress Hover Sidebar
Transparent WordPress Scroll over Background
Transparent WordPress
Transparent WordPress Hover Main Content
Transparent 80% WordPress
Transparent Overlay Look

Incom­ing search terms:

Related posts:

  1. Trans­par­ent Word­Press Semi­oman­tics XO
  2. Design Brand­ing
  3. Yorgo Nestoridis Design Brand Header
  4. Block­quote, Pul­lquote and Code
  5. Fancy Fonts Headers

Tags: , , , , , , , , , , , , , , , , , , ,

This entry was posted on October 4, 2009 at 1:22 pm and is filed under Design, Semiomantics, Web Design, WordPress. You can follow any responses to this entry through the RSS 2.0 feed.

7 Responses to Transparent WordPress Theme Design

  1. sohbet on February 1, 2012 at 8:03 am

    hmm, very good.
    :))

    Reply
  2. Google Top 10 with Flash Fonts on December 16, 2011 at 2:22 pm

    […] 16 – Scroll over Back­ground­How to let your Con­tent Scroll over the Back­ground Scr5olli…Transparent Word­Press Theme Design­Trans­par­ent Word­Press with Semi­oman­tics XO Devel­op­ing a […]

  3. Simple Sprites Menu | News on January 29, 2011 at 10:16 pm

    […] Trans­par­ent Word­Press Theme Design […]

  4. mytrix on November 21, 2010 at 2:57 pm

    Hi Yorgo,

    is the theme avail­able as a down­load? I really would like to use it with my wordpressblog!

    Please con­tact me.

    Greet­ings,
    Mytrix

    Reply
  5. Ceguna Social Network | Blog | How to Customize WordPress 2 on November 4, 2010 at 7:37 pm

    […] Trans­par­ent Word­Press Theme Design […]

  6. How to Customize WordPress 2 | Friends on October 24, 2010 at 1:43 am

    […] Trans­par­ent Word­Press Theme Design […]

  7. Photoshop Borders Ycademy | Home Business on February 1, 2010 at 11:48 pm

    […] Trans­par­ent Word­Press Theme Design Trans­par­ent Word­Press with Semi­oman­tics XO Devel­op­ing a tran… […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*