H1 changed for all NEW potfolio items, old stay the same « Support Forum | Kriesi.at

Support Forum » Angular

H1 changed for all NEW potfolio items, old stay the same

5 posts from 2 voices

Started 3 months ago by ripcordian
Latest reply from Devin
This topic is not resolved

Tags:

font
header

ripcordian
Member

Hi,

When I created the fist few porfolio items the H1-5 resulted in a nice yellow sans serif, even tough the main heading was set to a serif. But now suddenly new posts render H1-5 as the same font as the Potfolio Item seriff.

Heres the weird thing – my first items still has the yellow sansserif as H1, I can copy and paste that row in the same post and it renders the same way – but If I copy that code to a new item, the H1 renders black Poly.

I want the yellow Headings back, In summary: whats the Quick CSS to controll: Portfolio Item Title font and then H1 through H5.?

(I have deleted everything in the Custom CSS, no plugins)

Thank you for a nice theme!

Posted 3 months ago #
ripcordian
Member

Ah. I see.

What happened was that the first couple of portfolio-items all had columns in them. Apparantly, anytime you use columns for the text, H1-5 change to the yellow sans seriff.

But still, if I want to have the yellow sans seriff as an option in none column layout, would that be possible?

Thank you,
Rickard

Posted 3 months ago #
Devin
Moderator
Hi Rickard,

You could add a custom class to any of the header elements you want to look like the flex column headers. Then just add that class to the header item.

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
.flex-header h1, .flex-header h2, .flex-header h3, .flex-header h4, .flex-header h5, .flex-header h6{
	font: 13px/1.3em "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-bottom: 6px; font-weight:bold; text-transform: uppercase; letter-spacing: 1px;}
	.flex-header h1 { font-size: 13px; }
	.flex-header h2 { font-size: 12px; }
	.flex-header h3 { font-size: 11px; }
	.flex-header h4, .flex-header h5, .flex-header h6 { font-size: 10px; }
```
Then, whenever you want that header style without it being in a column shortcode you just add the class flex-header to it. eg: in your text tab of a page or posts visual editor:
<h1 class="flex-header">Here is a title</h1>

Regards,

Devin
Posted 3 months ago #
ripcordian
Member

Hi Devin,

That sounds exactly how i would like it,
but sorry no, I can't get it to work. I tried both the quick and custom css, and emptied the browsers cache inbetween. I entered the
<h1 class="flex-header">Here is a title</h1> in the text-tab in a new post, but it still shows up as a regular heading 1.

I'm on wordpress 5, could that be the problem?

Thank you,
Rickard

Posted 3 months ago #
Devin
Moderator

Can you link to a page with the new class added to the header?

Posted 3 months ago #