Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

Style the New WordPress Menus


  #1  
Old Nov 20, 2011, 12:57 PM
mimi's Avatar
mimi
 
70 posts · Feb 2009
over there...
Lightbulb Style the New WordPress Menus

This extra CSS will help you styling the new WordPress Menus aka "custom menus", most exactly, it fixes a problem highlighted below*.

1st go to > Appearance > Menus and create a Menu...

The great advantage of the new WordPress Menu is that you can have say; Menu 1 showing Pages AND Categories, Posts etc... You can mix and match and re-order via simple drag and drop, ALL showing in a single Bar/Menu! Amazing. I only discovered this by accident a couple of days ago, when I was seriously considering using a different theme and dropping Atahualpa for good.

To set up sub pages, simply drag the "child" below the parent slightly to the right (there are quite a few videos out there on the subject, showing you how to create and setup menus).

*Problem: if you use sub pages, and the parent is selected, the child/sub page(s) are also "visually" selected, in short, the original styling does not work anymore.

I Googled a lot, and spent some time trying different things, and I ended up with something that work with the theme.
For those interested, this post clearly explains the problem.


Here is the code to put in your Atahualpa theme's CSS Inserts:

Code:
/*----------WordPress Menu----------*/
#menu1 .current-menu-item li a:first-child { 
color: #your_color !important;
background: #your_color !important;
}
#menu1 .current-menu-item li a:hover { 
color: #your_color !important;
background: #your_color !important;
}
/*----------END----------*/
Change the "your_color" to match the colors you are using in your theme > Menu 1 (Page Menu).

I created this post for two reasons:

1) to help some of you, who might want to try the WordPress Menu, and most importantly, to avoid you the headache, especially when more experienced people are not willing to help. I am NOT a coder and will probably never be one, but at least I managed to come up with something that seems to be working.

2) hopefully, some of you who are more experienced with CSS, can improve the code and/or offer suggestions + valuable input. It would be a shame to not take advantage of this great built in feature; the WordPress Menus.
  #2  
Old Nov 21, 2011, 04:15 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
It's nice to see you trying to give to the community for a change. However, this code has some issues. If I add this to the CSS Inserts of a vanilla Atahualpa site

/*----------WordPress Menu----------*/
#menu1 .current-menu-item li a:first-child {
color: #00ffff !important;
background: #ff00ff !important;
}
#menu1 .current-menu-item li a:hover {
color: #ff00ffblue !important;
background: #00ffff !important;
}
/*----------END----------*/

and I have this structure

page-a
page-b
page-c
page-d
page-e
page-f
page-g
page-h

And I select page-a, it works, but when I select page-b I get a different set of hover colors (the defaults). If I select page-c, then pages d,e,and f are effected but the rest are have the default colors. This is a very odd looking menu.

So while this does affect the parent and it's children, it does not effect all the menu items which can cause teh menu to seem broken. You need to make sure the colors you pick agree with the colors that you have set in the Atahualpa pages and categories menu
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Nov 21, 2011, 07:16 PM
mimi's Avatar
mimi
 
70 posts · Feb 2009
over there...
Quote:
Originally Posted by juggledad
It's nice to see you trying to give to the community for a change.
I am offended by your comment "for a change". I really feel insulted. It's not like I haven't donated.
Please read the following:

Donate $20 or more to become a Gold or Diamond member for additional benefits such as extra styles and tutorials and preferred attention from developers and moderators.

Your replies to me have been: google it, do a search and blah blah... you even deleted some of my posts, and now you are insulting me in public.

I know you have something against me, because I gave you the answer you deserved in our PM, and you didn't like to read the truth, and I am glad to make it public. you need to mature.
So please, stop getting personal and stop bullying me. I won't tolerate this anymore.
I'd rather not hear hear from you, then the silly: do a google search.

FYI, I am NOT a moderator NOR a developer or a coder, and that's why I am using this theme, so please respect me, and don't insinuate that I am a leech. I have given, please keep such comments for those who haven't and will never do.

I am going to contact Flynn right now.

Let's move on.

Quote:
Originally Posted by juggledad
However, this code has some issues. If I add this to the CSS Inserts of a vanilla Atahualpa site

/*----------WordPress Menu----------*/
#menu1 .current-menu-item li a:first-child {
color: #00ffff !important;
background: #ff00ff !important;
}
#menu1 .current-menu-item li a:hover {
color: #ff00ffblue !important;
background: #00ffff !important;
}
/*----------END----------*/

and I have this structure

page-a
page-b
page-c
page-d
page-e
page-f
page-g
page-h

And I select page-a, it works, but when I select page-b I get a different set of hover colors (the defaults). If I select page-c, then pages d,e,and f are effected but the rest are have the default colors. This is a very odd looking menu.

So while this does affect the parent and it's children, it does not effect all the menu items which can cause teh menu to seem broken. You need to make sure the colors you pick agree with the colors that you have set in the Atahualpa pages and categories menu
Well, that's where someone like you can come into play. I am not a coder.
I offered a solution to make it work with the first child, better then nothing, or "do a Google search".

Maybe try a:second-child or something...
  #4  
Old Nov 22, 2011, 04:45 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
sorry you don't value my support, I have returned your $20 donation.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] how to style menus... derekwbeck Header configuration & styling 12 Nov 26, 2010 10:22 PM
BUGFIX 353-01: Fix styling when using the new WordPress menus juggledad Old Version fixes and change logs 13 Nov 8, 2010 02:20 AM
WordPress 3 compatibility for 'custom menus' peterluit New Versions, & Updating 8 Oct 16, 2010 03:34 PM
CSS style dropdown/flyout menus for sub-categories? phdm32009 Sidebars & Widgets 1 Aug 21, 2009 05:04 AM
CSS style dropdown/flyout menus for sub-categories? BigG Sidebars & Widgets 1 Apr 8, 2009 05:24 PM


All times are GMT -6. The time now is 03:05 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.