Change Header Font

There are many tools available for this kind of CSS work, for example:
– Firefox with Firebug add-on: Help info on Firebug https://getfirebug.com/faq/
– Newer IE/Chrome, etc., have similar tools
– Alternately, try a dedicated CSS resource such as https://www.css-discuss.org/
– Also, consider creating a child theme otherwise all your customization will be overwritten when you next update your theme. Alternately, use:
– If your theme has a custom CSS option, use that to add the CSS shown above.
– If not, install a plugin, for example Simple Custom CSS; Custom CSS Manager plugin… – Or, if you have Jetpack installed, enable its Custom CSS module.

Hello Mhollinger,

That can be done with a simple bit of CSS:

.ux_banner h1 {
	font-size: 500%;
}

Can’t make the font bolder as it is already as bold as it can be.

Hope that helps,
Sage

• This reply was modified 8 years, 6 months ago by Sage Brownell. Reason: edited to remove suggestions already above

I’m sorry – kinda new to this aspect of WP and CSS – I have the Jetpack plugin and the custom CSS installed as well. But where would I go to actually make this change? Can you perhaps give a step by step?

No worries!

Just drop it at the bottom of your custom CSS file. Steps:

Activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

So, I activated the custom CSS module and get the stylesheet editor. I simply paste this:

.ux_banner h1 {
font-size: 500%;
}

and the size will change?

/*
Welcome to Custom CSS!

To learn how this works, see https://wp.me/PEmnE-Bt
*/
.ux_banner h1 {
font-size: 500%;
}

???? – Is this what I need to do/change?

Yup, that should be it!

I changed the 500% to anything from 5% to 1000% – I noticed no change in font size in the preview. The elements at the top of the page I wish to alter are:

4940 W Grand Ave. Chicago IL 60639 [email protected] Call us 773-227-6200

I just want them larger

There is also a heading “My Account” which is linked to another page. How do I link the other headings…[email protected] , for example, to open another page?

Thanks SO much for helping me.

see the page here https://www.chicagometalsupply.com

Ah, my bad, I thought you were referring to the white text on the banners of the inner pages. Take the code I gave you above out.

This should do it:

#top-bar {
	background-color: #0d2870;
	font-size: 17px;
	font-weight: bold;
}

As for adding in links etc, I’m not sure where that would be in your theme and it might involve editing the theme header file which requires HTML knowledge so the right things are changed. I’d suggest either talking to the theme developer or hiring one https://jobs.wordpress.net/ to make those changes for you.

Let me know if that code works,
Sage

Perfect -= Thank you SO much – Looks Great

If you look, the theme header, when you click “My Account” has been linked – If only I could find where to change all that – Not very good with altering headers/footers

No worries!

As mentioned, that depends entirely on your theme etc and there’s not a whole lot I can do from this side to figure it out for you as I can’t see your code. You’re much better off hiring a dev for the twenty minutes max it should take them to change it out for you.

Sage