• Resolved panantukan

    (@panantukan)


    My blog is here: http://www.nationaleconomy.net/blog/

    The theme came with two buttons at the top. They are essentially similar to the buttons at the top of ever single WordPress.org page. How do I modify the buttons and add new ones? I’ve looked everywhere in the dashboard and hunted through the code and haven’t seen it anywhere!

Viewing 13 replies - 1 through 13 (of 13 total)
  • Could be in the header.php file of you theme. Home is usually hardcoded and About is likely a result of using the template tag, wp_list_pages().

    If all else fails, use something like WinGrep to search for “Home” in wp-content/themes/yourtheme subfolder

    The menu tabs at the top appear when you create new pages, not posts.

    The links you have on your sidebar are external links to html files, not pages created within WordPress. Are those the tabs you want to create in the menu?

    The options I can think of are two:

    1 – create new pages in WordPress and paste the content of the html files there

    2 – hard code the menu tabs in the header, as below.

    In your theme folder, open header.php. You already have “Home” and “About”, then add your html links, like this:

    <ul id="nav">
    	  <li class="page_item"><a href="http://www.nationaleconomy.net/blog/" title="Home">Home</a></li>
    	  <li class="page_item page-item-2"><a href="http://www.nationaleconomy.net/blog/?page_id=2" title="About">About</a></li>
    <li class="page_item page-item-3"><a href="http://www.nationaleconomy.net/order.html" title="Order">Order</a></li>
    <li class="page_item page-item-4"><a href="http://www.nationaleconomy.net/soddy.html" title="Frederick Soddy">F. Soddy</a></li>
    <li class="page_item page-item-5"><a href="http://www.nationaleconomy.net/chapters.html" title="Sample Chapters">Sample Chapters</a></li>
    	</ul>

    That will work.

    Also, add something to the “about” page, then publish it, and the link will change from /blog/?page_id=2 to /blog/about

    Hope this helps!

    add a new page and a new tab should appear.

    If you want to change the look of the button you have to go into your STYLE.css file. Look for #nav .page_item a {

    Thread Starter panantukan

    (@panantukan)

    Thanks for responding,

    Buddha trance the code you gave me worked great.

    MichaelH if you hadn’t mentioned where the about button was from I would have gone nuts trying to figure it out.

    Thread Starter panantukan

    (@panantukan)

    OK, so I have the buttons now. They’re all flushed to the right. How do use justify alignment with them so they’re spaced evenly across the page instead of bunched up on the right side?

    @panantukan,

    Glad the code worked!

    To center the tabs, try this in the style.css of your theme:

    #nav {
    	list-style: none;
    	margin: 0px;
    	position: relative;
            left: -5px;
    	bottom: 0px;
    }

    With this, it looks centered to me in Firefox.

    Other option to make it look like your main site, not just centered:

    #nav {
    	list-style: none;
    	margin: 0px;
    	position: relative;
            margin-left: -56px;
    	bottom: 0px;
    }
    #nav li {
    	float: left;
    	margin-left: 21px;
    }

    then, if you want to, remove the border:

    #nav .page_item a{
    	color: #ffffff;
    	text-decoration: none;
    	background: #;
    	padding: 5px 15px;
    	font: bold 14px/100% Arial, Helvetica, sans-serif;
    	display: block;
    }

    See if that works for you.

    Thread Starter panantukan

    (@panantukan)

    @ Buddha Trance

    I tried out all the code. It worked great! You’re really good at this. Thanks for helping me.

    Questions:

    1. What added the padding between the buttons? Was it the left margin? #nav li {
    float: left;
    margin-left: 21px;
    }
    2. Is there a way to make the buttons bigger so there is no dead space between them?
    3. When I rollover the button the text does turn black, yet my CSS style is #nav .page_item a:hover {
    color: #000000;
    }
    Shouldn’t that make it turn black?

    Prior to using the new code the text did change color.

    @ panantukan,

    Yes, the left margin added the space between the buttons (margin-left).

    To make the buttons bigger you have to increase the padding, but then you have to change the margin values, both in #nav and #nav li. You want to do that because you want to add the border back?

    It’s really weird that the a:hover is not working anymore, as you only modified the margins… will look into that.

    I just downloaded a fresh copy of the style.css of your theme and started from scratch. In my browser the links change color to black when hovering now. Strange.

    Give it a try…

    #nav {
    	list-style: none;
    	margin: 0px;
    	position: relative;
    	margin-left: -56px;
    	bottom: 0px;
    }
    #nav li {
    	float: left;
    	margin-left: 21px;
    }
    #nav .current_page_item a, #nav .current_page_item a:visited{
    	color: #000000;
    	text-decoration: none;
    }
    #nav .page_item a{
    	color: #ffffff;
    	text-decoration: none;
    	padding: 5px 15px;
    	font: bold 14px/100% Arial, Helvetica, sans-serif;
    	display: block;
    }
    #nav .page_item a:hover {
    	color: #000000;
    }
    Thread Starter panantukan

    (@panantukan)

    @buddha

    Wow, thanks. I will give it all a try. I have to go on a family Thanksgiving trip, so I may not respond for a few days.

    Thanks for you all your help.

    Hope you have a good Thanksgiving.

    Happy Thanksgiving!

    Thread Starter panantukan

    (@panantukan)

    @buddha

    The buttons all look like I want them to now. Thanks for your help! The color change on rollover not working was caused by an extra }.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Sooo frustrating, where is it?’ is closed to new replies.