Thanks Gene, That did the trick!
I'm going to suggest we remove the filter from Thematic in the next version so for now just uncomment your add_filter and give it a priority of 20.
Does this mean that a potential future update may not work with this code?
Also, are you and Chris spearheading most of the development with Thematic now? I’d love to get involved somehow. Is there an open forum somewhere to discuss changes/improvements? Is beta-testing the best space for that?
Hi Allan,
Sorry for the late response.
The function will continue to work regardless. If we remove the filter from Thematic, you wouldn't need the priority and your filter would not be adding or redefining arguments to what Thematic's filter had just done.
Thematic is very much a community project. I always try and make sure that issues, requests, and solutions discussed in the forums get addressed in the ongoing development. For example take a look at thematic_content() in Thematic's current release you'll see that your auotp'd excerpt function is not needed anymore.
Yes, if you look at the Google Code site you'll see that Chris and I are making the bulk of the commits of late. That is the best place to report bugs and contribute patches. All you need is a gmail or google account to join in.
Also feel free to drop in to the development section of the forums and discuss or start a new thread. Sometimes life gets in the way of my attention to this project and an email reminder can be helpful.
I'd love to see you get more involved. Let me know if there's anything I can do to help or answer any questions.
New contributions and more involvement are always welcome :)
Cheers,
Gene
I just wanted to say thank you for some wonderful tips!
wlanni
Member
I am seeing other folks getting their home link issue fixed, and I'm mystified as to what is going on here for me. I'm trying to use my blog page as my home page, not a static 'page' as home.
Thematic 0.9.7.7
I copied/pasted the above code, solely changing the name of the function
function staytuned_menu_args($args) {
$args = array(
'show_home' => 'Home',
'sort_column' => 'menu_order',
'menu_class' => 'menu',
'echo' => false
);
return $args;
}
add_filter('wp_page_menu_args','staytuned_menu_args', 20);What am I doing wrong? Argh going nuts!
wlanni,
'echo' => true
;)
iCristiano
Member
Hi Helga and friends!
I have another "menu question"! I´m using your codes to use "Wordpress 3.0 Menus for Thematic 0.9.7.4"...
In this menu I have some WP Pages, and one customized link to a Post Type Archive page (using the Custom Post Type Archives Plugin to generate this archive page).
The problem is that all the Pages have its .current_page_item class working well, so I have the
<li> diferent styled when the user is at the Home page or at any other page. But the customized link to a Post Type Archive page doesn´t have the .current_page_item class working well...
I tryed to use this code on the "label" of the menu item, but it breaks the html:
<span class="<?php if ( is_post_type_archive('archive_page') ) { ?>current-menu-item current_page_item<?php } else {} ?>">Archive_Page</span>Any help?? Thanks!!
Have you tried doing it through a body class?
joperron - I've seen this mentioned a few times "use the body class." Can you point those of us that don't yet understand how to use the body class to manipulate "current-menu-item" states to a resource that explains the process?
snackmaster
Member
I suspect Juan Valdez over Jose Quervo. What a thread.
Being a Mezcal drinker... I'm stuck on #1
I would like to move #access inside of #branding, not above or below it. Is this possible or do I need to remove #access and then build my own menu?
Hey, WordPress generates a bunch of classes for the body tag depending where you are on the site. For example:
<body class="wordpress blogid-1 y2010 m11 d12 h15 home singular slug-home page pageid-28 page-author-admin page-comments-open page-pings-open page-template page-template-front-php mac chrome ch7-0">
You could for example add this to your stylesheet to change the color of a specific menu item if you are the page above:
.pageid-28 .menu-item-41 {
background: black;
}
Cheers
nope- no juan valdez. can't stand coffee.
but of course it is possible and the "how to" is already covered in the original posts, b/c it is exactly the same as moving it above(or below) the header.. except that you need to move it to a different priority (number) in the thematic_header.
taking a look at :
http://www.bluemandala.com/thematic/thematic-structure.html
you will see that priority 6 is empty and occurs before the close of branding... so putting the thematic_access on that number would achieve your goal.
argh this list isnt closing
snackmaster
Member
Thanks htv, the priority (number) was it. trying to balance the CSS payout and WP/Thematic framework at the same time hurts a little. Your patience greatly appreciated!
Here's the result, exactly what I wanted!
http://i.imgur.com/gw1XV.jpg
To move the Navigation to the right of my custom placed Logo (Wizards method) and not overlap my searchbox on the same "row" I moved access to priority of "6", restyled #access for positioning, removed overflow (was causing a horizontal scrollbar once inside the Branding DIV), and set #searchform z-index to 1000 to place it above #access so text can be entered (could also have set a fixed width on #access):
// Remove the standard Thematic menu
function remove_menu() {
remove_action('thematic_header','thematic_access',9);
}
add_action('init', 'remove_menu');
// Moving the thematic menu above the header
add_action('thematic_header','thematic_access',6);
#access {
margin:36px 0 0 170px;
padding:0;
border:none;
overflow:hidden;
}
#branding #searchform {
position:absolute;
top:80px;
right:0;
z-index:1000;
}
iCristiano
Member
@joperron Perfect! That works fine! Thanks!
rekopacz
Member
This is an awesome post, helped me with formatting my dropdowns, which (I know you're expecting this) work in every browser EXCEPT (drumroll please) IE 8. I have comparative images, but cannot attach them. basically, The IE 8 loses the font color. the background color, and I can see spaces horizontally between the li elements in that dropdown list. I don't know if others have had this problem but if you could point me to something.
I also had to disable the JS dropdown filter because IE was reporting errors. The filter I used came from this post:
http://themeshaper.com/thematic-09-released/
Here is my CSS for the drop down, which I modified from the kaleidoscopic one posted above :-)!
/*** COLOR SKIN FOR DROPDOWN NAVIGATION ***/
/* main ul element */
.sf-menu {
/*border-right: 1px solid FUCHSIA; */
float:left;
}
/* general link styles*/
.sf-menu a {
display: block;
padding:9px 13px;
text-decoration:none;
border-top: 1px solid;
border-left: 1px solid;
border-bottom: 1px solid;
}
/*** 1st Level ***/
/* 1st level links, no hover, no visits */
.sf-menu li a {
color: yellow;
/* background-color: green; */
border-color: red;
}
/* 1st level links, while hovering over sub menu */
.sf-menu li.sfHover a{
color: black;
background-color: /*silver*/ #dedefc;
}
/* 1st level links, hover */
.sf-menu li a:hover {
color: /*white*/ #993333;
background-color: /*lime*/ #dedefc;
}
/* 1st level current page */
.sf-menu .current_page_item a,
.sf-menu .current_page_ancestor a,
.sf-menu .current_page_parent a {
border-bottom-color: white;
background-color: /*TEAL*/ #dedefc;
color: #993333;
}
/* 1st level down triangles with pure css*/
.sf-menu li .sf-sub-indicator {
text-indent:-9999px;
line-height: 0;
border-color:/*YELLOW*/ white transparent transparent;
border-style:solid;
border-width:4px; /*controls size of triangle */
display:inline-block;
margin-left:5px;
}
/*** 2nd level ***/
/* sub menu */
.sf-menu ul {
border-right:1px solid;
border-bottom:1px solid;
border-color: yellow;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
top:32px; /* overriding essential styles- adjust if you have gaps between first level and drop-down sub menu*/
}
.sf-menu ul ul {
margin-top:0; /*unlikely to need adjusting */
}
/* 2nd level links, no hover */
.sf-menu li li a, .sf-menu li.sfHover li a {
color: /*orange*/ navy;
background-color: /*blue*/ #dedefc;
border-color: green;
border-bottom: 1px dotted navy;
}
/* 2nd level links, while hovering over sub menu */
.sf-menu li li.sfHover a{
color: black;
background-color: silver;
}
/* 2nd level links, hover */
.sf-menu li li a:hover, .sf-menu li.sfHover li a:hover {
color: /*white*/ navy;
background-color: /*aqua*/ white;
}
/* 2nd level current page */
.sf-menu li li.current_page_item a,
.sf-menu li li.current_page_ancestor a,
.sf-menu li li.current_page_parent a {
background-color: /*TEAL*/ white;
}
/* 2nd level side triangles with pure CSS */
.sf-menu li li .sf-sub-indicator { /*right arrow*/
border-color: transparent transparent transparent WHITE;
}
/*** 3rd Level and beyond ***/
/* 3rd level links, no hover */
.sf-menu li li li a, .sf-menu li.sfHover li li a {
color: blue;
background-color: red;
border-color: blue;
}
/* 3rd level links, hover */
.sf-menu li li li a:hover, .sf-menu li.sfHover li li a:hover {
color: white;
background-color: pink;
}
/* 2nd level current page */
.sf-menu li li li.current_page_item a,
.sf-menu li li li.current_page_ancestor a,
.sf-menu li li li.current_page_parent a {
background-color: TEAL;
}
Not sure if anyone has had a similar problem or can help, but I would appreciate it as this site is ready for the client and I need to get it out in a few days.
Thank you!
John
Member
Thanks Helga. I used to use Superfish before I switched to Thematic and knew the arrow thing existed.
Just couldn't figure out why the arrow class wasn't showing in Thematic.
Beautiful!!!
@rekopacz- do you have a link? ie8 i thought was mostly standards compliant so i dont know what is going on off the top of my head?
@john- you're welcome!
callistabr
Member
Thank you for this thread. I have no problem customizing the appearance such as colors, borders, etc. But anywhere I try to indicate what font I want to use gets completely ignored! It doesn't even show up in firebug. It always reverts back to what I've used in the body. It doesn't matter where I put it in the #access, or in the .sf-menu, it just disappears completely and is completely overridden somewhere by something. Even when I try adding a font: attribute in firebug it just disappears so I'm completely at a loss as to where to put the font styling so it will be accepted. I'm using Wordpress 3.0 and one custom Wordpress menu and Thematic 0.9.7.7 with a child theme.
waxpop
Member
I love this menu! Thanks so much, Helga.
ONE issue is cropping up for me. The menu buttons are anchored to a particular spot on my site while the rest of my content floats in the center no matter the browser width. Plus I now have horizontal scrolling on my browser (checked in Firefox and Safari) where there was none before. What can I do to make the menu centered like the rest of my page? (I'm referring to the "What Is This?", "Contact," "Thanks" and "Help Out" buttons.)
http://www.herfiveyeardiary.com
Thanks!
waxpop
Member
Forget it - I fixed it with some simple CSS. Thanks again for this great menu option!
waxpop
Member
I'm doing some cross-browser checking and for some reason in a very few browsers my menu is doubling up on the first menu option. See this browser shot from browsershots.org: http://tinyurl.com/2coqu3e (What Is This? should only be showing up once.)
So far it seems to be happening in Firefox 4.0 Windows 2000, Firefox 4.0 Ubuntu 8.04 LTS, Chrome 8.0.552.224 Ubuntu 9.10, Chrome 7.0.517.43 Arch, and Chrome on some Windows systems.
I can't find anything in the code that would lead this to happen. That first li is mentioned only once in the code.
// My custom menu
function custom_childtheme_access(){?>
<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content','thematic');?>"><?php _e('Skip to content','thematic');?></div>
<div class="menu">
<ul class="menu">
<li class="tab tab-1"><a href="http://www.herfiveyeardiary.com/index.php/whatisthis/">What Is This?</a></li>
<li class="tab tab-2"><a href="http://www.herfiveyeardiary.com/index.php/contact/">Contact</a></li>
<li class="tab tab-3"><a href="http://www.herfiveyeardiary.com/index.php/thanks/">Thanks</a></li>
<li class="tab tab-4"><a href="http://www.herfiveyeardiary.com/index.php/help-out/">Help Out</a></li>
</ul>
</div><!-- #menu -->
</div><!-- #access -->Any ideas on how I can go about fixing it? (Sorry for three posts in a row. Ugh.) Again, my url is http://www.herfiveyeardiary.com.
waxpop
Member
And here's my css:
/*** IMAGE MENU BY SARA ***/
.menu {
margin: 0 0 0 120px;
}
.menu li {
display: inline;
}
.menu li a {
text-indent: -99999px;
float: left;
margin-top: 15px;
}
.menu li.tab-1 a {
height: 50px;
background: url(images/whatisthis_button.png) no-repeat scroll 0 0;
width: 150px;
}
.menu li.tab-1 a:hover {
background: url(images/whatisthis_button_over.png) no-repeat scroll 0 0;
}
.menu li.tab-2 a {
width: 120px;
height: 50px;
background: url(images/contact_button.png) no-repeat scroll 0 0;
}
.menu li.tab-2 a:hover {
background: url(images/contact_button_over.png) no-repeat scroll 0 0;
}
.menu li.tab-3 a {
background: url(images/thanks_button.png) no-repeat scroll 0 0;
height: 50px;
width: 120px;
}
.menu li.tab-3 a:hover {
background: url(images/thanks_button_over.png) no-repeat scroll 0 0;
}
.menu li.tab-4 a {
background: url(images/helpout_button.png) no-repeat scroll 0 0;
height: 50px;
width: 120px;
}
.menu li.tab-4 a:hover {
background: url(images/helpout_button_over.png) no-repeat scroll 0 0;
}I've also noticed on some of the screencaps that part of my background image is being covered up for some reason. Seems to be happening on Safari and Chrome, mostly. Don't know if it's connected to this menu issue or something else. Screenshot: http://tinyurl.com/23ub38m
waxpop
Member
Just in case anyone else runs into this issue, I had a friend help me out with the solution. There's a missing closing 'a' tag in there. So for menu #9 on the previous page, instead of:
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content','thematic');?>"><?php _e('Skip to content','thematic');?></div>
it should be:
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content','thematic');?>"><?php _e('Skip to content','thematic');?></a></div>
That has solved the problem for me.
callistabr
Member
Hi everyone! Any ideas on my font issue? Please? I'm sure it's something so simple that I'm missing here.
Thanks!
you probably would have had better success opening your own thread to ask a question. to answer- if things aren't working in CSS then you are either using the wrong css and/or the wrong selectors (often not specific enough if you are getting overridden by something else)
this changes the menu items to arial
.sf-menu a {
font-family: Arial,sans-serif;
}i was also able to get it to work with just
.menu a{
font-family: Arial,sans-serif;
}or .sf-menu or #access or whatever, which makes me think you weren't using font-family as the proper css rule
callistabr
Member
@helgatheviking - thank you so much, that did the trick! I guess I just didn't know which selector to use. :)
Absolutely awesome post. Thanks for the help!
Regarding #3, I am using 0.9.7.7, and I added the following to my child theme.
// change Thematic #access menu for a Wordpress 3.0 menu
function child_access_menu() {
$menu_sys = 'wp_nav_menu';
return $menu_sys;
}
add_filter('thematic_menu_type', 'child_access_menu');No change to the page-based sf-menus.
So I downloaded and replaced 0.9.7.7 with development 0.9.8, and the sf styling for my menus went away completely (only raw unordered lists), even when I removed the above function.
No caching. Reloaded the pages. Saw this in three different sites within multisite.
Are there other, more up-to-date instructions I need to follow?
[Additional info: http://themeshaper.com/forums/topic/thematic-0976-is-online-important-release-notes#post-16263]
i'm fairly certain #3 is outdated now (circa 0.9.7.7). if you put a custom menu in the Primary Menu Location (under Menus) then Thematic will automatically use that. If no menu is found then it falls back to wp_page_menu, there is no longer a need to tell your child theme to enable the wp_nav_menu.
as for your lack of styling... do you have other functions filtering the menu arguments?
Yes, you may disregard my earlier post. Some time back, I did, indeed, create an access menu filter, so of course the generic filter won't work.
Here's the relevant code.
<?php echo thematic_add_menuclass(wp_page_menu('sort_column=menu_order')) ?>Should I now echo something else?
UPDATE:
I just found this!: http://codex.wordpress.org/Function_Reference/wp_nav_menu
I changed my code to this:
<?php echo thematic_add_menuclass(wp_nav_menu('')) ?>Everything is working perfectly -- legacy menus fall back to page-menu and when a primary menu is set, it appears! -- except for the styling on the custom menus.
Do I need to add a container to match the original Thematic SF styling?
UPDATE 2:
Are these the arguments I need to add?
'menu_class' => 'sf-menu', //default class that will apply default styles
'container_class' => 'menu', //default classIf so, how to I add multiple arguments to the echo statement?
TIA! This thread (and Thematic) are great! I can do anything ... even with little PHP knowledge ... and only get in minor trouble.
This topic has been closed to new replies.