kubrick theme

hello anyone?

Look in /wp-content/themes/default/style.css for:

“Special stylized non-IE bullets”

In that section is something like “0BB 020” which are the characters to use as a bullet.

Using images for bullets isn’t well supported in CSS (no way to position them) and, as the stylesheet says, none of this works in Internet Explorer.

but i used to use another theme that uses images for bullets.

i couldnt find the line “Special stylized non-IE bullets” but i found this
“.entry ul li:before, #sidebar ul ul li:before {
content: “0BB 020”;
}”
which is probably the most similar to what you said.
so any suggestions how i can replace or actually find out what does the 00BB and 0020 mean?

If you remove that line the list will display the standard bullet. For a good primer on managing lists, see this article on A List Apart: Taming Lists.

thats a very good site regarding what im looking for.
so i cant use a image as a bullet with this replacement?

.entry ul li:before, #sidebar ul ul li:before {
content: “<img src=”https://site/wp/wp-content/themes/default/images/bullet01.gif”&gt; 020″;
}

Well, the syntax is a little different. I found an article on Listamatic that shows how: Using CSS background images for bullets. It’s a very simple application, but it seems to be little-known.

so i just replace the content: /00BB /0020 with this
padding-left: 10px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
??

Well, you don’t have to use the before pseudo element at all; background-image will do the trick by itself. I would take out the first three elements altogether and rewrite them to your liking.

html>body .entry ul { }
html>body .entry li { }
.entry ul li:before, #sidebar ul ul li:before { }

They are CSS2 and only work properly (if at all) in the few browsers that currently support the new rules. You can still set the class entry using CSS1, though:

.entry ul { }
.entry li { }
.entry ul li { }

…and put in between the brackets your selectors. You’ll probably end up keeping most of the margins and padding the same, but on the third element you’ll put the data similar to the way Listamatic did:

background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;

Make sense?

sorry but im quite slow in absorbing..
but how do i actually go about replacing the contents of
“.entry ul li:before, #sidebar ul ul li:before ” ?

can u like tell me the entire code?

:o) Sorry! I should have been more descriptive. I would just remove the html>body from html>body .entry ul and html>body .entry li and leave the part between the brackets for those two alone.

Then, for .entry ul li:before, #sidebar ul ul li:before, just take out the :before part, leaving .entry ul li, #sidebar ul ul li. Then replace what’s between the brackets with something like this:

background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;

Of course, you’ll have to change the URL to point to your image. And you may have to mess with it a little to get it to display like you want it. Hope this helps!

thanks for ur help.
i’ve bookmarked the 2 alist site for future reference :p