WordPress with SEO Basic 1.1.1 additions

I have seen some pretty neat themes and decided to look into how to get any theme with CSS to work the same way.  WordPress has several themes, but CSS makes it much easier to make a theme more unique.  This is why I like SEO Basic 1.1.1.  It has a CSS.

The words between the /* */ are comments and not part of the code.  They are there so I know what I did.

This allows you to add transparency to the page.  You will notice that you can actually see through the blog.  I will keep a copy online so that anyone can see this in action.  The location is http://aprivatebeach.com/customize.gif.  The transparency is set at 80%.  The values ranges from IE(opacity=0) or for CSS3 standard opacity:0.0 to IE(opacity=100) or for CSS3 standard opacity:1.0.  Lower value increases transparency.  The code in bold is to be added to the end of the #wrapper section in style.css.

The complete documentation can be found at http://www.w3schools.com/Css/css_image_transparency.asp.  You can try other stuff too if you really want.

Transparent Blog Page

/*added transparency*/
#wrapper {
width: 800px;
margin: 0 auto;
position: relative;
background-color: #fff;
border: 2px solid #000;
/* for IE */
filter:alpha(opacity=90);
/* CSS3 standard */
opacity:0.9;

}

What you may notice is that if you try to put a picture, when you scroll down the page.  The picture moves up and below is the original background color.  You can force the picture to stay put by adding these lines in bold in the body section of the style.css.  You will have to put a test.jpg picture in the images directory of the SEO 1.1.1 folder.

The background property documentation can be found at http://www.w3schools.com/css/css_background.asp

The actual code and what it will look like can be found at http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment

Fixed background picture

/* Optimized for 1024×768 screen resolutions. For larger screens, background-color will be shown around the picture. */
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 10pt;
background-color: #87CEEB;
background-image:
url(‘images/test.jpg’);

background-repeat:
no-repeat;
background-attachment:
fixed;

background position:center center;
}

What it looks like.  If you are going to cut and paste the above code, you may have some problems.  For some reason WordPress may convert the ‘ into something funny.  Therefore, delete the url(‘images/test.jpg’); and type it in again. Mine looked like url(tmimages/test.jpgtm);

For further information, you can read this post at http://aprivatebeach.com/blog/2008/11/wordpress-263-bugs/. For more information on monitor resolutions used, you can visit http://marketshare.hitslink.com/report.aspx?qprid=17

In the end, the background is nice, but the transparency is not. I find it hard to read, but if you want to try it, you can do as you please on your blog.  Furthermore, I find that if you use a theme with cascading style sheets (CSS), you can pretty much customize it however you like.  The only things that seem to be issues are the headings allowed and menu item location.  These will be difficult to change without modifying the actual code.

Leave a Reply