Changing the size and font for all the headers « Support Forum | Kriesi.at

Support Forum » Coherence

Changing the size and font for all the headers

6 posts from 3 voices

Started 3 months ago by freshweb_cdn
Latest reply from Ismael
This topic is not a support question

Tags:

freshweb_cdn
Member

Hello,

I have tried everything to change the size of the all the headers, nothing seems to work. Would really appreciate the css for h1, h2, h3, h4. I especially would like to increase the size of the page title.

Thanks!

Posted 3 months ago #
elames
Member

This is an example of my custom css for h1
h1 {
font-family: "Trebuchet MS", Arial
font-size: 30px;
color: #f5704c;
}

Good luck Do you use FIREBUG? You should download and try it. Very helpful for this. I have learned alot using it.
Here are the style codes Below:
h1 {
font-size: 28px;
margin:0px;
padding:0px;
color:#4a4a4a;
}
h2 {
font-size: 24px;
margin:0px;
padding:0px;
color:#4a4a4a;
}
h3 {
font-size: 22px;
margin:0px;
padding:0px;
color:#4a4a4a;
}
h4 {
font-size: 17px;
color:#4a4a4a;
margin:0px;
padding:0px;
}
h5 {
font-size: 16px;
margin:0px;
padding:0px;
color:#4a4a4a;
}
h6 {
font-size: 14px;
margin:0px;
padding:0px;
color:#4a4a4a;

Posted 3 months ago #
freshweb_cdn
Member

Excellent thanks! Still can't seem to change the page title. I have tried .page-title. Stubborn thing won't change.

Posted 3 months ago #
Ismael
Moderator
Hi,

To change the main title you can use this
```
.main-title {
font-size: 50px !important;
color: red;
}
```
Don't forget to place !important on the font-size.

Regards,
Ismael
Posted 3 months ago #
freshweb_cdn
Member

Excellent that worked only problem was it also changed the size of the portfolio headers.

Posted 3 months ago #
Ismael
Moderator
Hi,

You didn't mention to exclude the portfolio header, in what pages do you want to change it? You might try something like this to exclude the portfolio headers. Inspect element then look for the body class, you can find something like this .page-id-37 (body class for my portfolio page). Place this at the very bottom of your custom.css or Quick CSS.
```
.page-id-37.main-title h1 {
margin: 0;
font-size: 28px !important;
position: relative;
z-index: 2;
}
```
Replace the page id.

Regards,
Ismael
Posted 3 months ago #