Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 27, 2021 at 4:24 pm #1312786
    Karolina2020

    I have a rotating headline on my homepage. The background image is very restless. It is difficult to read. How can I give this heading a “transparent” background? Not across the width but only under the heading. Is that possible?

    THANK YOU !

    July 28, 2021 at 3:59 pm #1313055
    Nikko

    Hi Karolina2020,

    Please try adding this CSS code in Enfold > General Styling > Quick CSS:

    .home #av_section_1 h1.av-rotator-container-inner {
    display: inline !important;
}

    Best regards,
    Nikko

    August 16, 2021 at 4:20 pm #1316979
    Karolina2020

    Hi Nikko,

    Not across the width but only under the heading. Is that possible?
    homepge: liv-room.de

    August 16, 2021 at 9:44 pm #1317010
    Guenni007

    first : i do not like the big white rectangle when the letters change – then maybe a text-shadow will do the job:

    #top .av-rotator-container-inner {
	text-shadow: 3px 3px 10px #000 !important;
}

.av-marked-text .av-rotator-text-single {
	background-color: transparent !important
}

    or in additon a little outline with a modern method to add outline ( only IE11 does not support this) – replace the first rule with:

    #top .av-rotator-container-inner{
	text-shadow: 2px 3px 4px #000 !important;
	-webkit-text-stroke: 1px black
}

    if you like it with more browser support – that little trick will do – replace the first rule with:

    #top .av-rotator-container-inner {
	text-shadow: 3px 3px 5px #000, -2px -2px 0 #000,   2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
    August 17, 2021 at 5:04 am #1317045
    Nikko

    Hi Karolina2020,

    Can you try Guenni007’s solution? it should add an outline to the text which helps make it easier to read.
    You can add this code on top of it so it removes the background color as well as the white rectangle that shows up:

    .home #av_section_1 h1.av-rotator-container-inner, 
.home #av_section_1 h1.av-rotator-container-inner .av-rotator-text-single {
    background-color: transparent !important;
}


    @Guenni007     thanks for helping out :)

    Best regards,
    Nikko

    August 17, 2021 at 6:59 pm #1317197
    Guenni007

    Looks better – if you like to have an alternative –
    try:

    #top .av-rotator-container-inner {
text-shadow:     
    1px 1px 0 #c7c8ca,
    2px 2px 0 #b1b3b6,
    3px 3px 0 #9d9fa2,
    4px 4px 0 #8a8c8e,
    5px 5px 0 #77787b,
    6px 6px 0 #636466,
    7px 7px 7px #000;
}

    but then with more letter-spacing

    August 20, 2021 at 3:16 pm #1317639
    Guenni007

    Thanks for the feedback. :)

    August 22, 2021 at 5:01 am #1317792
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

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