Header font editing

[nomoreluke]

Is there ANY reason whatsoever that the headers are so unbelievably difficult to edit??

Adding !important tags to all the css properties in the custom code is a pretty convoluted way to achieve something that SURELY should be easier to customise.

Am I missing something, or is the “out-of-the-box” css THAT intrusive that even the inbuilt typography options panel in Cornerstone can’t override it??

In addition to this, I’ve just discovered that you can’t edit the appearance of buttons with the “Button Options” tab in Cornerstone either…

What’s the point in allowing users the facility to change these “Options” if it does literally nothing?

Website is at: http://section8coffee.co if anyone wants to take a look - you can see the hideously out of place-looking button that I can’t edit with the customiser. Really hope there’s a solution to this… I chose X theme because of ease of use, not so I could constantly enter REALLY specific css code for each element that I want to customise…

EDIT: Seems that you can edit the “Classic Button” properties in the Customiser but not the newer ones… Any valid reason for this?

[ruenel]

Hello @nomoreluke,

Thanks for writing in!

You have this:

.site {
	background-color: transparent !important;
}
.home .x-navbar {
    background-color: rgba(0,0,0,0.25) !important;
    width: 100%;
}
.home .x-navbar .x-nav-wrap .x-nav > li > a {
    color: #fff;
}
h1, .h1 {
	font-size: 5.3em !important;
	font-family: "Oswald",sans-serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
}

h2, .h2 {
  font-size: 3em !important;
	font-family: "Oswald",sans-serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
	text-transform: uppercase !important; 
}

h3, .h3 {
  font-size: 2em !important;
	font-family: "Oswald",sans-serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
	text-transform: uppercase !important; 
}

h4, .h4 {
  font-size: 1em !important;
	font-family: "Oswald",sans-serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
	text-transform: uppercase !important; 
}

h5, .h5 {
  font-size: 1em !important;
	font-family: "Oswald",sans-serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
	text-transform: uppercase !important; 
}

h6, .h6 {
  font-size: 1em !important;
	font-family: "Oswald",sans-serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
	text-transform: uppercase !important; 
}

One of the reasons why your code did not affect the headings which forced your to add !important in your css code is because you have added it in the wrong spot which was then being overwritten by the theme options settings. You must understand how the styles were loaded first.

This is the order of the styles:

• Theme’s stack style.css
• Child theme’s style.css
• WordPress Custom CSS (Appearance > Customize > Additional CSS)
• Theme Options Settings
• Theme Options’ Custom CSS
• Cornerstone’s Custom CSS
• Element’s default styles

You have added your code way up ahead and then you have inserted a v2 headline element and v2 text element which has its own default styling. I would recommend that you use the headline and text element settings to set the font styles.

Hope this explains it briefly.