If you are using WordPress and the Cutline theme, here is how I made a few simple changes. I added a border around the whole page, widened the page to 900px, and changed the background of the page and content. Naturally there are many way of doing the same thing. If you have a better way, please let me know.
Widen from 770px to 900px
There are several places that hold width information. You have to change them all or some parts won’t look right. First make a copy of every file that you will modify. Basically you are looking for 770px and replacing it with 900px in the following sections of your style.css file.
#container
#content_box
#footer
#masthead
#masthead a
#header_img
ul#nav
You’ll also need to change the width from 770 to 900 in the header.php file.
Fix Spacing
Once you’ve made the page wider, you need to adjust the spacing so everything looks evenly spaced. The spacing that I like is padding: 0px 50px 0px 30px in the #content section and padding: 10px 0px 0px 0px; in the #content_box section.
Widen the Sidebar
I prefer a wider sidebar instead of a wider content area so I made the following changes to style.css. #sidebar goes from width: 230px to 290px as well as two sections that start with ul.sidebar_list. Again you can search for 230px and replace it with 290px. The key to the spacing is make sure that it adds up to the new width. If you add up all the parts across the width of the screen it should add up to 900px in this case. 30 + 500 + 50 + 290 + 30 = 900
Add a Border to Cutline/WordPress
Make a backup copy of your style.css file. Edit style.css and make the following changes. Don’t replace what’s there, add or modify accordingly. I like the look of a border width of 4px; however, you can choose whatever width you’d like.
#container border-left: 4px solid #000; border-right: 4px solid #000; border-top: 4px solid #000;
#content_box border-left: 4px solid #000; border-right: 4px solid #000; margin-left: -4px;
#footer border-right: 4px solid #000; border-top: 1px solid #000; border-bottom: 4px solid #000; margin-left: -4px;
ul#nav border-left: 4px solid #000; border-right: 4px solid #000; border-bottom: 3px solid #000; margin-left: -4px;
#header_img border-bottom: 1px solid #000; border-left: 4px solid #000; border-right: 4px solid #000; margin-left: -4px;
Working with Backgrounds
Now that you have a border around the site, you may want different color backgrounds to make your site stand out. At the top of style.css you’ll find a line that starts with body. Change the color code for background to whatever you like. This will be the background that ends up being behind your site. After you make this change it will set the background of everything. Make the parts of your site a contrasting color. There are background tags in several sections. Once you decide on the color and have the code, make the change in the following sections of your style.css file.
ul#nav
#content_box
#header_img (I had to add width before the background setting would work. I also needed to change the margin to 0 0 0 0)
#masthead (add background after width if no graphic is used for your masthead.)
#footer
Do Away with the Text Title
If you use an image for a logo in the masthead, you’ll need to turn off the text title. I found that if you simply just delete the title from the options page, you’ll also miss the text in other locations like the footer copyright. I found two pieces of code that needed to be remarked or removed. masthead h1 section doesn’t need to be in style.css and h1…/h1 on the line that begins div id=”masthead” in header.php and wpgheader.php. I’m not sure if the div part is still needed, but I left it anyway.
Change the Green Highlight
If green isn’t your color then it is easy to change. Edit your style.css and find the line that starts ul#nav li a.current in the header styles section. Enter an new color code and you’re all set. ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover { color: #fe8733; text-decoration: underline; }
Make Gallery Menu Highlight when Current
Since there are two header files with a WPG2 integrated site, you need to make the gallery item look like the following in wpgheader.php. It will not match the code in header.php.
li> a class="current" xhref="http://janusit.com/garage/%3C?php%20bloginfo('url');%20?%3E/wp-gallery2.php" mce_href="http://janusit.com/garage/%3C?php%20bloginfo('url');%20?%3E/wp-gallery2.php">gallery
WPG2 Alignment Classes
Another problem that I fixed was the alignment of multiple images next to each other on a single line. Every time I entered the code, it would put one image on each line. I added div.one-image {display:inline;} to the bottom of the style.css and the series of images stayed on one line.
1 response so far ↓
Kerry // Apr 6, 2008 at 6:02 am
Great article, still relevant after a couple of years. Found you googling and made a couple of snazzy changes to my site. Thanks!
Leave a Comment