So, I have solved most of my issue. I found out how to pass the arguments through an array into the wp_nav_menu:
<?php echo thematic_add_menuclass(wp_nav_menu(array(
'menu_class' => 'sf-menu',
'container_class' => 'menu',
) )) ?>Last question: my child menus aren't being styled correctly, so I'll need to fix my CSS.
This thread was very useful!
With wp_page_menu, the child menu lists contained the class "children."
However, with the new wp_nav_menu, the child menus have the class "sub-menu" and there is no way to change the submenu class by passing an array argument. So the drop-downs are styled incorrectly.
So, in my child theme CSS, I changed this ...
.sf-menu ul.children li a... to this ...
.sf-menu ul.children li a, .sf-menu ul.sub-menu li aAll is good. Thematic rules. (Helga rules, too.)
Hi! I am attemping to style the .sf-menu on my child theme.
I have a question.
Look at the border-color:Yellow transparent transparent; line.
Is the double transparent needed? Or is it a typo?
6. Styling the Beast
/* 1st level down triangles with pure css*/
.sf-menu li .sf-sub-indicator {
text-indent:-9999px;
line-height: 0;
border-color:YELLOW transparent transparent;
border-style:solid;
border-width:4px; /*controls size of triangle */
display:inline-block;
margin-left:5px;
}no idea- why don't you try it and report back? i did discover that you need to a width:0 to make them look right in Chrome.
sooraw
Member
Thank you, very useful
Question: how can I add an image as a separator between every menu item?
not sure. i'd guess either list-style-image in css or maybe through a custom walker
paaljoachim
Member
Could someone create a tutorial on this great info?
I become somewhat overwhelmed by all the info.
I need to make a menu vertical. Have I overlooked the info for it?
How can I make the menu vertical so it looks like the menu on this page?:
http://myactingportfolio.com/images.html
Thank you for any feedback!
ummmm.... this IS the tutorial. vertical menus are not included b/c i do not know how to do that. i'd suggest creating your own thread. if you find the solution it might be nice to add to this.
a little bit of digging reveals:
http://themeshaper.com/forums/topic/going-vertical-with-wp3-menus-enabled#post-13970
and:
http://users.tpg.com.au/j_birch/plugins/superfish/#sample3
paaljoachim
Member
Thanks for your awesome help here on the forums Helga! I apologize for my overeagerness.
I have found a solution to creating a vertical menu (with help from searching the forums, things you have posted, and tips from Eric.) Here is my mini tutorial.
Changing menu from horizontal to vertical.
The first thing I did was remove the access div which contains the menu from the header area.
I wanted to place it as close as possible to the content area to be sure that they line up best possible (or so I believe).
I used what is called a Hook (there are many different sections on a page and each of them have a name). A hook is the broad term for a section.
step 1
In functions.php (in the child theme) close to the bottom I added these lines:
// define function, start with removing the access div
function childtheme_remove_access(){
remove_action('thematic_header','thematic_access',9);
}
add_action('init','childtheme_remove_access');// and then add the access div to the hook (area) you want
add_action('thematic_abovecontent','thematic_access',9);
Just a few thoughts as to what is going on:
in thematic_ header we remove thematic_access
add action - initialize that we have removed the access area
add action - in thematic_abovecontent we place thematic_access
the number 9 is a code that belongs with thematic_access
Doing the above results in some very minor visible changes.
step 2
I adjusted the style.css file. (as in I have copied in the default.css from the parent theme into the child theme style.css)
li is the links list and how they stack up nicely to each other with the float left.
Original:
.sf-menu li {
float: left;
position: relative;
}
My adjustments.
Commented out float left. I use comments a lot since I can hide the code without having to delete it.
The list/links will now stack on top of each other into a vertical links list.
.sf-menu li {
/* float: left; */
position: relative;
}
step 3
This is where the work really begins.
In continuing adjusting the style.css
Original:
#access {
height:32px;
font-size:13px;
overflow:visible; /* making the various links visible, if removed only the top or left link will be visible */
z-index:100;
}
My adjustments: I would suggest adding a temporary background color to make things visible.
My comments next to the code.
#access {
height:10px; /* content will go up or down in relation to the height of access */
font-size:16px; /* bigger font */
overflow:visible; /* making the various links visible, if removed only the top or left link will be visible */
z-index:100; /* stacking order a 100 makes it sure that the menu will stay on top of other tags */
background: green; /* temporary color to make things visible */
}
Original:
/*** THEMATIC SKIN ***/
.sf-menu {
border-right:1px solid #ccc;
float:left;
}
My adjustment:
My comments next to the code.
sf-menu {
/* border-right:1px solid #ccc; */ /* On the right side of the menu is a solid grey line 1 pixel thick. */
float:left;
}
a is for active, meaning links.
Original:
.sf-menu a {
border-left:1px solid #ccc;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:9px 13px;
text-decoration:none;
}
My adjustments:
Comments next to the code.
/* - Comment can begin one line and end */ at another line as in my example at the beginning of .st-menu a.
.sf-menu a {
/* border-left:1px solid #ccc;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:9px 13px;*/text-decoration:none; /* meaning no dot or any other symbol next to the links.*/
padding: 0.5em 1.3em 0.8em 1.3em; /* creates some space around each link.*/
letter-spacing: 0.1em; /* space between each letter.*/
text-align: center; /* text centered.*/text-shadow:#fff 0px 1px 20px; /* a white #fff shadow behind the text. */
-webkit-border-radius: 9px; /*how the corner curves */
-moz-border-radius: 9px; /*how the corner curves */
border-radius: 9px; /*how the corner curves */-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /*shadow 0 = distance to the right, 2 = distance down, 4 = softness */
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);; /*shadow 0 = distance to the right, 2 = distance down, 4 = softness */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);; /* shadow 0 = distance to the right, 2 = distance down, 4 = softness */background-color: #761716; /* red */
}
Next adjustment. This time in the hover/mouseover effects.
Original:
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #fafafa;
outline: 0;
border-bottom-color:#ccc;
}
My adjustments:
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #fafafa;
outline: 0;
/* border-bottom-color:#ccc; */color: #761716; /* red */
text-shadow:#fff 1px 1px 4px;-webkit-border-radius: 9px; /* how the corner curves */
-moz-border-radius: 9px; /* how the corner curves */
border-radius: 9px; /* how the corner curves */-moz-transition: 0.2s color linear; /* soft transition in color */
-webkit-transition: 0.2s color linear; /* soft transition in color */
transition: 0.2s color linear; /* soft transition in color */}
Original (I believe):
.sf-menu .current_page_item a,
.sf-menu .current_page_ancestor a,
.sf-menu .current_page_parent a {
border-bottom-color:#fff;
My Adjustment:
.sf-menu .current_page_item a,
.sf-menu .current_page_ancestor a,
.sf-menu .current_page_parent a {
/* border-bottom-color:#fff;*/font: bold 14px/1.2 Book Antiqua, Palatino Linotype, Georgia, serif; /* font with bold using Antiqua etc. */
display: block; /* display block is used to show an area. */
text-align: center;
letter-spacing: 0.2em;
padding: 1.3em 0.5em 0.8em 0em; /* Size of each link */
background-color: #fff;
color: #761716; /* font color */
text-shadow:#fff 1px 1px 4px;
}
The above were the major things that I changed. One should get far by adjusting those sections. Have a great day!
HTV thank you so much as always. This css solution by wlanni to center the menus should also be included in this topic? http://themeshaper.com/forums/topic/how-to-center-the-menu-in-09
suta
Member
Hello everybody,
this is another cry for help.
I am using Wordpress 3.1.1 and thematic 9.7.7
My issue:
I have a dropdown sf-navigation main-menu(pages) which works fine. Now I want to add another menu in the footer. I already created a new footermenu with included pages which also works BUT: I don't know where to exclude pages. Every page displays in the main-menu, these of the footer-menu as well.
If I make my main-menu a primary menu, all pages including the childpages are displayed in the main-menu bar.
Exclude Pages - Plugin doesn't work either, as it doesn't take into account the different menus, so that my footermenu-pages are excluded from everywhere.
wp_list_pages (exclude...) works usually fine on many other themes, but I can not find the thematic-file where to put it.
Anyone can help?
Thanks in Advance
middlesister
Member
@suta: I think you would be better off to start a new thread with your problem. Describe how you created your footermenu, how things are working now (or not) and what you want to achieve instead. This thread is used a lot as a reference and not the best place to ask questions. :)
I have been having trouble with the code to create two side bars, I have tried it with and without the first block to change from Thematic to WP 3.0.
Not sure what I am doing wrong here, but I am still completely new to this framework (I am a former Thesis user, looking for something a little more barebones for a more effecient site!)
// 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');
// Register the new menus
function register_my_menus() {
register_nav_menus(
array(
'primary-menu' => __( 'Primary Menu' ),
'top-menu' => __( 'Top Menu' ),
'main-menu' => __( 'Main Menu')
)
);
}
add_action( 'init', 'register_my_menus' );
function top_menu() {
if ( has_nav_menu( 'top-menu' ) ) {
wp_nav_menu( array( 'theme_location' => 'top-menu',
'container_id'=>'top-menu',
'container_class' => 'clearfix ',
'menu_class' => 'sf-menu',
) );
}
}
add_action('thematic_aboveheader','top_menu');
function main_menu() {
if ( has_nav_menu( 'main-menu' ) ) {
wp_nav_menu( array( 'theme_location' => 'main-menu',
'container_id'=>'main-menu',
'container_class' => 'clearfix ',
'menu_class' => 'sf-menu',
) );
}
}
add_action('thematic_header','main_menu');
Hi everybody! I am brand new to this, but damn determined to learn! I am using Thematic 0.9.7.7. I want my blog post page to be my "Home" page and to have a "Home" button to click on so that when someone navigates away from that page they can click on the "Home" tab and get back there. I cannot for the life of me figure out how to do that. Can someone walk me (step by step) how to do that? All of this code is Greek to me. I would be more than willing to spend my dime to get on the phone with someone that can help me with this.
your latest posts should be your home page by default. also if you do not create a custom 3.0-style menu then WP will create a page menu by default.. to which you can add a home link, w/ my instructions from page 1 of this thread.
so re-read that. update yourself to thematic 0.9.8
developing.thematic4you.com/thematic-development-release/
and if you are still having issues please start a new thread.
Helga, I downloaded the latest dev version, which claims to be 0.9.7.8, not 0.9.8. Am I missing something?
hmm... i've noticed that it is still 0.9.7.8 in the style.css as well. so either someone forgot to update the style.css (most likely i think), chris' site, t4y, is wrong (this seems the least likely) or i am just flinging around version numbers w/o knowing what i'm talking about (possible)
Woooow man. This is just awesome. You should have a site to post tutorials if you plan on doing this more. I have a thematic category in my blog, if you ever want to guest post there, i would be more than thrilled. I don't get crazy traffic, but maybe with you, I would. hahah
lol. well i've been meaning to get said site up for a year now. ooops. it should also be my portfolio site, but every time i get 3 weeks into it, i decide it is ugly and quit. i've gone through 3 iterations now, bailed on them all and have just been swamped w/ client work.
Mactonex
Member
Hi,
thanks for this great post, very helpful. I'm still having trouble getting the level 1 text to change colour. It's kind of a grey colour at them moment and I need it to be white but I can't find which style does it. Any help would be much appreciated.
New here...want to start by saying thanks! Ian, this is a great piece of work and thanks so much to the others that contribute to this forum...your posted advice has really helped me! Thanks again all.
Now on to my question...I can't quite seem to style the Superfish menu the way I want (I'm trying to use transparent png's on the sub menu backgrounds...but no matter what I do, there seems to be a white background still underneath). Helga's information here has helped a lot...but can't get the menu to work.
So I want to switch back to the 3.0 menu (because I did get my styling to work there). But I can't seem to switch the menu using
// 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');
I've checked that the version of thematic I have is 0.9.8 so I think, according to the info here, that I should be able to simply switch by adding the above code to my functions...but to no avail. Any idea where I am going wrong here?
if you are using 0.9.8 you don't need that bit of code anymore. if you are in the WP dashboard and you define a menu and put it in the "primary" location then you'll get the 3.0 menu automatically. if you don't have one defined then it falls back to wp_page_menu
petergus
Member
Re 8. Adding those sub indicator arrows
ive been playing around with it but dont get how the calls are layed out...
would like to be able to put the sub indicator arrows *only* on child items, level 2 and 3 etc. not at the top level.
any ideas?
petergus
Member
got it by doing this (if theres a better way would love to hear!)
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("ul.sf-menu").supersubs({
minWidth: 12, // minimum width of sub-menus in em units
maxWidth: 27, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).superfish({
delay: 50, // delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'fast', // faster animation speed
autoArrows: false, // disable generation of arrow mark-up
dropShadows: true // disable drop shadows
});
});
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("ul.sf-menu .sub-menu").supersubs({
minWidth: 12, // minimum width of sub-menus in em units
maxWidth: 27, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).superfish({
delay: 50, // delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'fast', // faster animation speed
autoArrows: true, // disable generation of arrow mark-up
dropShadows: true // disable drop shadows
});
});
petergus
Member
this probably falls under CSS , but i would like to be able to apply a class to ...' aunt and uncle' items?! so when im on item 2 sub-menu, item 1 will change color.
cant really think of a logical way to call that... other then vaguely, maby apply a class to the whole root UL but another to the parent? would another way because that seems to buggy.
ricemaster
Member
Still can't get the Home menu to work, can anyone help me ?
My website is at: http://www.freedom2change.com/wordpress/
From this thread I added to functions.php:
// 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');
// Adds a home link to your menu in Thematic 0.9.7.4
function childtheme_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','childtheme_menu_args');
I am using Wordpress 3.0 Thematic 0.9.7.7
but the 'HOME' does not work -
If you move to any menu option and then go back to 'HOME' it links to http://www.freedom2change.com/wordpress/?page_id=121
instead of to
http://www.freedom2change.com/wordpress
I know I can solve this with manually defining all the menu items but first of all that that seems like the wrong solution to go through all this just for the Home menu and secondly it messes the CSS styles of that menu item.
I don't understand why is this so difficult ? am I missing the obvious ?
Is there a simple way to either link only the home directly to http://www.freedom2change.com/wordpress or change the permalink of only the home page to http://www.freedom2change.com/wordpress ?
Thank you
Micha
"I don't understand why is this so difficult ? am I missing the obvious ?"
ummm yes?
1. you are using an outdated version of thematic.
get the latest stable dev release. alot of issues were fixed in 0.9.8
http://developing.thematic4you.com/thematic-development-release/
2. you are attempting w/ your first bit of code to change to wp_nav_menu (wp's new custom menu) and then in your 2nd bit of code you are filtering the arguments for wp_page_menu which is a totally different entity
3. in version 0.9.8 the first bit of code is no longer necessary. 3.0-style menus are the default if you create a menu and set it in the primary position in the backend. if not, then thematic falls back to wp_page_menu()
ricemaster
Member
Thank you Helga ! but I still can't get this to work :(
I updated to the Thematic version you recommended. It shows in WordPress as 0.9.7.8 and not 0.9.8, I hope that's OK.
I don't have a wordpress menu defined, and as far as I can see I don't need one.
I deleted the first bit of code.
If I delete the second bit of code as well, I'm back to the original problem, that is the HOME menu option is not linked to my blog page (http://www.freedom2change.com/wordpress)
If I add the second bit of code:
// Adds a home link to your menu
// http://codex.wordpress.org/Template_Tags/wp_page_menu
function childtheme_menu_args($args) {
$args = array(
'show_home' => 'Home',
'sort_column' => 'menu_order',
'menu_class' => 'menu',
'echo' => true
);
return $args;
}
add_filter('wp_page_menu_args','childtheme_menu_args');
I get the horrible result you can see in http://www.freedom2change.com/wordpress/
(medssed up vertical menu with two HOME options !)
What am I doing wrong ? all I need is the Home menu option to link to my blog page
Thank you for helping
yeah that's fine. i think the stylesheet has the outdated version number so that when the dev release becomes the official release it will update in the WP repos.
try removing 'echo'=>true
or switching it to 'echo'=>false
i think i covered that in the original post as there was a change in the way thematic approached this way back when
regarding your 2 home links... you must have 1 page set as home in your reading options, and then you must have another page titled home under pages. remember that wp_page_menu pulls ALL your pages into a menu, unless you specifically exclude them in the menu args. big part of why i prefer the 3.0-style custom menus anyway
ricemaster
Member
Thx Helga,
So setting the 'echo' to false fixed the display.
I am still left with the double HOME problem, under reading options I have 'Front page displays - your latest posts', I also tried to play with other combinations of front page and posts page but no luck.
How can I solve the two HOME page problem ?
Thank you !
This topic has been closed to new replies.