WordPress.org

Ready to get started?Download WordPress

Forums

kubrick theme (13 posts)

  1. RealiX
    Member
    Posted 8 years ago #

    im using the kubrick default theme but i'd like to make a abit of changes to the template, minor ones.
    there's this 'ยป' to every link at the side bar, i was wondering how i can change this to some other characters or even change to small bullet images.
    can anyone help me?

  2. RealiX
    Member
    Posted 8 years ago #

    hello anyone?

  3. jrawle
    Member
    Posted 8 years ago #

    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.

  4. RealiX
    Member
    Posted 8 years ago #

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

  5. RealiX
    Member
    Posted 8 years ago #

    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?

  6. Jonathan Landrum
    Member
    Posted 8 years ago #

    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.

  7. RealiX
    Member
    Posted 8 years ago #

    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="http://site/wp/wp-content/themes/default/images/bullet01.gif"> 020";
    }

  8. Jonathan Landrum
    Member
    Posted 8 years ago #

    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.

  9. RealiX
    Member
    Posted 8 years ago #

    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;
    ??

  10. Jonathan Landrum
    Member
    Posted 8 years ago #

    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?

  11. RealiX
    Member
    Posted 8 years ago #

    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?

  12. Jonathan Landrum
    Member
    Posted 8 years ago #

    :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!

  13. RealiX
    Member
    Posted 8 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.