White background with black icons and captions?

  • I have played around with CSS to create a white background with almost black icons and captions. I used this CSS:

    /* photoswipe plugin */
.pswp__bg {
    background: #ffff !important;
}

.pswp__ui--fit .pswp__caption,
.pswp__ui--fit .pswp__top-bar {
 background-color:rgba(0, 0, 0, 0);
}

.pswp__counter {
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    font-size: 13px;
    line-height: 44px;
    color: #202020;
    opacity: .75;
    padding: 0 10px
}

.pswp__caption__center {
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
    font-size: 16px;
    padding: 10px;
    line-height: 10px;
    color: #202020;
}

    This makes the background white and also makes the top and bottom bar white. I managed to make the counter in the left above corner black and also the captions (and changend the font size also).

    However, one problem I have now: the icons in the right above corner, showing “Full screen”, “Share” and the close symbol are white now and therefore not visible.

    So how can I make these icons black also?

    Thanks for your help ??
    Alwin

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    Sorry, I am too busy to do individual support for styling questions. To get black icons you need CSS filters to change the hue/contrast of the SVG images – however, I don’t have a working example at hand, sorry.

    To simply change the color of the Buttons from white to black, you can use the filter:invert(100%)

    Looks like this:

    .pswp__bg,
.pswp__top-bar {
	background-color:white !important;
}

.pswp__counter {
	color:black;
}

.pswp__button--close,
.pswp__button--share,
.pswp__button--fs,
.pswp__button--zoom,
.pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
	filter: invert(100%);
}

    Like Arno told, if you need other colors, you have to experiment with different filters as well. Find out more here for example: https://webcode.tools/generators/css/hue-rotate

    *Thx a lot Arno for this great plugin!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘White background with black icons and captions?’ is closed to new replies.