I’ve finally gotten around to posting another free theme! This one is a theme I just did for someone, so it’s WP 3.0 compliant. The image below is a screen shot of the working theme, and has the following features:

• Two Column Design
• One Column Page Template also included as a check box option for each page.
• Sidebars include right sidebar, top sidebar, bottom sidebar, and dynamically widgetized footer
• Valid XTML
• Horizontal Menu (works great with new customizable menu found in WP)
• Vertical Menu also available if desired within the theme
• Built in Social Icons
• Built in div for Header Logo or Graphic

Let me show you what you’ll need to know in order to download this theme and edit the Header and personalize your social icons.

First, let’s cover how to access this theme.

• Click here or on the image below to download this theme.
• Choose “Save File” when the option appears.
• Unzip the folder so you can edit the contents as desired, or you can upload the zipped folder directly to your site if desired. I recommend unzipping it first, so you can do your editing before it’s uploaded.

Secondly, let’s talk about editing the Header.

• HUGE NOTE: If you copy code from this site, always make sure to put it into Notepad or another text editor first. Do not copy and paste directly from this blog or your code will not appear correctly. The quotation marks often are messed up when you do that.
• Within the folder you’ve downloaded, you’ll notice a folder that says Templates. Open this folder and then open up the Page.php file in Notepad or another text editor.
• Not far from the top, you’ll see the following code:
  <divonclick=”location.href=”;” title=”Home” style=”cursor: pointer”;></div>
• This first line is where your header logo or image will go. Just make sure to place the url to your site within the single quotation marks (like this: “location.href=’http://yoursite.com’;”) so that your image will be a click-able button back to your home page (or whatever other link you want it to go to).
• Just below that line, you’ll see four almost identical lines for your social icons. Again, just add the appropriate urls for your own social sites. If there is one you don’t use, just delete it.
• Save and close this file.

Adding your Header Image or Logo

• Now it’s time to add your graphic. First save the image you want to use to the Images folder in the theme you downloaded.
• Next, using a text editor open up the CSS file and find the following code:
  div.art-header-png
  {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 266px;
  height: 118px;
  background-image: url(‘images/logo.png’);
  background-repeat: no-repeat;
  background-position: center center;
  }
• You can change the dimensions to match your image, as well as the placement of the image in the header. Most importantly, make sure to change the background-image url to match your image name. For example, if you saved your image as Mylogo.jpg, then your code for the background image should look like background-image: url(‘images/Mylogo.jpg’);
• Once you are done editing, save the file and you are ready to upload it to your site!

If you don’t want to use an image, but simply the logo text, delete that png, and scroll down a little more in the CSS to find the logo styling code. You can change the font size, color, and placement to be put exactly where you want it. It is very small and blends into the header background right now.

Enjoy, and please let me know if you have any comments, questions, or concerns!

© 2010 – 2011, Sarah Roberts – Reflecting the Designer. All rights reserved.