Page Buttons

• 

  yaheardthat · Member · Aug 22, 2007 at 11:26 pm

  • Copy link
  • Add topic to favorites

  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!

• 

  devblog · Member · Aug 23, 2007 at 12:50 am

  • Copy link

  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.

• 

  yaheardthat · Member · Aug 23, 2007 at 2:33 am

  • Copy link

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

• 

  yaheardthat · Member · Aug 23, 2007 at 6:04 am

  • Copy link

  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!

• 

  yaheardthat · Member · Aug 23, 2007 at 6:26 am

  • Copy link

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

• 

  devblog · Member · Aug 23, 2007 at 6:30 am

  • Copy link

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

  Cheers!

• 

  yaheardthat · Member · Aug 23, 2007 at 7:24 am

  • Copy link

  Oh, my bad, thanks again man.

• 

  yaheardthat · Member · Aug 23, 2007 at 7:43 am

  • Copy link

  Hey Dev, My bad for all the questions. But I’m trying to get the mouse over function to work on the page tabs. I know javascrip will not work for this…any ideas?

  here’s the coding I have in the widget for the page tabs.

  
  <img src=”http://img222.imageshack.us/img222/4489/homesh8.jpg” border=”0″ style=”left:0;position:absolute;top:-29px;” />
  <img src=”http://img214.imageshack.us/img214/7262/myspace1hn1.jpg” border=”0″ style=”left:55px;position:absolute;top:-29px;” />
  
  <img src=”http://img201.imageshack.us/img201/8097/cont1tv7.jpg” border=”0″ style=”left:134px;position:absolute;top:-29px;” />

  .Ray

• 

  atthe404 · Member · Aug 23, 2007 at 8:06 am

  • Copy link

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

• 

  yaheardthat · Member · Aug 23, 2007 at 8:23 am

  • Copy link

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

• 

  atthe404 · Member · Aug 23, 2007 at 10:40 am

  • Copy link

  Not much I am afraid:)

• 

  devblog · Member · Aug 23, 2007 at 2:42 pm

  • Copy link

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

• 

  yaheardthat · Member · Aug 23, 2007 at 7:17 pm

  • Copy link

  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!!

• 

  devblog · Member · Aug 23, 2007 at 7:48 pm

  • Copy link

  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

• 

  yaheardthat · Member · Aug 23, 2007 at 8:31 pm

  • Copy link

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

  .Ray

• 

  yaheardthat · Member · Aug 23, 2007 at 8:46 pm

  • Copy link

  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;

  }

• 

  devblog · Member · Aug 23, 2007 at 8:50 pm

  • Copy link

  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.

• 

  yaheardthat · Member · Aug 23, 2007 at 8:55 pm

  • Copy link

  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.

• 

  yaheardthat · Member · Aug 23, 2007 at 9:32 pm

  • Copy link

  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?

• 

  devblog · Member · Aug 23, 2007 at 9:52 pm

  • Copy link

  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.