Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #14875

    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

    #85270

    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

    #85271

    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

    #85272

    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

    #85273

    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

    #85274

    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

    #85275

    Perfect – thanks guys!

    Annette

    #85276

    Hi Annette,

    Glad that we could help you. :)

    Cheers,

    Ismael

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Using the CSS styling in boxes and columns’ is closed to new replies.