how to change font size in top menu + hover text?

[5high-photohub]

Hi there,

Sort of 2 questions rolled into one!

I’d like to change the font size, and possibly the font colour, for:

1. the very top menu text (so not the main/primary menu, but the one that sits above it)
2. the text in the hover info bits, both for the menus and especially in the text – as i have a CAPTCHA code added within your login popup and the hover-over text box text is tiny!

I just can’t isolate either of them via Firebug, or find other threads about it here.

many thanks for your awesome help here!

[sharmstr]

1 – Been asked several times. You can find the css selectors here: https://archived.seventhqueen.com/forums/topic/different-styles-for-top-and-main-menu

2 – In firebug, you can freeze states (hover) to inspect the css: http://www.sitepoint.com/firebug-css-active-hover-states/

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[5high-photohub]

Hi Sharmstr,

Nope, can’t get the selectors for the actual font size. I’ve tried using G Chrome dev tools (as the top menu doesn’t show in Firebug – did you know that??) and have come up with some options like this:

#top-social .ts-text { font-size: 18px !important; }
and this:
.social-header { font-size: 18px !important; }

but no luck – can you help?

Thanks heaps1

[sharmstr]

Of course it shows up in firebug and in chrome dev tools. As shown in the other thread, the selector is .top-menu li > a. I’ve added the font-size: 100px via firebug to show you how to do it in the image attached.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[5high-photohub]

Thank you – this worked in my child theme style.css:

COPY CODE

/* Increase text size in very top menu - SeventhQueen support */
.top-menu li > a {
font-size: 18px !important;
}

But still no luck with finding the relevant css selector for tool tips text size on hover, even with the style > hover selected in Firebug. I’ll post a private reply below with a link to a page to see if you can find it.

But thanks fro this one!

[5high-photohub]

This reply has been set as private.

[sharmstr]

Its locked.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[5high-photohub]

Sorry – forgot it was in Maintenance mode as we’re just about to launch. So I’ve turned off maintenance mode now – I’ll keep an eye out for when you’re done so I can turn it back on.

Many thanks,
Jenny

[sharmstr]

.tooltip-inner {
font-size: 100px;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[5high-photohub]

Brilliant! Thanks again – and in case others are looking to do this, I’ fairly sure that it’s this selector that also controls the JTC Hacker CAPTCHA tooltip that you can set for a BP login in the Bullet proof Security plugin – which is really what I needed it for as it was way too small to show the CAPTCHA text.

Cheers,
J

[Author]

Posts