WordPress.com

1. lynerjy
   Member
   Dec 30, 2012, 3:18 PM

   Hi, is there a way to replace the vertical lines that separate my menu items with an image of my own?

   Is there also a way to remove the horizontal line on either side of the menu?

   And while I'm at it -- is there a way to remove the external border between the main content and the background?

   Thank you!

   The blog I need help with is awesome-anonymous.org.

2. designsimply
   Staff
   Jan 2, 2013, 2:17 PM

   Hi, is there a way to replace the vertical lines that separate my menu items with an image of my own?

   Here is an example of removing the vertical lines (borders) from the left of main menu items in the Blissful Blog theme and adding images there instead:

   .main-navigation ul li {
   	border-left: 0;
   	background: url('http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png') no-repeat;
   	height: 32px;
   	padding-left: 32px;
   }
   
   .main-navigation ul li:first-child {
   	background: none;
   	padding-left: 0;
   }

   I used a logo image in my example, but you can replace the url() value with your own image and adjust the height and padding numbers until it looks good for your image.

3. designsimply
   Staff
   Jan 2, 2013, 2:20 PM

   Is there also a way to remove the horizontal line on either side of the menu?

   I see that you figured this out using the following CSS:

   #navbar {
   	background: none
   }

   Nice work!

4. designsimply
   Staff
   Jan 2, 2013, 2:22 PM

   Is there a way to remove the external border between the main content and the background?

   Looks like you also figured this one out using this CSS:

   #container {
   	box-shadow: none
   }

   Awesome!

5. lynerjy
   Member
   Jan 2, 2013, 3:04 PM

   Oh woww Excellent thanks so much for the help!!!

Topic Closed

This topic has been closed to new replies.