[Potzas]

Hi there, I would like to customise bullets to feature an image/graphic rather than the standard circle bullets. Is there code to do this please?

Thanks!

[Sakin]

@Potzas: That is css circles. You can change to graphic by adding the background image in the controller. Add in the image url where there is image path and also change the height and width as per the image added. Then add the following css in “Appearance => Theme Options => Custom CSS” box.

#controllers a {
    background: url("image path") no-repeat scroll 0 0 transparent;
    height: 10px;
    width: 10px;
}
#controllers a:hover, #controllers a.active {
    background: url("image path") no-repeat scroll 0 0 transparent;
}

[Potzas]

Hi, thanks but don’t understand the first bit. I found this code in the style.css. Not sure where I’m putting the image path?

#controllers {
bottom: 2%;
list-style: none outside none;
position: absolute;
right: 0;
text-align: center;
width: 100%;
z-index: 20;
}
#controllers a {
display: inline-block;
width: 10px;
height: 10px;
cursor: pointer;
background: rgba(255,255,255,.4);
border-radius: 24px;
color: #333;
font-weight: 600;
line-height:24px;

[Sakin]

@Potzas: You don’t have to change anything is style.css . You should just add the following css in “Appearance => Theme Options => Custom CSS” box.
image path means the url of the image.

Like the image path of our logo is http://i0.wp.com/catchthemes.com/wp-content/uploads/2012/06/logo.png

in the same way you need to add the image path. If for example, you want to add our logo then it will be as.

#controllers a {
    background: url("http://i0.wp.com/catchthemes.com/wp-content/uploads/2012/06/logo.png") no-repeat scroll 0 0 transparent;
    height: 10px;
    width: 10px;
}
#controllers a:hover, #controllers a.active {
    background: url("http://i0.wp.com/catchthemes.com/wp-content/uploads/2012/06/logo.png") no-repeat scroll 0 0 transparent;
}

[Potzas]

Thanks, I did it but the bullets haven’t changed. Am I missing something? I entered the following code in the custom CSS. Sorry !

#controllers a {
background: url(“http://reefadmin.com/wp-content/uploads/2013/06/fish.png”) no-repeat scroll 0 0 transparent;
height: 20px;
width: 20px;
}
#controllers a:hover, #controllers a.active {
background: url(“http://reefadmin.com/wp-content/uploads/2013/06/fish.png”) no-repeat scroll 0 0 transparent; }

[Sakin]

@Potzas: The css that you have added is good. But the image that you have added to replace is too large. that is why it is not displaying. Since, you have added the height and width as 20px. It will show only the 20px of the image you have added.

[Potzas]

Thanks for your time Sakin. I’ve made the image 20px but the bullets haven’t changed at all. Any other ideas?

[Potzas]

Hi Sakin, I’ve just noticed the bullets have changed on my feature slider. I was referring to the actual wordpress bullets that wordpress creates. Is there code to change those please? Sorry for the confusion!

[Sakin]

@Potzas: I don’t get it which one are you referring to. Maybe you can show me the page where you have added that bullet and how you want to change it.

[Potzas]

Here you go, they are the standard wordpress bullets I need to customise. See at the bottom of this page. http://reefadmin.com/event-co-ordinator/ (made it live for now). Thanks

[Sakin]

@Potzas: You can add the following CSS in “Appearance => Theme Options => Custom CSS”.

.entry-content ul {
    list-style: none;
}
.entry-content li {
    background: url("http://reefadmin.com/wp-content/uploads/2013/06/fish-bullets.png") no-repeat scroll 0 0 transparent;
    margin: 0;
    padding: 0 0 0 3.6rem;
}

[Potzas]

Thanks Sakin, I tried that but it changed how my site looks, the header colour, the font etc etc.

[Sakin]

@Potzas: I don’t get it what you mean. I haven’t given you the css for color and fonts.

You should have changed the font and color from “Appearance => Theme Options”.

[Potzas]

I added that code into the custom CSS box. Please look now quickly to see what has happened. http://www.reefadmin.com. I will change it back in 5 minutes. Thanks!

[Sakin]

@Potzas: You have jumbled up lot of code in Custom CSS box. You are supposed to add only css in Custom CSS box.

[Potzas]

OK, I’m not sure what you mean as all the code in there has come from you and these forums? Sorry!

[Sakin]

@Potzas: can you add your custom css codes in here http://pastebin.com/ and send me the link.

[Potzas]

Thanks Saskin, that’s done. http://pastebin.com/5hn0XdtX

[Sakin]

@Potzas: There is problem with your first 3 lines.

#header-menu { ubuntu; sans-serif }
#header-menu ul.menu a { font-family: ubuntu, sans-serif; }
#header-menu ul.menu a { text-transform: none; }

Replace the above css to the following
#header-menu ul.menu a { font-family: ubuntu, sans-serif; text-transform: none; }

[Potzas]

Thanks, I did that then inserted the code for the bullets and same problem!

[Author]

Posts