Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 26, 2014 at 4:20 am #309089
    tonyska

    I am using a Special Heading and sub heading on my Portfolio pages.
    http://www.tonyskalicky.com/remco/portfolio-item/marcus-jansen-program/

    How can I tweak the styles of the Special Heading and its sub header? Which CSS classes should I add to my custom CSS?

    I have tried h1.av-special-heading-tag but it seems like it is overridden by a class somewhere else…I don’t want to use the !important tag too much…what is the best option here? Thank you!

    August 26, 2014 at 8:47 am #309178
    Josue

    Hey Tony!

    It would be easier if you tell us what you want to change exactly, here is some code that works without applying !important:

    /* Heading  */
body .av-special-heading .av-special-heading-tag {
    color: red;
}
/* Subheading */
body .av-special-heading .av-special-heading-tag + .av-subheading {
    color: blue;
}

    Best regards,
    Josue

    August 26, 2014 at 3:47 pm #309381
    tonyska

    Hi Josue,

    Thank you! I will add those in and see how they work. What I’d like to do exactly is name the proper class so I can tinker with those elements on my portfolio page, and not H1, H2, etc., elsewhere on the site.

    Specifically, the font-family, text-transform, letter-spacing, font-style and weight. The H tags elsewhere all default to bold and all caps, which is OK with me, but on the portfolio pages I’d like to make them a little different, and still keep the hierarchy of having h1 and h2 tags.

    Make sense? Thanks again!

    August 26, 2014 at 4:06 pm #309388
    Yigit

    Hey!

    You can use page ID’s on your custom CSS or alternatively turn on custom CSS field for ALB elements ( please see – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and use custom CSS classes to target specific elements.

    Best regards,
    Yigit

    August 26, 2014 at 5:05 pm #309415
    tonyska

    brilliant! this should be a standard feature! i will try this out and let you know how it goes.

    thank you!

    August 26, 2014 at 5:16 pm #309425
    Yigit

    Hey!

    Sure, we will be waiting to hear from you :)
    You can request to have that feature enabled by default or vote if already requested here – https://kriesi.at/support/enfold-feature-requests/

    Cheers!
    Yigit

    August 26, 2014 at 6:33 pm #309467
    tonyska

    Hmm. Having some problems.
    Here’s the link…
    http://www.tonyskalicky.com/remco/portfolio-item/marcus-jansen-program/

    Trying to stylize the h1 and the subheader in the special header box.
    h1 is MARCUS JANSEN PROGRAM and
    subheader is Digitally Printed Catalog

    I added the code to functions, and in the special header I added the class remco-special-headers
    Then I added the following to my quick css

    .remco-special-headers
    {
    text-transform:none;
    color: red;
    }

    that didn’t work, so i also tried
    h1.remco-special-headers

    what i’d like to do is play around with the text-transform and letterspacing of the h1, and make the subheader italic and a different color. what is the best way to do it? I don’t really care which way it gets done, as long as it won’t affect the styling of the rest of the site’s h1 tags, and it’s easy enough to do across many portfolio items that i have now, and whatever is to come. thank you!!!

    tony

    August 26, 2014 at 7:35 pm #309492
    Yigit

    Hi!

    Please use following code instead

    .remco-special-headers h1 {
color: red!important;
text-transform: none!important;
}

    Regards,
    Yigit

    September 3, 2014 at 5:28 am #312621
    tonyska

    Sorry I didn’t follow up on this. The code worked perfectly. Thank you!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Styling Special Heading elements’ is closed to new replies.