Basic bulleted list? No thanks!

I have recently been designing a new landing page for a project, in which there was the idea that instead of the normal bullet mark for lists like the one below they wanted a custom two arrow to match with the branding and design of the main website.

  • Normal Bullet

So the custom bullet was to be like >> but as an image and in the company colours. The final version came out like this: Custom bullet

Now its fairly easy to replace a bullet for a list item, but you need to make sure you do it the correct way so it works in all browsers. The best practice is to use the bullet image as a background for the bullet and position it to the left of the image, initially over the top of where the old normal bullet dot would be. This is all done in CSS, so there is no need to customise your current HTML files in order to do this.

Ok so first off, for this example my navigation I want to use has a ID of #maincontentNav (you can change this to whatever you want yours to be called). In the CSS of your site set the #maincontentNav to have no list style type.

#maincontentNav {

list-style-type:none;

}

Then you will need to target the list items so you can place a custom bullet in. To do this you will use the method of background image, adjusting the paddings and margins accordingly.

#maincontentNav li {
background: transparent url(“arrows.jpg”) no-repeat 0 7px;
padding: 3px 0 3px 25px;
margin-right:80px;
font-size:2em;
}

As a rule of thumb, always set your font-sizes in ems if you want the design of your site to stay in form when the text is enlarged. You should now have the desired effect. By adjusting the “7px” on the background image will move the bullet point up or down, so you can center it to your text.

My final outcome with the custom bullet:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s