With the 1.6 version of WPFolio I added a drop down menu bar. The default hover and background styles are shades of grey. The background colors in the navigation menu can be changed using your child theme the code snippet below.
WPFolio version 1.6 includes a sample child theme for adding your own modifications. These modifications stay separate from WPFolio so you can update and keep your tweaks.
The code below should help you get started. Add a color value after “background:” and before the semicolon. You can use hex values (or rgba if you care to be so bold).
Loading ...
15 Comments
I would be nice to tell people that the BACKGROUND COLORS for the Superfish menu is set in the option_stylesheet.php so they don’t spend hours of tweaking and headbanging trying to figure out why the above instructions have ABSOLUTELY NO EFFECT WHATSOEVER.
/rant.
If you put your changes in the childtheme, they should work. Can you confirm that you were using the childtheme, had it activated, and had your changes in the style.css of that child theme?
hey, how can you change the width of the drop down menus so that it is as wide as the longest menu item? My text is running off the edge and can’t see anything in styles.css that allows for adjustment.
Post on the wordpress forums. And what’s used is called a “superfish menu”
How do I change the font and background color of the main navigation menu? right now the default is grey, and with a grey box when rolled over, I would like it to be black (with no grey box) when rolled over.
I tried using the code posted here but it didn’t work, where it is suppose to be inserted in the child theme: function.php? style.css?
The code goes in style.css. Post this on the WP support forums.
First off, thank you guys for this amazing theme; it’s helped me make my very first website look amazing!
I can confirm that the code posted in the post doesn’t work for me; I only get a single bit of difference when I change the second ‘background’ colour, and that changes the colour of the box when it’s highlighted. Changing the other background values does nothing.
Any advice?
Ah, you are right! This should fix it and will be included in the next release of WPFolio.
In header.php find these 2 lines at line #38:
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" /><link href="<?php echo home_url();?>/?wp_folio_css=css" rel="stylesheet" type="text/css" />
and reverse them like so:
<link href="<?php echo home_url();?>/?wp_folio_css=css" rel="stylesheet" type="text/css" /><link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
This makes your childtheme stylesheet trump the theme options stylesheet.
Thanks for the quick reply Steve!
I put that code into the header.php like you suggested, but now, it seems like the ‘Theme Options’ that you can alter within WordPress don’t work anymore; the page container colour has gone, the blog title appears, the fonts aren’t the ones I selected etc.
I then replaced it with with the first 2 lines of code in your reply, expecting it to return to normal, and it all still looks broken! What have I done wrong?
Sorry for the double post, but I figured out what was wrong with the code when I tried to go back to the original style; there’s an extra ‘href=’ in the second line. Getting rid of that returns things to normal!
So, the only problem now is that the new piece of code stops the use of the ‘Theme Options’. Do I now need to set the options within the child style sheet?
Oh sorry, the comments form stripped the code so then I had to fix some stuff by hand. I committed the change so you can verify it on line 38 of the code.
All that change should do is place priority on the childtheme stylesheet. Your theme options should still work, but the childtheme will always override them. There’s a chance that link came out wrong too, so double check the code.
I tested this myself and it worked for me. Sorry you’re sort of a guinea pig on this, but if you could test it further it would help. Make sure that code is right, verify you’re not overriding in the stylesheet what you want to change in the theme options, and try again and let me know.
Right! Progress!
The code works, up to a point. Changing the background values for the menu now works, EXCEPT for the first one. I assume the 2nd background colour denotes what colour the menu will be when highlighted, and the 3rd background colour denote what colour the menu will be when it is not highlighted.
However, because the first background colour doesn’t change anything, I’m not sure what it’s supposed to do; change the actual background colour of the menu ‘tabs’ themselves?
Also, the menu itself has an odd outline (exact same colour as my background) on the left and the top of each selection. Any way to change this?
Thanks Steve! Keep up the good work!
Ah, again, sorry for the double post!
The first background colour DOES change something; if you go to a page/post straight from the main menu, and not through sub-menus, the menu item will be highlighted, and this dictates what colour that will be.
that’s the “active” page in the menu. So if you are on the “about” page, then “about” will be highlighted in the menu.
The code above is meant to be a starting point (I’ll edit the post and mention that). So by all means, modify it to suit your purposes. The outline you mention is just a border, which you can also add css to change or remove. Looks like you’re on your way!