Need help with Categories

Hey Hussain,

This really isn’t so hard to do, but this can also depend on if you have a static background image, or if you’re trying to use two background images so it can be bumped up in size if the text size is increased.

Here’s what I’d do to start:

In your sidebar.php file change the <ul> opening tag under <h3>Categories</h3>to <ul id="cat_list"> or similar.

This will help in targeting the top level navigation items using CSS without harming the top level items in your Main Menu, Most Viewed, etc.

Then you’ll use CSS to do something like this:

#sidebar ul#cat_list li {background: url(images/myMenuBackground.gif) no-repeat left;}
#sidebar ul#cat_list li li {background-image: none;}

Thanks, but i did that and nothing happen:

<ul id=”cat_list”>
<?php wp_list_categories(‘title_li’); ?>

and i put this into style.css :

#sidebar ul#cat_list li {color:red;}
#sidebar ul#cat_list li li {color:red;}

but nothing happen??

Please help

Hey Hussain,

I’m not seeing that you added the id=cat_list” when I view source on your page, I see:

<h3>Nasheed Categories</h3>
<ul>
<li class="cat-item cat-item-95"><a . . .

Once you make the change to your sidebar.php file and overwrite the existing sidebar.php file in your theme on the server, it will look like:

<h3>Nasheed Categories</h3>
<ul id="cat_list">
<li class="cat-item cat-item-95"><a . . .

Then, you’ll also need to upload the image you’d like to use as the background for the top-level menu items into your theme/<whateveryourthemeisnamed>/images directory and let us know what the image name is.

Make sense?

Hello, I did the same as you say, i add this :

<h3>Nasheed Categories</h3>
<ul id="cat_list">

but still the same problem, i am using the wordpress default widget for categories, when i disable that widget then it words 100%, I mean this works

<h3>Nasheed Categories</h3>
<ul id="cat_list">

but when i enable that widget then it shows the same problem:

<h3>Nasheed Categories</h3>
<ul>

anyway thanks alot for your quick replies

thnx again

try using class instead of id

style.css

#sidebar ul.cat_list li {color:red;}
#sidebar ul.cat_list li li {color:red;}

sidebar.php
<h3>Categories</h3> <ul class="cat_list">

sorry, same problem

hmn you’re using the widget right? anywoos try this:

#sidebar ul li {
background: url(image url here) top no-repeat;
border-bottom:1px solid #DAEBA3;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:7px 10px;
}

make sure the size of the image fits the categories arabic nasheed, english nasheed etc.

It is set to “top no-repeat” because we want that image to always be on the top of the #sidebar ul li block and does not repeat to the rest of the #sidebar ul li ul block

hmn..that’s all I can think off from the source code of your blog..if the text does not appear centered..play with the padding and margin ^^

hope this solves it..

Hi Hussain,

Okay, so forget about adding a class or ID (both should work, though, if you can add them to the widget).

Here’s an easier way using attribute selectors in CSS:

#sidebar ul li[class~="cat-item"] a {
background:url(image url here) top no-repeat;
}

#sidebar ul li[class~="cat-item"] li a {
background:none;
}

If you upload the image as I suggested above and let us know the name, I’m sure we can help implement if you get stuck.

thnx, its done, thank you SewMyHeadon