Sorry guys, I've been busy preparing my site to go live. It is up now and done: www.thirdeyemag.com
Anywho, I will address your questions. Code for footer links. Easy:
Add the following to your footer.php file:
<ul>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>
This will create an unordered list of all your pages. Now some of my links link to category pages, so this is my full code.
<ul>
<li><a href="<?php bloginfo('url'); ?>">home</a></li>
<li><a href="<?php bloginfo('url'); ?>/category/reviews/">reviews</a></li>
<li><a href="<?php bloginfo('url'); ?>/category/interviews/">interviews</a></li>
<li><a href="<?php bloginfo('url'); ?>/category/gallery/">gallery</a></li>
<li><a href="<?php bloginfo('url'); ?>/category/literature/">literature</a></li>
<?php
wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>
The blog info command just gets your blog's URL and you can put whatever after it. The list pages lists your pages as list items.
Now, if you just leave it like that it will list vertically. So here is the CSS code I have forcing it into a horizontal list with lines on the outside.
.custom #footer li {
display: inline; margin: 0 0.4em; padding: 0 0.4em;
font-size: 1.1em; text-transform: uppercase;
border-right: 1px solid #fff; border-left: 1px solid #fff;
}
Obviously match your font choices and such to the rest of the site. Display inline is really the only important one. I am creating vertical lines with borders. Just for sake of ease I did one on each side. Another idea would be to do it like on my other site (www.thirdeyepublications.com). On that site I only render the left border and on the first link I add <li class="first"> and create another block of css code to set it's left border to 0.. Follow?
As far as using a background image for the sidebar headings... It's a lot easier than I thought it'd be. Obviously make an image that's as wide as the sidebar and as tall as you want it.
.custom li.widget h2, li.linkcat h2, ul.sponsors h2 {
font-weight: bold; font-size: 1.077em; color: #fff;
text-transform: uppercase; letter-spacing: normal;
margin: 0 0 0.8em 0; padding: 0.4em 0 0.4em 4px;
border-top: 0px solid #000;
background: url('/images/block.gif') 0 100% no-repeat;
}
The important thing here is this class, which you'll find in the styles css sheet under "sidebar styles" and then can copy into your custom.css sheet (be sure to make sure your custom.css sheet is dragged out of the custom folder and into the main cutline folder or the link to it won't work. Or alter the code in your header file. There are further instructions inside that file from Chris).
You can ignore the sponsors thing. That corresponds to some custom thing I added to the left sidebar.php file to create a spot to put ads.
It comes styled to have a solid border on the top, and used a background image of a dot to create a dotted border on a bottom. So just change the background URL to the image you've uploaded. (block.gif in my case) Then just set the border width to 0px (unless you want one still). Now you've got a background image. Obviously I changed the text color to white as well so it'd show up. I also probably tinkered with the padding to bump the text in from the edge of my image. Adjust accordingly and enjoy. Oh yeah, make sure you change it to no-repeat unless you want it to of course.
Let me know if anyone has more questions. And some advice as you're pursuing CSS mods. I didn't know CSS at all less than a year ago. It's really easy, and the best way to get help is to visit the W3C's free tutorials: http://www.w3schools.com/css/default.asp
Also, if you use firefox, download the firebug add on. This will help you enormously as once it's installed you can click inspect and hover over different elements on your site. It will bring up both the HTML and the CSS code that corresponds to that element so you can easily see where on your style sheet you have to modify. This is essential when messing with code you didn't program yourself, unless you want to spend hours tinkering around and constantly refreshing your page to see the effects. (Which is what I did until discovering firebug. THANK YOU FIREBUG!)
https://addons.mozilla.org/en-US/firefox/addon/1843
If you don't use firefox. Switch. It's the best browser out there and it's free.
One more excellent resource you all should read before going any further. Talks all about lists with CSS: http://www.alistapart.com/articles/taminglists/
In fact, bookmark a list apart. It is another excellent resource for a million things CSS and then some.