Thesis Customization — How To Reposition The Navigation Bar–Round The Edges of The Content Box, Sidebar and Navigation Buttons & Remove All The Lines From Thesis Theme

January 23, 2011 By 9 Comments
  • Share
  • CevherShare
  • Share

One of the design elements I wanted to incorporate on a site I was building was to give it a softer feel.   To do this I needed to round the edges of the content box, the sidebar title boxes and the navigation menu buttons. 

Another thing I wanted to accomplish to give the site an UnThesis look was to move the navigation buttons more in the middle of the layout.  This was a difficult code to find as most tutorials discuss working with the navigation menu either from the left side or the right side. 

I will also give you a great bit of code to remove all of the lines that come with the default Thesis theme. 

 

The –moz-border-radius code will create the rounded edges.  Increasing the amount of pixels will increase or decrease the curve of the arch. 

.custom #sidebars { Background-color:transparent;
 -moz-border-radius:4px; margin-top:40px; }

This is the code that will move the navigation into the middle of the layout.  You can change the margin-left number to position the navigation bar exactly where you want it to be 

.custom ul.menu li.tab-home {
	margin-left:20em;
		
		}

This code will remove all of the lines throughout the default Thesis Theme.

.custom #header, .custom .post, .custom .teasers_box, 
.custom #footer, .custom #footer a, .custom #footer a:active, .custom #archive_info, .custom 
.prev_next, .custom #comment_list, .custom #comment_list dd, .custom #commentform, 
.custom #sidebar_1, .custom #sidebar_2, .custom #comment_list dt.comment, 
.custom #comment_list dd.comment, .custom #comment_list dl .bypostauthor .format_text,
 .custom #trackback_list {
        border-bottom: 0px;
        border-top: 0px;
        border-right: 0px;
        border-left: 0px;
}

Please leave comments below – did this tutorial help you?

Comments

  1. Lew Lepley says:
    April 20, 2011 at 11:15 am

    Hi, Todd. Thanks for the tips, very nice and great detective work on the nav bar. I looked at your arches site and noticed that you're not using any of the tips you showed in the video, it kinda looks like basic Thesis except you nicely got rid of the lines. 
    Why did you not end up using all the slick stuff in the video tutorial? 
    Thanks,
    Lew

    Reply
  2. Wesley says:
    May 26, 2011 at 4:22 pm

    Hi,

    Added the code to move the menu off the left and to remove all lines.

    The nav menu did not move at all and still have a line below the header.

    Suggestions?

    here is the site http://greekvillagemarket.com/recipes/

    thanks,
    Wesley

    Reply
  3. Wesley says:
    May 30, 2011 at 2:14 pm

    bottom of custom.css

    Reply
    • Todd says:
      May 31, 2011 at 4:20 am

      Wesley,

      Without seeing your file it’s hard to say but I would make sure all of your syntax is correct – I looked at your site today and did not see a line under the header and the position of your menu looks good. Am I missing something? Let me know how I can help you.

      Todd

      Reply
  4. Brad says:
    September 7, 2011 at 9:07 am

    Incredibly helpful. I’ve been trying to do this for a year. Thanks for the help.

    Reply
  5. Bria Jones says:
    December 26, 2011 at 1:51 pm

    How do I float my navigation bar over my header image?

    Thanks

    Reply
    • Todd says:
      December 26, 2011 at 6:38 pm

      Bria,

      Insert this code into the Thesis Editor 

      .custom #header {position:relative;}
	.custom ul.menu {position:absolute; top:15.2em; right:84.1em; width:auto;}
		.custom ul.menu li.rss {float:left;}

      You will change the top: and right: values to maneuver the nav bar anywhere you want it to be in the header

      Reply

Speak Your Mind

*