Top bar background

Resolved temporalnaut
(@temporalnaut)

6 years, 2 months ago

Is it possible to set / deactivate the background of the top bar on the desktop? I really like it when the picture is bigger, but there is an upper bar, wich is almost completely empty anyway. Maybe the background would be better only under the items that are actually there, or shadow under each item (and maybe too for the smartphone version?). That’s just a idea.

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author Arno Welzel
(@awelzel)

6 years, 2 months ago
You can add the following custom CSS rule to make the top bar transparent:
```
.pswp__top-bar {
  background-color: rgba(0, 0, 0, 0);
}
```
However, keep in mind that the white symbols for zoom, fullscreen display etc. may be hard to see the the picture itself is very bright, that’s the reason why there is a background at all. The same applies to the caption on the bottom, if there is one, so you still can read the text, even if a picture is very bright in this area (the CSS class for the bottom bar is .pswp__caption).

If you want to have a darker background for those buttons only after you made the top bar transparent you may also add the following rule:
```
.pswp__button--close,
.pswp__button--zoom,
.pswp__button--fs,
.pswp__button--share {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
```
The last number (0.5) is the opacity of the background from 0 (tansparent) to 1 (opaque).
Plugin Author Arno Welzel
(@awelzel)

6 years, 2 months ago
(My other reply got “hold for moderation” since I edited a typo too fast. To make sure you get my reply, here again)

You can add the following custom CSS rule to make the top bar transparent:
```
.pswp__top-bar {
  background-color: rgba(0, 0, 0, 0);
}
```
However, keep in mind that the white symbols for zoom, fullscreen display etc. may be hard to see the the picture itself is very bright, that’s the reason why there is a background at all. The same applies to the caption on the bottom, if there is one, so you still can read the text, even if a picture is very bright in this area (the CSS class for the bottom bar is .pswp__caption).

If you want to have a darker background for those buttons only after you made the top bar transparent you may also add the following rule:
```
.pswp__button--close,
.pswp__button--zoom,
.pswp__button--fs,
.pswp__button--share {
  background-color: rgba(0, 0, 0, 0.5) !important;
}
```
The last number (0.5) is the opacity of the background from 0 (tansparent) to 1 (opaque).
Thread Starter temporalnaut
(@temporalnaut)

6 years, 2 months ago

thank you very much

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Top bar background’ is closed to new replies.