Tagged: , , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 31, 2014 at 9:11 am #373434
    insurefirst

    Hi,

    I want to have a heading text in my website that has a background color and the background color just covers the text.
    Please take a look at the example below, the place that says “Going on vacation?”:

    Is this possible with the special heading element or there is another solution to achieve it?

    December 31, 2014 at 2:10 pm #373506
    Yigit

    Hey insurefirst!

    You can add a slider with captions and then change the background color of captions using following code in Quick CSS field ( style.css file of your child theme works as well ) 

    .caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
background: rgba(255, 255, 255, 1); }
.slideshow_caption, div .slideshow_caption a, div .slideshow_caption a:hover, div .slideshow_caption h2, div .slideshow_caption h2 .special_amp, div .slideshow_caption strong, div .slideshow_caption h2 strong {
color: black;
}

    Regards,
    Yigit

    December 31, 2014 at 2:19 pm #373519
    insurefirst

    Hi Yigit!

    Thanks for the quick respond. Sorry I didn’t describe it in a good way.
    I was searching for an image sample to show here and just found the one from the jquery slider :-) sorry for that.
    I don’t want a slider. I just want to add a heading text to my front page but with that styling.

    Amin

    December 31, 2014 at 2:26 pm #373523
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .home div#av_section_1 .av-special-heading {
background-color: rgba(255,255,255,0.8);
padding: 10px;
color: black!important;
}

    If you would like to decrease the width of the background, please insert your text inside a column element

    Best regards,
    Yigit

    December 31, 2014 at 2:41 pm #373536
    insurefirst

    Hi,

    That fixed the problem!
    It is not 100% nice looking like the example but it is good.
    I hope we get this feature in future updates to create headings with background colors that only covers the space behind the text.

    Thanks,

    Amin

    December 31, 2014 at 2:53 pm #373541
    Yigit

    Hi!

    You can turn on custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and apply custom CSS for specific elements.
    Glad we could help Amin, let us know if you have any other questions or issues.
    Happy new year!

    Cheers!
    Yigit

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘background color for special heading element or other solution?’ is closed to new replies.