Colorizing Menus in (PRO).

  • Resolved MrsJessicaSimpson

    (@mrsjessicasimpson)


    8 years, 5 months ago

    Hi Ben,

    Colorizing Menus …

    Looked on your extensive tutorials, (brilliant btw) – looked here, (searched and read), but I can’t find it, and that is having a menu item on the drop down menu a different color from the rest, and perhaps a font as well? – But I might be being far too greedy in asking for that.

    My CSS coding is in its infancy, but: on the WordPress side menus, is now a new option under ‘Open link in a new tab’

    And is something called: CSS Classes (optional)
    Next to: Link Relationship (XFN), which is rather cool.
    Above :-
    Description, got that: that’s for notes.

    CSS Classes, is I suppose: to change the colors, (and fonts?) Of the menu. Now, whatever I’ve put in there thus far has:-
    1.) – Not worked, safe solution.
    2.) – Wot the blooming heck, is the site supposed to do that? – Go sideways.
    3.) – Gasp! – Fonts that wide shouldn’t exist, but mine did.

    Can you give me a heads up on what: ID? – Tag? – #? – (.)? or perhaps what CSS class will do something to change that menu color!

    They all occur somewhere around here:-

    .menu-primary-items .menu-item-has-children ul a, .menu-primary-items .menu-item-has-children ul a:link, .menu-primary-items .menu-item-has-children ul a:visited, .menu-primary-items .menu-item-has-children ul a:hover, .menu-primary-items .menu-item-has-children ul a:active, .menu-primary-items .menu-item-has-children ul a:focus {
    color: #D93;
}

    But as I say, I’m not really sure how to get into the class(?) – to get at the core of the function.
    – Well, it would be a function if it was written in ‘C’.

    As I say, not a problem, just a dumb newbie question.

    P.S.

    Saw this in the forum’s history, and I am really rather amazed at what those small lines of code could do, so I’m reinserting it here.

    .featured-image img {
  border-radius: 20px 20px 0 0;
}
.entry article {
  border-radius: 20px;
}
.entry.has-post-thumbnail article {
  border-radius: 0 0 20px 20px;
}

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    – It gives you rounded corners on all posts and pages, really rather: neat.

    To reiterate this fact: it’s not a support problem, nor a problem with the PRO upgrade, and not a problem with the PHP code (Per se), but just me being damned nosy.

    • This topic was modified 8 years, 5 months ago by bdbrown.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Ben Sibley

    (@bensibley)

    8 years, 5 months ago

    Hi Jessica,

    The CSS Classes option you found will work perfectly for this. You could add a class name called “highlight” and then add the following CSS to the Additional CSS section in the Customizer:

    .menu-primary .highlight a {
  color: red;
}

    You can name the class whatever you’d like and replace the word “highlight” in the code above (leaving the period before it).

    Thread Starter MrsJessicaSimpson

    (@mrsjessicasimpson)

    8 years, 4 months ago

    Thank you very much for that snippet.

    As a result I’ve been busy digesting that code, and then whizzing round the web matching it up: really need a good primer.

    Many thanks again.

    Case closed.

    Theme Author Ben Sibley

    (@bensibley)

    8 years, 4 months ago

    You’re welcome! Happy to help 🙂

    Thread Starter MrsJessicaSimpson

    (@mrsjessicasimpson)

    8 years, 4 months ago

    CRACKED IT.

    – How too add a blank, (un-clickable), invisible menu separator on a vertical menu: in other words, a spacer.

    { And in twelve easy steps: AA you say. }

    1.) – Goto the WordPress Customize under Appearance. 
    2.) – Find and open the [ Menus Section ].
    3.) – Move to the bottom of your Menu list: locate [ Custom Links ], – and then open it.
    4.) – In the [ Menu Widget ] you’ll find.

    URL — http://
    Link Text — [ it’s empty BTW ]

    5.) – Just put a ‘#’ in each.
    { Don’t include the quotes, just put the hash # word in. }

    6.) – Then select and click -> [ Add to Menu ].
    7.) – Move the new Menu Item to where you want it in your Menu List.
    { This will be where you want your vertical spacer to appear. }

    8.) – Open up the ‘#’ Menu Item by clicking on the ( Small Triangle ).
    9.) – Find the text box section called [ CSS Classes ] and then put the word ‘myspacer’ into it.
    { Don’t include the quotes, just put the word myspacer in. }

    10.) – Now close the Menu Item by clicking on that ( Top Triangle ) again.
    { Where you want the separator on your sites menu, you should now see a ‘#’ : no quotes BTW. }

    11.) – Still in [ Customize ], goto the section at the bottom called [ Additional CSS ], then simply copy and paste the CSS code below into it.

    /* menu item killer */
    .myspacer {
    pointer-events: none;
    cursor: default;
    visibility: hidden;
    }

    { As soon as you’ve finished copying it in: your ‘#’ Menu Item, (no quotes), will have vanished, and you will now have an invisible vertical separator in your Menus. }

    12.) – Click [ PUBLISH ] at the top of [ Customize ].
    { Hopefully: well done, as you’ve now finished the twelve step AA plan. }

    13.) – A Baker’s Dozen : Want another separator?
    – Simply make a new Custom Links Menu, and call it #2 or whatever.
    – And then in it’s CSS Classes text-box, simply add the word ‘myspacer’ as you did in the first example.
    – You now have another vertical separator.

    Ben, an awful lot of people ask this basic question, but no one ever seems to resolve it: not without the question getting real complicated in selection the correct .iL menu item using CSS inspectors, but it’s not necessary.

    Above is a generic resolution: complete, and succinct, and it might even draw in some new customers to your superb WordPress sites.

    Hope it helps, Jessica.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Colorizing Menus in (PRO).’ is closed to new replies.