• Locked
4 replies [Last post]
Wed, 2009-09-16 00:59
astrocas
astrocas's picture
Offline
Last seen: 3 years 35 weeks ago
newbie
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.

Top
Tags:
Wed, 2009-09-16 14:33
#1
harrierdh
Offline
Last seen: 3 years 22 weeks ago
Enthusiast
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.

Top
Thu, 2009-09-17 00:15
#2
astrocas
astrocas's picture
Offline
Last seen: 3 years 35 weeks ago
newbie
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.

Top
Thu, 2009-09-17 14:26
#3
harrierdh
Offline
Last seen: 3 years 22 weeks ago
Enthusiast
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

Top
Fri, 2009-09-18 11:27
#4
Tyssen
Tyssen's picture
Offline
Last seen: 2 weeks 6 days ago
Moderator
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

Top
  • Locked