Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 14, 2015 at 1:46 pm #473153
    shoo

    Hi,
    Can someone please tell me if it’s possible to highlight the captions on my full screen slider. Unfortunately My background picture is quite colorful so the text can not be easily seen. Also can you highlight it for only one slide? or do you have to high light text on all slide? I’ve attached an example of what I want to do below. Thanks.

    Example of what I want to do: http://s13.postimg.org/62bc7esh3/example.jpg

    July 14, 2015 at 5:59 pm #473350
    Dake

    Hey shoo!

    In order to add a highlight to the text, you can try using the below css, but it would affect each slide:

    .avia-caption-title {
  font-size: 22px;
  background-color: #00ff00;
  width: 200px;
}
    .avia-caption-content {
  font-size: 12px;
  background-color: #00ff00;
  width: 500px;
}

    Alternatively, you could enlist the help of a freelancer to add this feature to the first slide only.

    Regards,
    Dake

    July 14, 2015 at 11:29 pm #473471
    shoo

    Hi Dake, thanks for the reply. Unfortunately that CSS code creates a “box” around the content, so even empty space becomes highlighted. Is there a way to get it to wrap around the “text only”. Thanks!

    July 15, 2015 at 3:52 pm #473806
    Dake

    Hey shoo!

    The width in my earlier css was an example. It needs to be adjusted to encapsulate the text like it’s shown in the below screenshot
    http://www.awesomescreenshot.com/image/409089/535d8c0282a72e0160fd841cba49049f

    Here is the css I used for this example:

    .avia-caption-title {
  font-size: 22px;
  background-color: #000000;
  width: 730px;
}

.avia-caption-content {
  font-size: 18px;
  background-color: rgba(0, 0, 0, 0.7);
  width: 440px;
}

    Best regards,
    Dake

    July 18, 2015 at 10:45 am #475242
    shoo

    Hi Dake,
    Thanks but unfortunately I have 3 slides with texts of different lengths so the code won’t work properly.

    I have found a way to get what I wanted though, and it’s simply using the <mark> text </mark> tag! The default color is yellow, so to change the color of the highlight you’ll need to add background color eg for black: <mark style=”background-color:#000000;”> text </mark>

    The only problem though is for the “caption title”, it changes to black when I add the <mark> tag, even though I’ve set the font color to white. The problem does not seem to occur for the “caption text” though. So wondering if anyone can shed some light? I want to change the title to white as well.

    July 19, 2015 at 4:08 pm #475397
    Dake

    Hi shoo!

    Can try adding !important to the background color and font color like the example below.

    mark {
    background-color: 000000 !important;
    color: #ffffff;
}

    Cheers!
    Dake

    July 19, 2015 at 6:28 pm #475429
    shoo

    Thanks so much Dake, finally got it the way I want it!

    July 19, 2015 at 7:00 pm #475437
    Dake

    Hey!

    You’re welcome :)

    Glad to know we could help.

    Regards,
    Dake

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Highlight Caption Text on Fullscreen Slider’ is closed to new replies.