≡ Menu

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

  • 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?

{ 9 comments… add one }

  • Lew Lepley April 20, 2011, 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

    • Todd April 20, 2011, 7:21 pm

      Lew,
      Thank you for your thorough look into the tutorial and extra credit for searching out the site. Actually the site I built with the tutorial tips is here – http://www.atlantahalfwayhouse.com – Let me know what you think.

      Todd

  • Wesley May 26, 2011, 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

    • Todd May 26, 2011, 10:06 pm

      Where exactly did you add the code?

  • Wesley May 30, 2011, 2:14 pm

    bottom of custom.css

    • Todd May 31, 2011, 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

  • Brad September 7, 2011, 9:07 am

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

  • Bria Jones December 26, 2011, 1:51 pm

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

    Thanks

    • Todd December 26, 2011, 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

Leave a Comment