Customise bullets

This topic has 28 replies, 2 voices, and was last updated 11 years, 4 months ago by Sakin.

Viewing 20 posts - 1 through 20 (of 29 total)

1 2 →

Author

Posts
June 26, 2013 at 2:23 pm #11031

Potzas
Member

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!

June 27, 2013 at 1:41 am #11082
Sakin
Keymaster
@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;
}
```
June 27, 2013 at 2:07 pm #11122

Potzas
Member

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;

June 27, 2013 at 11:51 pm #11138
Sakin
Keymaster
@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;
}
```
June 28, 2013 at 4:54 pm #11165

Potzas
Member

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

June 28, 2013 at 11:11 pm #11182

Sakin
Keymaster

@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.

July 1, 2013 at 1:03 pm #11263

Potzas
Member

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

July 1, 2013 at 7:12 pm #11271

Potzas
Member

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!

July 1, 2013 at 11:38 pm #11279

Sakin
Keymaster

@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.

July 2, 2013 at 12:35 pm #11292

Potzas
Member

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

July 2, 2013 at 4:01 pm #11294
Sakin
Keymaster
@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;
}
```
July 2, 2013 at 4:48 pm #11295

Potzas
Member

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

July 2, 2013 at 8:03 pm #11302

Sakin
Keymaster

@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”.

July 2, 2013 at 8:26 pm #11307

Potzas
Member

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!

July 2, 2013 at 8:30 pm #11309

Sakin
Keymaster

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

July 2, 2013 at 8:32 pm #11311

Potzas
Member

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

July 2, 2013 at 8:43 pm #11314

Sakin
Keymaster

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

July 2, 2013 at 8:45 pm #11315

Potzas
Member

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

July 2, 2013 at 9:24 pm #11321
Sakin
Keymaster
@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; }
July 2, 2013 at 10:14 pm #11326

Potzas
Member

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

Posts