Slider Text Colour

• 

  acquirecapital · Member · Feb 3, 2017 at 9:15 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  On my site there is a slider on the home page, I have a bunch of CSS added to get this slider to do exactly what I want however somewhere along the way I’ve ended up with grey text on 2/3 slides and I can’t figure out what I’ve done to be able to go back and fix it!

  Any help is appreciated!

  The blog I need help with is: (visible only to logged in users)

• 

  staff-loquaciousloon · Staff · Feb 6, 2017 at 2:44 pm

  • Copy link

  Hi there!

  It looks like you’ve hidden the theme generated title with this CSS:

  .slideshow .information .headline a {
  	display: none;
  }

  and you’re adding a link of your own in the post directly, so it gets the theme’s normal link color.

  Try either removing the bit of CSS I’ve shown above to reveal the original title, or you could try adding this CSS to restyle your own custom links you’re using:

  .flexslider a:link {
  	color: #fff;
  }

  Is that what you had in mind? :)

• 

  acquirecapital · Member · Feb 9, 2017 at 9:31 pm

  • Copy link

  Yes adding that code worked! Thank you

  Now I’m wondering if it is possible to have a box behind the slider text so that the text is visible no matter what picture is behind? I’m thinking something in the colour #54565b but somewhat transparent?

• 

  staff-loquaciousloon · Staff · Feb 10, 2017 at 3:09 pm

  • Copy link

  Hm, I can think of a few options.

  First, a background block like the one you’ve described:

  .slideshow .information .excerpt {
      background: rgba(84,86,91,.7);
      padding: 10px;
  }

  using rbga for the color lets you control the opacity as well as the color itself. It stands for Red, Blue, Green, Alpha.

  #54565b in rbg format is rgb(84,86,91) then, for rbga we just add in the alpha. For that, 0 would be completely transparent (so invisible, no matter what color) and 1 would be opaque – just the color, no see through effect at all. Therefor, in my example above .7 translates to “70% opaque.” Play around with that number a bit if needed :)

  Another option would be to not use a box at all, and rely on a text shadow to give the letters definition. Like this:

  .slideshow .information h2,
  .slideshow .information p {
  	text-shadow: 2px 2px 2px #333;
  }

  The main text of the post already had a shadow, this just makes it stand out a bit more, then applies the same thing to your title.

  If you want to play around with it, Text shadow has four values, in this order:
  – distance to the right of each letter
  – distance below each letter (you can use negative numbers for both of these if needed)
  – distance of the blur effect on the shadow
  – shadow color

  Let me know how it goes! :)