Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 4, 2022 at 2:26 pm #1338909
    markus-fischer

    Hi Kriesi Team,

    I would like to create a Heading / Special Heading with a bright red line before and after the heading text.

    Please see the screenshot attached for what I am trying to achieve.
    I also attached an example from a website where I got the idea from with this heading style so you can see it in a “real life” example.

    Thank you in advance for helping me out here on how to set this up with CSS or otherwise.

    Best,
    Markus

    February 4, 2022 at 4:16 pm #1338929
    Guenni007

    Take on the alb heading the option on style: heading style elegant with optional icon
    now the heading got these two lines on default.

    you can change the line by : 

    body .av-special-heading.elegant-centered .av-special-heading-tag .heading-wrap::before, 
body .av-special-heading.elegant-centered .av-special-heading-tag .heading-wrap::after {
  border-bottom-width: 3px;
  border-color: red;
  width: 200px ;  /*** what you like ***/
}

    the color can be changed in the alb itself if you go to styling – and choose on colors: custom-color – and then set the : Custom Seperator Line Color

    February 4, 2022 at 5:22 pm #1338935
    markus-fischer

    Hi Guenni,

    Thank you for your recommendation, that sounds great!

    Where do I change / adapt the code / line though? I cannot see any option to paste the CSS / code in when using the Special Heading.

    Please let me know where exactly I find it so I can change the line to the one you sent.

    Thank you again!
    Markus

    February 4, 2022 at 6:44 pm #1338943
    Guenni007

    if you are satisfied with a 1px line – you only need tha alb. Only if you like to change the thickness or the width you can insert that code to quick css field in enfold options – general styling

    February 5, 2022 at 4:39 am #1338985
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    February 5, 2022 at 12:59 pm #1339019
    markus-fischer

    Thanks @guenni007 for your advice, the red line looks great now with Quick CSS as you advised!

    The only thing I would still like to change is its length: Currently it’s spanning across the entire page – I would like it to be shorter on both sides so it looks more elegant. Please see this example here: https://online.hbs.edu/courses/negotiation/

    What do I need to add to Quick CSS to make it appear like this?

    Thanks again, really appreciate it :-)

    February 5, 2022 at 1:04 pm #1339020
    markus-fischer

    Thank you – I figured it out with the Quick CSS code you shared! It’s working great now – including the width!

    :-)

    February 5, 2022 at 4:33 pm #1339045
    markus-fischer

    Hi @guenni007

    One more question to you as the lines left and right of the headlines on Mobile don’t look good – please see the screenshot attached (you can see 3 headlines). Due to the small width of the Mobile screen, the lines have a different lengths and it looks unprofessional. Hence I’d like to remove them for Mobile only.

    Would you be able to share the Quick CSS code with me please to be able to remove them for Mobile only?

    Thank you again, your support has been tremendous!

    February 6, 2022 at 5:07 am #1339135
    Rikard

    Hi,

    Thanks for the update. If you want the CSS to only apply to tablets and desktop, then please wrap it in a media query like so:

    @media only screen and (min-width: 768px) {
  //Your CSS goes here
}

    Best regards,
    Rikard

    February 6, 2022 at 10:18 pm #1339218
    markus-fischer

    Thanks Rikard!

    In that case the Special Heading H1 CSS shows on Mobile though, which also contains a line. What would I need to apply if I want to remove the line alltogether on Mobile?

    Best regards,
    Markus

    February 7, 2022 at 1:31 pm #1339351
    Yigit

    Hi Markus,

    Please change the code @guenni007 posted to following one

    
@media only screen and (min-width: 768px) { 
body .av-special-heading.elegant-centered .av-special-heading-tag .heading-wrap::before, 
body .av-special-heading.elegant-centered .av-special-heading-tag .heading-wrap::after {
  border-bottom-width: 3px;
  border-color: red;
  width: 200px ;  /*** what you like ***/
}
}

    Best regards,
    Yigit

    • This reply was modified 3 years, 2 months ago by Yigit.
  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.