Custom font and colour

Terrier17

Hello, I'm trying to create a CTA on the top menu. I have added the menu and created a css class for it. I would ideally like to make it have a different font (Rotis Semi Serif Std) and be a different colour (#dc4405) and a different highlight colour (#7a99ac) What is the css needed to be able to do this please?

Thanks

Pablo

Hi,

You can add custom fonts in the Theme Options > Fonts > Custom.

All color customizations are in the Theme Options > Colors - if you don't see the color which you want to change, please send me a link to your website and a screenshot of the element you want to change.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Terrier17

http://oi67.tinypic.com/10r2stc.jpg

The word highlighted in green is the one I want to change, the rest I want to stay the same.

Thanks

Terrier17

http://oi67.tinypic.com/10r2stc.jpg

Terrier17

Sorry forgot to include link to website https://www.chancellorfinancial.co.uk/ 

Pablo

Paste this CSS into the Theme Options > Custom CSS & JS > CSS

#menu li:last-child a span{
	color:#7a99ac !important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Terrier17

Hi Pablo, 

That doesn't seem to have done anything?

Thanks

Bryan

Try doing it this way:

1. Remove the custom inline color that you inserted in the menu item. This is not correct and it is a HTML error. This is why this css might be not working.

http://prntscr.com/myn0hs

2. Edit the menu item, like you did with the color, and add <span style="color:blue;">menu item</span>

cheers

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Terrier17

Hi Bryan, this seems to have worked so thank you. I'm not sure what the limitations are, is it possible to add a different hover colour? or change the font of this one menu item? or maybe make it look like a pill button?

Cheers

Pablo

To make this menu item hover differently than others, you have to apply the CSS class or ID. (<span id="differentHover" style="color:blue;">menu item</span>) and then applying the CSS in the Theme Options > Custom CSS & JS > CSS to change the hover behavior

All other customizations you asked can be done in the inline-CSS code (like code that Bryan sent you)
Take a look at this example:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_css_inline

This will be helpful too:

https://www.w3schools.com/cssref/

It requires a little knowledge about CSS, do you handle it?
Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next