Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 9, 2016 at 5:21 pm #562452
    colinredbond

    Hi

    I would like to add a custom background to text in a special heading on some pages (not all though). Ideally I thought I would set this for one heading style and just use that when I need to. I want the background to be opaque as well.
    I have tried a couple of methods I found on there, including adding the css below and selecting H5 heading, but no joy. Example page attached.. its the heading in the colour section at the top I want to change.

    body .av-special-heading .av-special-heading-tag h5 {background-color: #61728e;}

    January 10, 2016 at 1:09 am #562538
    Elliott

    Hi colinredbond!

    I checked your link but I didn’t see any H5 elements. Add them in and then do this, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/, to give them a custom class such as “customH5s”, and then we’ll give you some CSS to use.

    Best regards,
    Elliott

    January 10, 2016 at 11:08 am #562686
    colinredbond

    Hi

    Sorry I was playing with the page and I removed the title temporarily. I have added a link to another one (the heading at the top is using H5). I have enabled the custom css field. However, given a choice I would prefer to set the behaviour of the heading as a default, rather than have to edit every special heading object, as I have used these quite a lot.
    Please let me know the best approach and either way I am interested in understanding how to use the custom css class as this will be useful for other things.

    Thanks

    Colin

    January 11, 2016 at 5:45 am #562902
    Rikard

    Hi Colin,

    You can set the styling for the h5 element under Enfold–>Advanced Styling. If you need more options than are provided then you can use something like this in Quick CSS:

    h5 {
your styling here
}

    Best regards,
    Rikard

    • This reply was modified 9 years ago by Rikard.
    January 11, 2016 at 10:43 am #563033
    colinredbond

    Can you advise on the css to set the opacity for the background of the heading please? Also, if I set background in advanced styling, it makes the background full width of the window, where I only want the background to be as wide as the text.

    January 11, 2016 at 4:02 pm #563241
    Vinay

    Hey!

    You can achieve this by going to

    Enfold options > header > Header layout
    Enfold options > header > Transparency Options

    Or you can use the below css the amount of transparency is controlled by .5 in rgba(27,43,26, .5) you can increase it or dcrrease it by changing the value.

    Please use the css in Enfold > General Styling > Quick CSS

    .header_color .header_bg {
    background-color: rgba(27,43,26, .5)!important;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
}

    Cheers!
    Vinay

    January 11, 2016 at 6:35 pm #563410
    colinredbond

    I am not sure we are talking about the same thing. I do not want to change the opacity of my Header, i want to set the opacity of the heading style H5 and I also want the background to only be applied to the width of the text. If you look at the page below, I have changed the heading style H5 to display with a background in advanced styling, but it runs across the screen, not just behind the text. Also, there is no option to set opacity on that heading style.

    Please advise

    January 11, 2016 at 7:29 pm #563441
    Vinay

    Hi!

    Please check this out…

    #top #wrap_all .main_color h5, #top #wrap_all .alternate_color h5 {
    background-color: rgba(0,0,0,.4)!important;
    font-weight: bold;
    width: 500px;
    margin: 0 auto;
}

    Regards,
    Vinay

    January 13, 2016 at 10:39 am #564489
    colinredbond

    Hi Vinay

    This kind of works, but then its causing some of the longer headings to wrap, which is not what I want.
    I wonder if you can advise how to do this using a custom css class, as thinking perhaps its best if I do it individually. I set a custom class in a special heading element, called “CustomHeading”. Can you advise on the css I need to just set the background to the text to opaque grey please? I tried modifying the above but not sure I am doing it right.

    Thanks

    January 14, 2016 at 3:52 pm #565453
    Andy

    Hey!

    can you provide us a precise link where we can find the element you are talking about? also send us a screenshot, so we know exactly which element to inspect. Use imgur.com or dropbox.

    Best regards,
    Andy

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