Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 12, 2017 at 2:16 pm #776656
    kieronbis

    Hi,
    under Front Page > Full Screen Slider > Form Element > Caption.
    I can change the font size, but I can’t change what class it’s displayed as.
    It’s h2 .avia-caption-content

    I can add in some custom css to the Enfold > General Styling:
    .avia-caption-title{
    font-family: ‘Raleway’, Helvetica, Arial, sans-serif !important;
    font-size: 80px !important;
    font-weight: 100 !important;
    line-height: 1 !important;
    }

    However because the caption is using H2 some of the styling doesn’t apply. I’m mainly trying to reduce the weight of the font to 100, but because it’s using h2, it’s doesn’t look like it’s applying correctly. I can edit the h2 class under advanced styling, but that affects all h2 classes.
    Is it possible to change the caption to use a custom class on a per slider basis?
    something like
    .frontpageheader

    April 12, 2017 at 4:10 pm #776766
    Jordan Shannon

    Hey kieronbis,

    You should be able to add a custom class to the entire slider element and then target the h2 from there. You can enable custom classes by following this doc:

    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
    Best regards,
    Jordan Shannon

    April 12, 2017 at 4:22 pm #776783
    kieronbis

    Thanks Jordan, I already tried that based on other topics I’ve read. It enables the class for the whole slider only by the looks of it. h2 is still there under the class for the title.
    If I add “example” to the custom class for the slider
    and
    .example {
    font-family: ‘Raleway’, Helvetica, Arial, sans-serif !important;
    font-size: 80px !important;
    font-weight: 100 !important;
    line-height: 1 !important;
    text-transform: lowercase !important;
    }
    or #top .example it does absolutely nothing.

    April 12, 2017 at 4:27 pm #776792
    Jordan Shannon

    Hi,

    Can you not target it with the following:

    .example .avia-caption-title{
***
}

    Also, if possible please provide a link to the site/page in question.

    Best regards,
    Jordan Shannon

    April 12, 2017 at 4:47 pm #776803
    kieronbis

    That just gets me back to the start. the caption is still under h2:
    <h2 style=”font-size:70px; ” class=”avia-caption-title” itemprop=”name”>itsallgonepearshaped</h2>

    Frontpage

    I’m trying to emulate the style on http://www.itsallgonepearshaped.com
    which is just a simple:
    h1 {
    font-size: 100px;
    font-weight: 100;
    line-height: 1;
    }

    April 12, 2017 at 4:59 pm #776809
    kieronbis

    Figured it out. I changed the default font back to open sans and it’s now showing correctly.

    April 12, 2017 at 8:54 pm #776885
    Jordan Shannon

    Hi,

    Great! I am glad you were able to get this figured out. If you need additional help, please contact us here and let us know.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.