Hello everyone
I was hoping someone might be able to help me with a wordpress template problem I’m trying to work out. I’m redesigning my blog at the moment and I want a certain look for the category and other lists in my side bar. So far I’ve not found a way to do it but I’m sure there must be a way.
The look I’m trying to achieve is this:
But what I am getting is this:
I want the lines to be between each entry in the list and I want the bullet points to be gone.
At the moment this is the code I am using in the page...
(div class="sidebar_devider")
(?php wp_list_cats('sort_column=name&list=1&hide_empty=1&show_count=1'); ?)
(/div)
... and in my css style sheet.
.sidebar_devider {
width:180px;
height: auto;
float: left;
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color:#9db1cf;
}
Obviously this does not work because the sidebar_devider is around the code that creates the category list but I just don’t know how to get it between each entry in the list.
I’d be very grateful to anyone who can help.
but I just don’t know how to
but I just don’t know how to get it between each entry in the list.
By styling the generated list how else! Have you actually looked at the generated markup produced by this function, if you do you'll see that it provides all the classes or ID's to work from that you'll need.
Also I'm guessing you've copied that WP function from somewhere as it's been long deprecated, you mustn't use deprecated functions they are only there for legacy purposes you should use this one:
wp_list_categories()
Look it up on the WP codex as you'll find a full list of args that it will accept.
I'm not really sure how to
I'm not really sure how to style the generated list. I'm still a novice to making web design and I'm learning things as I go. Are their any examples any where I could follow? I've tried a few things suggest by other people and I've still not been able to get them to work.
This has been my latest attempt as suggested by someone else:
(ul class="categories-list"(
(?php wp_list_categories('sort_column=name&title_li=&hide_empty=1&show_count=1'); ?)
(/ul)
ul.categories-list {list-style-type: none;}
.categories-list li {border-bottom: 1px solid #ddd;}
... but nothing changed.
Use a web dev tool such as
Use a web dev tool such as Firebug to examine what rules are being applied or overridedn by others styles from elsewhere.
Failing that you are going to need to provide a link.