Page Buttons

  • Author
    Posts
  • #139782

    yaheardthat
    Member

    How’s it going…I’m using the Benevolence theme and I have the CSS upgrade as well. I would like to add some page buttons near the header. Here’s the link to my blog… C’est La Vie

    Thanks!

    #139898

    devblog
    Member

    Well, I’d suggest you to try creating an element in a text widget with your menu, give it and ID or a class name and position it with CSS.

    #139905

    yaheardthat
    Member

    ohh cool. I’ll give that a try. Thanks for the help :)

    #139929

    yaheardthat
    Member

    hey Devblog, is there any way you can show me an example of how the coding should look like? Sorry if thats asking for too much. Thanks!

    #139932

    yaheardthat
    Member

    n/m…. I figured it out. Thanks again for all your ehlp.

    #139933

    devblog
    Member

    Edit: I was writing my example while you wrote your second message, so I’m deleting it. Glad you figured it out.

    Cheers!

    #139936

    yaheardthat
    Member

    Oh, my bad, thanks again man.

    #139944

    yaheardthat
    Member
    #139946

    atthe404
    Member

    Just use the selector # whatever a:hover {go funky}

    #139949

    yaheardthat
    Member

    oh yeah, is there a chance that you can show me an example of the coding?

    #139964

    atthe404
    Member

    Not much I am afraid:)

    #139993

    devblog
    Member

    what effect do you want to achieve? just change the text color?

    #140023

    yaheardthat
    Member

    Yeah, I would like the page tabs to have a mouse over effect. I’m not sure how to get it to work on here. Is it easier to do it with images or plain text? and if text…how could I position the text to b above the header and apply a hover color? sorry if this is asking for too much. Thanks again!!

    #140025

    devblog
    Member

    Well, the example I deleted above was exactly how I’m going to suggest you do it. You can take it from there.

    In your text widget create the elements:

    <div id="mymenubar">
    	<ul>
    		<li><a href='[YourPathHere]'>Home</a></li>
    		<li><a href='[YourPathHere]'>MySapce</a></li>
    		<li><a href='[YourPathHere]'>Contact</a></li>
    	</ul>
    </div>

    In your CSS give them their properties:

    #mymenubar{
        /*position of your menu. it should be absolute, like you did with your images*/
    	/*other properties you may want your element to have*/
    }
    
    #mymenubar ul{
    	list-style: none;
    	position: relative;
    	/*other properties you may want your element to have*/
    }
    
    #mymenubar ul li{
        display: inline;
    	/*other properties you may want your element to have*/
    }
    
    #mymenubar ul li a{
    	color: [color you want for your links]
    	/*other properties you may want your element to have*/
    }
    
    #menubar ul li a:hover{
    	color: [color you want for your links when hovered]
    	/*other properties you may want your element to have*/
    }

    Since you have the CSS upgrade, I’d suggest you to manipulate your menu with the linked CSS, not inline style (like you did with your images).

    HTH

    #140036

    yaheardthat
    Member

    Thank you so much Dev. I’m going to work on this right now… :D

    .Ray

    #140040

    yaheardthat
    Member

    Here’s how the coding in the css is looking. Not sure if I did it right…it’s not showing up on the page though.

    #mymenubar{
    margin-left:0;
    position:absolute;
    margin-top:-29px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:9pt;

    }

    #mymenubar ul{
    list-style: none;
    position: relative;

    }

    #mymenubar ul li{
    display: inline;

    }

    #mymenubar ul li a{
    color:#fff;

    }

    #menubar ul li a:hover{
    color:#588526;

    }

    #140041

    devblog
    Member

    I don’t see #mymenubar defined anywhere in your CSS…

    Edit My lunch break is about to end, so make sure you saved your CSS. Keep trying, if you still have problems, I’ll take a look at it once I get home.

    #140042

    yaheardthat
    Member

    ohh, I’m not that familiar with css…i’m surprise i got this far u know. sorry for all the newb question. not sure how i can define it.

    #140047

    yaheardthat
    Member

    When I add the div id and go to save the changes…the div id is no longer in the coding. is there a reason why that is happening?

    #140052

    devblog
    Member

    it seems that the wp software strips the ids out… well, let’s try something different:

    Instead of using and id, use a class. Change the code so that it’ll read like this:

    <div class="mymenubar">
    	<ul>
    		<li><a href='[YourPathHere]'>Home</a></li>
    		<li><a href='[YourPathHere]'>MySapce</a></li>
    		<li><a href='[YourPathHere]'>Contact</a></li>
    	</ul>
    </div>

    And your CSS like this:

    .mymenubar{
    margin-left:0;
    position:absolute;
    margin-top:-29px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:9pt;
    
    }
    
    .mymenubar ul{
    list-style: none;
    position: relative;
    
    }
    
    .mymenubar ul li{
    display: inline;
    
    }
    
    .mymenubar ul li a{
    color:#fff;
    
    }
    
    .menubar ul li a:hover{
    color:#588526;
    
    }

    Try that.

    You define your CSS in the ‘Edit CSS’ page in admin area, right?

    If you still have problems, I’ll take a look at it when I get home.

The topic ‘Page Buttons’ is closed to new replies.