WordPress.org

1. dekraan
   Member
   Posted 3 years ago #

   Hi all, I am trying to get the same tabbed effect, wordpress.com has on their horizontal menu. The codex showed me to add:

   .page_item {
     background-color:#FFF;
     color:#000;
   }
   
   .current_page_item {
     background-color:#FFF;
     color:#000;
   }

   to the CSS, and that does add a tab. But I do not know how to edit the colors. I want the active one to differ from the rest. So: when you are on home, 'home' should be written in black, and the mouseover should also be black. The remaining menulinks should have a different color and hovercolor. Is there a way to seperate, say, the current page colors, from the colors you add through 'a' and 'a:hover'?

   To sum up: how do you make your menufonts like wordpress.org? I want the current pagelink to have a different color+hovercolor than the other pagelinks.

2. stvwlf
   Member
   Posted 3 years ago #

   Hi

   .current_page_item styling is applied when the page is the current page. The CSS you displayed above has current and all other pages styled the same. Change the background and foreground colors on current_page_item

   The highlight background on wp.org is #C6D9E9 color is #555555
   the regular background is #464646 and color #999999

   the regular hover color is #fff

3. dekraan
   Member
   Posted 3 years ago #

   Hello Steve! I am aware of this. The coloring on my site is different from the example I posted, sorry for the misunderstanding.

   What I am looking for, is the code that I could use to change not the tab itself, but the text of the tab, the link itself.

   The code I added above, if I understand, controls the tab-shape square that appears at the back of a horizontal menu-link. I want to change the text of that link.

   I think at the moment this is controlled by:

   #header ul li a {
   	font-weight: normal;
   	display: block;
   	line-height: 34px;
   	padding: 0 10px;
   	font-size: 14px;
   	color: #003366;
   	text-shadow: #333 1px 1px 1px;
   }
   
   #header ul li a:hover {
   	color: #cc0000;
   }
   
   #header ul li a.current, #header ul li#download a.current {
   	color: #003399;
   	background: #e4f2fd;
   	-moz-border-radius-topleft: 3px;
   	-khtml-border-top-left-radius: 3px;
   	-webkit-border-top-left-radius: 3px;
   	border-top-left-radius: 3px;
   	-moz-border-radius-topright: 3px;
   	-khtml-border-top-right-radius: 3px;
   	-webkit-border-top-right-radius: 3px;
   	border-top-right-radius: 3px;
   	text-shadow: #c6d9e9 1px 1px 1px;
   }

   But, is it possible, to make the text of the current_page_item different than that of other page items? in the menu? My menucode is simply

   <ul id="menu">
   <li><?php wp_list_pages('depth=1&amp;title_li='); ?></li>
   </ul>

   Do you know?

4. stvwlf
   Member
   Posted 3 years ago #

   Hi

   The text is not changed on the CSS but in the template files.

   Give me an example of what you want to change the text to.
   In other words,
   "When not current page, I want one tab to say ............
   When it is the current page I want that tab to say .............."

   This will give me an idea what you have in mind so I can suggest a good way to do it.

5. dekraan
   Member
   Posted 3 years ago #

   It is not the text that has to change, but the color. So, when you hover the current page, the color does not change, while it does when you hover the other menuitems. A lot like the menu at wordpress.org and wordpress.com. When you hover 'forums' right now, nothing changes (colorwise). Do you know how to gt that result?

   ---
   I've tried editing:

   .current_page_item a, .current_page_item a:hover {
   text-decoration: none;
   font-weight: bold;
   font-color: #000;
   }

   into it, but when I examine the code in firefox, it still takes what I use in header ul li a

Topic Closed

This topic has been closed to new replies.