4 replies [Last post]
astrocas
astrocas's picture
Offline
newbie
Last seen: 4 years 50 weeks ago
Timezone: GMT+11
Joined: 2009-03-13
Posts: 9
Points: 0

Hi All,

I've been playing around with a WP theme I downloaded, and I've run into a small problem (I'm sure it's probably blatantly obvious).

I just want to change the look of my sidebar a little.

Currently, it looks like this,

Using this nifty sombrero my friend made,

I want it to look like this!

I ignorantly thought I could just drop the image in, because it was the same dimensions as the boxes. I've tried a few things so far, and can't really get it to work.

Here are the areas of the code I'm sure I have to edit...

sidebar.php

<?php the_subpages() ?>
 
		<div class="link_updates">
 
			<div class="lbl">Categories</div>
 
			<?php
				global $wpdb;
				$cats = get_categories();
 
				$salida = "";
 
				foreach ($cats as $cat) {
				$salida .= '<a href="'.get_category_link($cat->term_id).'" 
 
title="'.wp_specialchars($cat->name).'"><span>'.wp_specialchars($cat->name).'</span></a>';	
				}
			echo $salida;
			?>
			<div class="clearer"><span></span></div>
 
		</div>

style.css

.left {
	float: left;
}
.right {
	float: right;
}
.clearer {
	clear: both;
	font-size: 0;
	line-height: 0;
	display: block;
}
 
.header,.link_projects,.lbl,.link_updates a {
	border-bottom: 6px solid #FFF;
}
div.link_projects a:hover,div.link_updates a:hover, .content a:hover, div.footer div.left a:hover {
	background: #f27405;
	color: #FFF;
}
 
div.link_subpages {background: #222 url(img/grdnt_gray.gif) repeat-x;}
div.link_subpages li {list-style: none; border-bottom: 5px solid #FFF;}
div.link_subpages a {
	display: block;
	padding: 15px 5%;
	width: 90%;
	font-weight: bold;
}
div.link_subpages a:hover {
	background: #D7162C;
	color: #FFF;
}

If someone could help me shed some light on the matter, I would be ecstatic!

Regards.

harrierdh
Offline
Enthusiast
Colorado
Last seen: 4 years 37 weeks ago
Colorado
Timezone: GMT-7
Joined: 2009-07-30
Posts: 83
Points: 20

I looked

I looked at your post. First of all you should post html and css or a link to the page not php. Secondly there is not enough information here. It is hard to debug an issue without seeing all the code.

astrocas
astrocas's picture
Offline
newbie
Last seen: 4 years 50 weeks ago
Timezone: GMT+11
Joined: 2009-03-13
Posts: 9
Points: 0

My bad! Click here for

My bad! Click here for site!

Thanks for feedback thus far.

harrierdh
Offline
Enthusiast
Colorado
Last seen: 4 years 37 weeks ago
Colorado
Timezone: GMT-7
Joined: 2009-07-30
Posts: 83
Points: 20

Try this

.link_updates a {
background: url(http://ftpwtf.au.com/site2/spin.gif);
}

or this...

Archives

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 year 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

harrierdh

harrierdh wrote:

.link_updates a {
background: url(http://ftpwtf.au.com/site2/spin.gif);
}

Needs a bit more than that:

.link_updates a {
display:block;
height: XXpx;
line-height: XXpx; /* same as height to centre the text vertically */
background: url(<a href="http://ftpwtf.au.com/site2/spin.gif" rel="nofollow">http://ftpwtf.au.com/site2/spin.gif</a>) 100% 0 no-repeat;
}

Actually, just realised the image is the full width of the link; it doesn't need to be. The dark background colour can be set with CSS.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference