By georgiebon on

The primary links on my modified bluemarine theme site are delimited by |. I would like to change this to an image but seem to find any info on this. Any help would be appreciated.

Thanks,
~g

⋅ Categories: Drupal 4.7.x

Comments

nevets’s picture

nevets commented

Add the following (at the bottom) to you style.css file (in the bluemarine folder)

#navlist.links li {
	border: none;
	background: url(eye.png) no-repeat;
	padding-left: 18px;
}

This removes the line currently there, adds an image 'eye.png' (which is also in the bluemarine folder) and then adds some padding to the left to make room for the image. Since that actually places an image in front of all the primary links you may also want to add this

#navlist.links li.first {
	background: none;
}

Which will remove the image from the first link.

georgiebon’s picture

georgiebon commented

Didn't work for me... Ay other suggestions?

nevets’s picture

nevets commented

In page.tpl.php find

<?php print theme('links', $primary_links) ?>

and change to

<?php print theme('links', $primary_links, '<div class="primary-separator" ></div>') ?>

and then in style.css add

.primary-separator {
	display: inline;
	background: url(eye.png) no-repeat;
	width: 16px;
	margin-left: 5px;
	padding-right: 21px;
}
margin-left controls the space to the left of the image.  padding-right controls the space for the image plus the right padding.
georgiebon’s picture

georgiebon commented

Thanks Nevets - that helped alot :)