Using the CSS styling in boxes and columns « Support Forum | Kriesi.at

Support Forum » Choices

Using the CSS styling in boxes and columns

8 posts from 4 voices

Started 9 months ago by Annette2259
Latest reply from Ismael
This topic is closed
This topic is resolved

Tags:

Annette2259
Member

Hi,

I'd like to use the h3, h4 & h5 styling within the box, column, portfolio etc short codes but when I use the <h4> </h4> tags I get another style altogether ( all caps & different font). Is it possible to add some quick CSS to make the <h4> etc tags style the same as on a general page?

Thanks
Annette

Posted 9 months ago #
Nick
Moderator

Hi Annette,

Could you show me a url in the demo or your website which h3, h4, h5 you don't like and the page showing the ones you want? I wan't to make sure we are on the same page, so that I can help you better.

Thanks,

Nick

Posted 9 months ago #
Annette2259
Member

Hi Nick,

It's the heading in the boxes, columns, etc that I don't like. I would like to use the font style as defined for the h2, h3, h4, h5 tags.

For example:

Home page - http://lucidity.com.au/testing/welcome/
The three columns I'd like to have a heading that is styled like the h4 or h5 in the regular text. when I add the <h4>heading</h4> code into the column I get an all caps font but I want the h4 style. See first column to see what i Don't want but it has the h4 tags inserted

Thanks.
Annette

Posted 9 months ago #
Ismael
Moderator
Hi Annette,

We can have an alternative for that instead of writing it this way:
<h4>Simple Registration</h4>
We can write it this way:
<h4 class="default">Simple Registration</h4>
Then define the styling of the class, by adding this code in Quick CSS:
```
h4.default {
   color: black !important;
   font-size: 16px !important;
   text-transform: none !important;
}
```
I have added the !important, just to avoid the style from being overwritten with other styles. Hope this helps. :)

Regards,
Ismael
Posted 9 months ago #
Annette2259
Member

Thanks. I've updated with the following results:

#1 - It gives a 'version' of the h4 font but not the same.
See this page for examples - http://lucidity.com.au/testing/metag-works-like-this/

Registration in box at top uses the <h4 class="default">
Social in box under used <h4>
They should look the same but don't on my screen (Safari)

Below all the boxes

First registration is general text with <h4>
Second registration is within a column short code using <h4 class="default">
Again, the <h4 class="default"> looks different

Any thoughts on how to get <h4 class="default"> to look like <h4>?
Thanks
Annette

Posted 9 months ago #
Devin
Moderator
Hi Annette,

The regular h4 is size 18 while the default class from above is size 16. Everything is css wise is identical. So just changing that css from Ismael will get them looking identical.

To get the same style within the columns shortcode, you'll also need to add a normal font weight. So your final css will be:
```
h4.default {
font-size: 18px !important;
text-transform: none !important;
font-weight: normal !important;
}
```
Regards,

Devin
Posted 9 months ago #
Annette2259
Member

Perfect - thanks guys!

Annette

Posted 9 months ago #
Ismael
Moderator

Hi Annette,

Glad that we could help you. :)

Cheers,
Ismael

Posted 9 months ago #