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

Training

Audio test.

Test

Read more..

• Using Twitter
• Where is the money?
• Web graphics for beginners 2
• Internet Advertising with YORGOO Booster
• Make Money with Your YORGOO
• Online Business Building Seminar
• YORGOOblaster content distribution
• Yorgo Nestoridis, Happy Birthday
• Campaigns and Strategies
• Free Website Promotion 2

Daily Online Training Calls

For many years YORGOO-Ycademy have provided daily online training calls for it customers via an online conferencing system.  All that is required of the participants is preferably a  headset or speakers  and an internet connection. The calls are live and connect online business builders from around the world.

All training calls are led by Yorgo Nestoridis and supported by Bianca Gubalke,  trainers and leaders who are successful online Business Builders themselves.

Live Daily Online Training Calls at yorgotalk.com

Business Training Topics

 All daily online training calls are online business related.  Calls are targeted to a specifc topic and theme related.  The trainings are high profile and include the latest up to date information on a wide variety of subjects. The trainings often include a hands-on workshop and material. Friday calls are very much webmaster related and hands-on. 

Calls are free to any YORGOO or Ycademy member.

Read more..

• NewsCast Script by YORGOO
• Yorgo Nestoridis, Happy Birthday
• Creating images for YORGOOpress2
• Creating images for YORGOOpress
• Creating rotating headers with YORGOOpress
• Creating free website traffic
• YORGOO builds free website traffic
• How to promote your business with YORGOO
• Small Business Ideas Branding 2
• Wordpress for Authors Seminar

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.

The site header is an important branding element. Logo, font and colors, eventually other visual elements are used to build a positive, recognizable image.

Yorgo Nestoridis Brand

A name can be a brand and if Yorgo Nestoridis wants to be a brand label, then that brand needs to be defined. What is Yorgo Nestoridis? It’s a person, a story, a product, a way to do things, a mission, a quality or an identification tag for all the aforesaid.

In this case, Yorgo Nestoridis stands for the human element behind product labels such as Semiomantics, YORGOO or related products.

Yorgo Nestoridis Logo

The brand elements are a logo in form of a picture or it’s derivatives:

Yorgo Nestoridis

Yorgo Nestoridis Brand Logo

[Show as slideshow]

Yorgo Nestoridis Font

The handwriting font is Dali for the signature and eventual other use at least for the time being; an original font is under construction.

Yorgo Nestoridis Color Scheme

Basically the web site color scheme is white to black with gray shades in between. Color accents are set with red #B30000 or blue #0000b3, black color can be replaced by black-blue #000125.

Yorgo Nestoridis black-blue color and red #b30000

The example for the Design web site does not use the Dali font as another handwriting font has been used for the site name (Art Decor).The name “by Yorgo Nestoridis” is in Tall Film.

Other schemes namely used for some products are the black-beige theme as seen here:

Yorgo Nestoridis black-beige color scheme

Beige color is #DECFAB.

This header can be created easily with simple means using GIMP, Photoshop or even Web Graphics Creator.

Header Graphics give a first visual impression to your Website or Blog … and we know that ‘first impressions’ count.

Design Brand Header

When doing a research on Google under the keyword “Header Graphics” you can find a wealth of free stuff to choose from and to download, however, if you are serious about developing your own unique ‘look’ and branding yourself, you have to create your own image – an image reflecting the value and trustworthiness you bring to your clients or partners and that you want to stand for in the market. Here anything ‘free’ becomes ‘cheap’ . . . and this is definitely too expensive when working with a longterm vision.

What you need is a Design Brand Header to build your Authority either as a professional in any area of expertise… or with the Service or Product you offer and promote in the online market place.

Header Colors

Header Colors are most important when creating a Design Brand Header and should remain within your chosen colour scheme.

Header fonts are very important too, however, you may divert and go a little bit wild in an artistic way when creating this specific image or picture… depending on your theme of course. However, as Grunge is in… the doors for creativity and imagination are wide open . . . no boredom guaranteed!

For my new Design Blog I experimented with Grunge Fonts while keeping to the colour scheme I already used in the early eighties for my books, posters and book covers: black on white with some grey shades and a small yet powerful dosage or red! The real fiery red that is!

Header Graphics

Header Graphics can be very simple, using just a good friendly picture with the name on white – which gives a feeling of space… or you integrate your logo and/or play in a decorative way with your title and  subtitle either on white or on a plain or degrade background in any color matching your color scheme. Alternatively, create a picture in Photoshop or any other Graphic program of your choice.

In my case, I used a detail of one of the photos I shot on Noordhoek Beach and played with color adjustments and filters in Photoshop for a result that is attractive, within my color scheme and that serves as a perfect background for that red Grunge font. Contrary to what might be believed… Grunge doesn’t equal Grunge! To get well balanced Header Graphics using vibrant backgrounds plus Grunge Fonts needs quite some research until there’s that tension that ‘fits’! A more classical font is much easier – but not as original. So it’s always a matter of personal taste and personal choices.

Most importantly, experiment and play – it’s the only way to get to grips with for instance filters and color adjustments. You cannot learn to meditate; you’ve got to do it to understand the process and get ‘into’ it. No other way – same here.

Although there’s a lot we can teach you as to some basics… from where you either continue, grow and enjoy – or get the idea and know how to brief a professional graphic designer in case you outsource.  It saves you money and time and you get a better result faster – guaranteed!

Join our WebMasterTraining today, Friday, at 8 pm London time, to learn how to create your own Header Graphic for your Design Sandbox Blog!

Design Graphic Background

While I prefer to keep my backgrounds white, I have added a background to this site for the purpose of the Web design Workshop.

The Background needs to be in harmony with the color scheme which is based on black-blue #000125 and red #B3000.

Background based on an image

This is what I did:

1. Take a photo and transform it to gray scale.

2. Work it to establish a pattern:

Background pattern

3. Make a tile out of it so that the borders match:

Background Tile

4. Add a Color overlay in Blue #000125 with 45% opacity.

Black-blue Tile

5. Insert to your site using the style sheet:

Design Background

Having written a post about branding Small Business Ideas I noticed that when the post was published the blockquote was hugging the visual presentation as you see from the image below.

Small Business Ideas branding

Blockquote , pullquote

As you can see from the above blockquote that is used to illustrate the codes used, it totally hugs the graphic. This error can be easily rectified by just correcting the margin of the blockquote in the stylesheet.

By changing:

This:margin: 0 0 0 30px;
to this: margin: 0 0 30px 30px;

we create a margin of 30px below the blockquote, thus seperating the blockquote from the image. Visually, this is more acceptable as you can see from the result below.

Small Business Ideas branding