How do I change the background colour of a slideshow gallery from black to white

  • Unknown's avatar
    zairariverafernandez · Member ·

    Hi,
    I´m new to CSS and I would like to change the background colour of a photo gallery I have in my blog from black to white, anybody knows how to do it please?

    Zaira

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

  • Unknown's avatar
    jsmutek · Member ·

    Hello! This bit of CSS should get you where you’d like to be. I commented everything so that you can see what’s going on. 

    /* Change color of slide show background and border */

div.slideshow-window {
  /* change bg color */
  background-color: #FFF;
  /* change border color */
  border: 20px solid #FFF;
}

/* Change color of slide show caption text */

.slideshow-slide-caption {
  /* layer a transparent white bg behind caption text */
  background: rgba(255,255,255,.5);
  /* expand height of caption so background covers all text */
  height: auto;
  /* Change text color to black */
  color: #252525;
}

    The first rule set targets a div with the class if slideshow-window – which it what you need. The declarations just change the bg and border color.

    The second rule set is an extra, and not part of what you asked for. It targets the caption text – which, being white by default, will probably need to be changed to another color when you change your background to white as well.

    I used the background declaration to throw a semi-transparent white box behind the text, to help with legibility.

    The caption had a fixed height of 25px, and text that broke to two lines overflowed the white box. Giving the height declaration a value of auto fixed this.

    Adjust those rules to taste, or remove them all together.

    Hope that helps!

  • Unknown's avatar
    zairariverafernandez · Member ·

    Thank you very much! I’ll try this evening. I’m a total beginner so I hope I put everything in the right place.

  • Unknown's avatar
    zairariverafernandez · Member ·

    Hi, it worked very well, thanks a mill!
    The only thing that didn´t work was the font in the capitán, instead of going black it stayed white with a grey outline. I tried to change the color code but stayed the same, do you have any idea of why?

  • The topic ‘How do I change the background colour of a slideshow gallery from black to white’ is closed to new replies.