WordPress.com

1. confessionsofadateaholic
   Member
   Jan 20, 2013, 2:57 PM

   Hi,

   I'm new to wordpress, and I've purchased the custom css for use on my blog, using the Bueno theme:

   http://trainhardeatwellbehappy.wordpress.com/

   I am pleased with the positioning of my page navigation now after lots of fiddling with the code, however I'd really like to change the links from words to images - is this possible with this theme?

   If anyone can provide any help that would be awesome :)

   The normal state for the menu should look like this:
   http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/normal_state.jpg

   And the over state for each button would be like this:
   http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/over_state.jpg

   The images to use for the normal are here:
   http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/home.jpg
   http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/about.jpg
   http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/train.jpg
   http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/eat.jpg
   http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/be.jpg

   And the images for the over state are here:
   http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/home_o.jpg
   http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/train_o.jpg
   http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/eat_o.jpg
   http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/be_o.jpg

   The blog I need help with is trainhardeatwellbehappy.wordpress.com.

2. designsimply
   Staff
   Feb 8, 2013, 3:51 AM

   First, fwiw, I actually love the way it currently looks and I think you should consider leaving the menu as text.

   If you want to swap out menu items for images, you need to figure out the unique class name for each menu item and then add image replacement CSS to swap out the images. Here is an example of the first few menu items from your site so you can get an idea for how it works:

   #pagenav li a {
   	border: none;
   	display: block;
   	height: 50px;
   	padding: 0;
   	text-alignt: left;
   	text-indent: -9999px;
   	width: 84px;
   }
   
   #pagenav li:first-child a {
   	background: url(http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/home.jpg) no-repeat;
   }
   
   #pagenav li:first-child a:hover {
   	background: url(http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/home_o.jpg) no-repeat;
   }
   
   #pagenav li.page-item-1 a {
   	background: url(http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/about.jpg) no-repeat;
   }
   
   #pagenav li.page-item-1 a:hover {
   	background: url(http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/about_o.jpg) no-repeat;
   }
   
   #pagenav li.page-item-8 a {
   	background: url(http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/eat.jpg) no-repeat;
   }
   
   #pagenav li.page-item-8 a:hover {
   	background: url(http://penguinscantfly.co.uk/trainhardeatwellbehappy/nav/eat_o.jpg) no-repeat;
   }

   I looked at the page source in a browser to get the menu item class names. Note that, in this example, all of your image sizes are the same so you can set the size once in the first CSS block. If the images were different sizes, you would need to set width and height for each specific menu item separately.

3. designsimply
   Staff
   Feb 8, 2013, 3:54 AM

   I think the pink text in the left footer widget is hard to read. Consider changing that text color or the background color there.

Topic Closed

This topic has been closed to new replies.