http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Sun, 26 May 2013 02:54:48 +0000 http://themeshaper.com/forums/topic/style-individual-current_page_item#post-20209 Fri, 01 Apr 2011 11:44:41 +0000 helgatheviking 20209@http://themeshaper.com/forums/ <p>doesn't the current_page_item have a white border by default? </p> http://themeshaper.com/forums/topic/style-individual-current_page_item#post-20207 Fri, 01 Apr 2011 11:27:48 +0000 Sabra 20207@http://themeshaper.com/forums/ <p>Thanks mate, that worked like a charm. Menu's are driving me nuts! :) Now I only have funny white border-bottom on my active page-item that I need to solve... </p> http://themeshaper.com/forums/topic/style-individual-current_page_item#post-20203 Fri, 01 Apr 2011 10:18:27 +0000 middlesister 20203@http://themeshaper.com/forums/ <p>I think the .current_page_item gets applied to the parent li element and not to the link directly. Try adding the "a" element after .current_page_item:</p> <pre><code>.page-item-2.current_page_item a { background-image: url(menu_03hover.png); background-repeat: no-repeat; background-position: left top; }</code></pre> <p>If you want the .current_page_item background to be exactly the same as a:hover, you could also simply add it to the list to avoid repeating yourself:</p> <pre><code>.page-item-2 a:hover, .page-item-2.current_page_item a { background-image: url(menu_03hover.png); background-repeat: no-repeat; background-position: left top; }</code></pre> http://themeshaper.com/forums/topic/style-individual-current_page_item#post-20200 Fri, 01 Apr 2011 07:44:03 +0000 Sabra 20200@http://themeshaper.com/forums/ <p>Or not...it worked with adding a colored bottom border, not with the rest. Here's my code: </p> <pre><code>.page-item-2 a { background-image: url(menu_03normal.png); background-repeat: no-repeat; background-position: left top; } .page-item-2 a:visited { background-image: url(menu_03normal.png); background-repeat: no-repeat; background-position: left top; } .page-item-2 a:hover { background-image: url(menu_03hover.png); background-repeat: no-repeat; background-position: left top; } .page-item-2.current_page_item { background-image: url(menu_03hover.png); background-repeat: no-repeat; background-position: left top; }</code></pre> <p>My menu tags a, a:hover, a:visited and the class .current_page_item are displayed as blocks. I simply want the a:hover background to remain 'active' while the visitor is on that current page. </p> http://themeshaper.com/forums/topic/style-individual-current_page_item#post-20199 Fri, 01 Apr 2011 07:05:23 +0000 Sabra 20199@http://themeshaper.com/forums/ <p>Thanks a lot, that worked like a charm! I actually came up with code you provided, but put a space inbetween the two class names. Stupid! </p> http://themeshaper.com/forums/topic/style-individual-current_page_item#post-20011 Sat, 26 Mar 2011 23:58:17 +0000 helgatheviking 20011@http://themeshaper.com/forums/ <p>i think if you want to target something that has 2 classes you just link the classes together like</p> <pre><code>.page-item-#id.current_page_item { background: #whatevs; }</code></pre> <p>no guarantees... </p> http://themeshaper.com/forums/topic/style-individual-current_page_item#post-20007 Sat, 26 Mar 2011 21:41:06 +0000 Sabra 20007@http://themeshaper.com/forums/ <p>Sorry, I'm having trouble with the title..</p> <p>I have four menu items that I style individually by using the page-item-#id class:</p> <pre><code>.page-item-#id { background: #whatever; }</code></pre> <p>Now I want to style these item when they are the current page item, i.e. when the page they link to is active. But I can't for the life of me figure out what's the proper code. I can style the general .current_page_item link class, but not individually for each menu item.</p> <p>Can anyone offer help? </p> http://themeshaper.com/forums/topic/cant-style-current_page_item-in-child-theme#post-11660 Thu, 22 Apr 2010 06:34:08 +0000 jason 11660@http://themeshaper.com/forums/ <p>Dude. You ROCK !!</p> <p>I thought I had tried every variation, but that one I missed. I think I started out with sf-menu. Anyway, there's obviously a lot I still need to learn about CSS.</p> <p>Thanks very much for your help! </p> http://themeshaper.com/forums/topic/cant-style-current_page_item-in-child-theme#post-11643 Wed, 21 Apr 2010 15:53:52 +0000 em hr 11643@http://themeshaper.com/forums/ <p>Now way around it, styling nested menus in WordPress is difficult. Try:</p> <p><code>.current_page_item a , .current_page_ancestor a { border-top: 10px solid red }</code> </p> http://themeshaper.com/forums/topic/cant-style-current_page_item-in-child-theme#post-11641 Wed, 21 Apr 2010 15:29:36 +0000 jason 11641@http://themeshaper.com/forums/ <p>Thanks, but that's not it. I just tried it.... no change. The frustrating part is that this theme is designed to be customized, but it has been far from easy. I have spent hours trying to alter the look. Perhaps commenting on all of the classes would help people understand what they need to modify.</p> <p>I'm really close to installing a custom opencube menu and be done with it, but it would be a shame since all styling is right here in this theme. I just don't know how to access the right part.</p> <p>Thanks for any more suggestions you have. </p> http://themeshaper.com/forums/topic/cant-style-current_page_item-in-child-theme#post-11623 Wed, 21 Apr 2010 13:53:17 +0000 em hr 11623@http://themeshaper.com/forums/ <p>Hi jason,</p> <p>I think the class tou need to style is <code>current_page_ancestor</code></p> <p>-Gene </p> http://themeshaper.com/forums/topic/cant-style-current_page_item-in-child-theme#post-11612 Wed, 21 Apr 2010 07:10:23 +0000 jason 11612@http://themeshaper.com/forums/ <p>I want to add rounded tab corners for those browsers (not IE) that can view them. They just look better than the square corners for the particular site I am working on. Everything works as expected, except when I try to style the .current_page_item. That tab in particular, and its dropdown seems to operate differently from the rest.</p> <p>Example:<br /> <a href="http://208.43.39.68/~natafoun/about/awards/research-awards" rel="nofollow">http://208.43.39.68/~natafoun/about/awards/research-awards</a></p> <p>I thought by changing the style for .current_page_item, I'd be set. But, there are SO many overlapping classes, I'm getting a headache looking at this stuff, and I've spent hours now. Please help!</p> <p><code><br /> /*** THEMATIC SKIN ***/<br /> .sf-menu {<br /> float:left;<br /> }<br /> .sf-menu a {<br /> padding:9px 13px;<br /> text-decoration:none;<br /> color: #91AB99;<br /> }<br /> .sf-menu .current_page_item li,<br /> .sf-menu .current_page_ancestor li,<br /> .sf-menu .current_page_parent li {<br /> background-color: #ffffff;<br /> color: #91AB99;<br /> border-bottom-width: 1px;<br /> border-bottom-style: solid;<br /> border-bottom-color:#fff;<br /> -moz-border-radius-topleft:5px;<br /> -moz-border-radius-topright:5px;<br /> -webkit-border-top-left-radius:5px;<br /> -webkit-border-top-right-radius:5px;<br /> }<br /> .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/<br /> }<br /> .sf-menu li {<br /> border-top-width: 1px;<br /> border-top-style: solid;<br /> border-top-color: transparent;<br /> border-left-width: 1px;<br /> border-left-style: solid;<br /> border-left-color: transparent;<br /> }<br /> .sf-menu li:hover {<br /> border-left-width: 1px;<br /> border-left-style: solid;<br /> border-left-color: #ccc;<br /> }<br /> .sf-menu li li {<br /> background-color: #ffffff;<br /> }<br /> .sf-menu li li:hover {<br /> border-left-width: 1px;<br /> border-left-style: solid;<br /> border-left-color: #E0EAE3;<br /> }<br /> .sf-menu li li li {<br /> display:block;<br /> }<br /> .sf-menu li:hover, .sf-menu li.sfHover,<br /> .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {<br /> outline: 0;<br /> color: #555555;<br /> background-color: #ffffff;<br /> -moz-border-radius-topleft:5px;<br /> -moz-border-radius-topright:5px;<br /> -webkit-border-top-left-radius:5px;<br /> -webkit-border-top-right-radius:5px;<br /> }<br /> .sf-menu ul {<br /> border-right-width: 2px;<br /> border-bottom-width: 1px;<br /> border-left-width: 1px;<br /> border-right-style: solid;<br /> border-bottom-style: solid;<br /> border-left-style: solid;<br /> border-right-color: #ccc;<br /> border-bottom-color: #ccc;<br /> border-left-color: #ccc;<br /> }<br /> .sf-menu li:hover ul,<br /> .sf-menu li.sfHover ul {<br /> top:32px; /* overriding essential styles */<br /> left: -1px;<br /> }<br /> .sf-menu ul ul {<br /> margin-top:0;<br /> }<br /> .sf-menu ul a {<br /> border-bottom:none;<br /> background-color: #ffffff;<br /> }<br /> .sf-menu ul li:hover {<br /> color: #555555;<br /> background-color: #E0EAE3;<br /> -moz-border-radius-topleft:0px;<br /> -moz-border-radius-topright:0px;<br /> -webkit-border-top-left-radius:0px;<br /> -webkit-border-top-right-radius:0px;<br /> }<br /> </code> </p> http://themeshaper.com/forums/topic/current-page-item-not-working-for-a-page-of-posts#post-11092 Tue, 30 Mar 2010 02:38:58 +0000 roburdick 11092@http://themeshaper.com/forums/ <p>if ( is_page('portfolio')) { echo ' class="current_page_item"'; }</p> <p>I tried the above line in my functions.php... Nothing. </p> http://themeshaper.com/forums/topic/current-page-item-not-working-for-a-page-of-posts#post-11091 Tue, 30 Mar 2010 02:13:11 +0000 roburdick 11091@http://themeshaper.com/forums/ <p>I have set up a page template to display a list of posts from a certain category. This is on the wp_list navigation menu, but does not show the 'current page item' style.</p> <p>Does anyone know how to resolve this? </p> http://themeshaper.com/forums/topic/current-page-item-and-custom-page-template#post-10049 Mon, 22 Feb 2010 14:42:24 +0000 kgoodman 10049@http://themeshaper.com/forums/ <p>Okay, Page Links To plugin will not work for this issue. </p> http://themeshaper.com/forums/topic/current-page-item-and-custom-page-template#post-10034 Mon, 22 Feb 2010 02:14:50 +0000 kgoodman 10034@http://themeshaper.com/forums/ <p>Will the Page Links To plugin work or am I barking up the wrong tree? Found that in the most round about way. Thanks. </p> http://themeshaper.com/forums/topic/current-page-item-and-custom-page-template#post-10033 Mon, 22 Feb 2010 01:45:57 +0000 kgoodman 10033@http://themeshaper.com/forums/ <p>Hi,<br /> I am using Thematic/Feature Site as both a CMS and Blog platform for a client site.</p> <p>For a static page, I've created a custom page template to display only posts from a Category A.</p> <p>When a user goes to that page and then clicks on a post, they appear to be "moved" to the "Blog" page (in the main navigation bar).</p> <p>So, on this custom static page where I list only "posts" from a specific category (as CMS not blog), how do I keep the user on that page in the main navigation bar vs. "moving" him to Blog?</p> <p>I know, wonky question, been hard to search on this. It's hard to even figure out how to write the question (failing miserably but thanks for hanging in).</p> <p>See what I mean by checking out the development site. <a href="http://www.kngstudio.com/" rel="nofollow">http://www.kngstudio.com/</a> </p> <p>If you click on Outfitters in the main menu, and then click on one of the outfitter names, you'll see you are moved to the Blog page. I want the user to remain on "Outfitters" as the current page item. Just as an example.</p> <p>Good news: Getting the hang of thematic.</p> <p>Bad news: Totally clueless on this one issue (or if it's feasible).</p> <p>Thanks for any and all help.<br /> Kyndra </p>