trying to use custom bullets on wp_list_pages list items

  • Resolved goldmember

    (@goldmember)


    14 years, 10 months ago

    i’m using wp_list_pages in my top nav bar on this site (https://willowbilliards.com/wordpress/) and i want to get rid of the custom diamond image bullet to the left of the first item, “HOMEPAGE”. the php code spits out the list like this:


    <ul id="page-list">

    <li class="page_item page-item-27 current_page_item">HOMEPAGE
    <li class="page_item page-item-2">ABOUT US
    <li class="page_item page-item-14">CONTACT US
    <li class="page_item page-item-12">DIRECTIONS
    <li class="page_item page-item-10">EVENTS
    <li class="page_item page-item-4">LEAGUES

    <!-- /page-list -->

    so i figured if i want to edit just the first list item to remove the diamond custom bullet image, and i added the following code, that would do it:

    ul#page-list li.page-item-27 {font-size:10px; list-style-image: none;}
    ul#page-list li.page-item-27 a {font-size:10px; list-style-image: none;}

    i can tell the code is effecting the correct list item because the font size shrinks to 10 on just that heading. but how come the custom diamond image bullet doesnt go away???

Viewing 15 replies - 1 through 15 (of 15 total)

  • but how come the custom diamond image bullet doesnt go away???

    because it is a background image, not a list-style-image:
    style.css about line 190:

    ul#page-list li {
display:inline;
font-size:16px;
list-style-image: url(images/diamond.gif);
}
ul#page-list li a {
text-decoration:none;
color:#fff;
margin-top: 19px;
padding: 0 15px 0 15px;
float:left;
background: transparent url(images/diamond.gif) left center no-repeat;
}

    no idea why this is twice in the style, once on the list item and then in the linked list item (?).

    btw: firefox with the web developer add-on is an efficient tool to help with debugging css issues (and more).
    its own toolbar allows, for instance, with ‘ctrl+shift+y’, to identify css styles with mouse-over or a mouse click.

    Thread Starter goldmember

    (@goldmember)

    i am using Firebug with Firefox but this one is tricky. i took the background off ul#page-list li a, so you would think it would show up now because the ul#page-list li has the diamond referenced in the list-style-image…but it doesnt show up.

    what am i missing????

    there is a ‘list-style:none;’ in this style:

    ul#page-list {
margin: 0;
padding: 0;
white-space: nowrap;
float:left;
width:1000px;
list-style: none;
}

    and the ‘display:inline;’ in ‘ul#page-list li’ also seems to block the display of the diamonds.

    Thread Starter goldmember

    (@goldmember)

    thanks. so when i use the code below i seem to get real close, however the list items are stepped down to the right which is not the look that i’m going for, even though the diamond bullets do correctly show up.

    ul#page-list  {
float:left;
margin:0;
padding:0;
white-space:nowrap;
width:1000px;
}
ul#page-list li {
font-size:16px;
list-style-image:url("images/diamond.gif");
}
ul#page-list li a {
color:#FFFFFF;
float:left;
margin-top:19px;
padding:0 15px;
text-decoration:none;

    please advise. thanks for bearing with me.

    get rid of the custom diamond image bullet to the left of the first item,

    is that still the goal?

    to do this it should be enough to add this into style.css:

    ul#page-list li.page-item-27 a {background-image:none;}

    Thread Starter goldmember

    (@goldmember)

    what i want is custom diamond image bullets for all pages accept the first. i originally went about this by putting in a background image as someone had suggested to me. but now i’m transitioning over to list-style-image. though i messed up some steps along the way and i’m trying to clean it up.

    so when i try the code here (https://pastebin.com/nN2eSVwV), like i think you’re saying to do, in place of the current Page Menu code I have, the diamonds appear in front of every heading, including the first, and the headings appear in a stepped down manner, instead of in a horizontal bar.

    what am i missing?

    ‘custom diamond image bullets’ – different from the existing one?

    if not, why not using the existing styles (what is wrong with the background method?) and just removing the first one with the line of css i posted?

    Thread Starter goldmember

    (@goldmember)

    i want to use the diamond image bullets that are on there now.

    but i tried the code you suggested and it didnt work, probably because i misinterpreted what you wanted me to input and where.

    from where i’m at now, https://pastebin.com/nN2eSVwV, can you tell me what changes i need to make from that??? thanks.

    these changes seem to work into the right direction:
    https://wordpress.pastebin.com/VR03L4Wh

    only checked with firefox; see how it looks in IE.

    Thread Starter goldmember

    (@goldmember)

    close (https://willowbilliards.com/wordpress/?page_id=10). the correct ones have bullets but now they’re lining up vertically.

    how do i get them all inline???

    looked ok in firefox – but IE begs to be different ??

    that makes it more complicated to optimize – i assume that the float:left has to go onto the list items, and not on the link.
    unfortunately i am away from my computer for a few days from now – hope someone else takes over.
    i’ll check when i’m back.
    good luck

    Thread Starter goldmember

    (@goldmember)

    thanks. if anyone else picks up on this thread, i must not be seeing what he’s seeing in firefox.

    when i look at it, HOMEPAGE and ABOUT US are listed on the top line, then the rest of the page headings are listed vertically below that first line.

    any idea what’s wrong???

    @ alchymyth Plz bro help me with this thread..

    https://www.ads-software.com/support/topic/391570?replies=4

    I am very new to PHp and if iu try to do any modification myself i might damage the theme i am using….

    Thread Starter goldmember

    (@goldmember)

    i have it worked out now. this did the trick:

    #page-menu{
width: 1000px;
height: 50px;
margin: -60px 0 10px -7px;
}

ul#page-list {
margin: 0;
padding: 0;
white-space: nowrap;
float:left;
width:1000px;
list-style: none;
}

ul#page-list li {
display:inline;
font-size:16px;
margin-top: 16px;
padding: 3px 7px 0 21px;
float:left;
background: transparent url(images/diamond.gif) left center no-repeat;
}

ul#page-list li.page-item-27 {
background: transparent;
}

    @sandeep: What do we have to say to make you understand that irrelevant posting to get attention for your threads is AGAINST THE RULES!

    As I have said several times before, you MUST stand on the merit of your own thread. PLEASE STOP asking @alchymyth for help when your post has nothing to do with the thread you are posting on!

    Examples:

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘trying to use custom bullets on wp_list_pages list items’ is closed to new replies.