Gallery 3 CSS help

inStacks
1

Hi @Jannis,

After getting the file labelling to work perfectly yesterday I’m now trying to style it using css as I think the titles on rollover are a bit thin for my site. I’ve managed to target it fine on a single page using:

‘.justified-gallery>a>.caption’

and the lightbox using:

#Choco_container_description

However as I am using the gallery stack in lots of pages I want to target it globally by adding the css to the ‘code’ section in RW. However although the lightbox works, the rollovers stop working?
Any idea if its even possible to do this globally (I’m no css master by a long chalk!)

Also, not too important, but for some reason I can’t center the text in the lightbox. I’m using ‘text-align: center;’ but its not working, even on a page by page basis.

Any help much appreciated,
Cheers,
Roger

2

Hi Roger,

For, the global CSS you used for the grid seems to be working.

.justified-gallery>a>.caption {
    font-weight: bold;
    text-align: center;
    background-color: rgba(0, 126, 0, 1.00);
}

In order to center the Lightbox caption, just use

#Choco_container_title {
    float: none !important;
}

Cheers, Jannis

1 Like
3

Ah… Sorry, that CSS is on the page. Let me republish with it in the ‘code’ section… There you go. I’ve moved it. Have a look now and you’ll see what I mean…

Thanks

4

can you send me a screenshot where you added it in RW ?

5

53
Screen Shot 2019-07-12 at 12.26.53.jpg2778×1078 190 KB

6

Yes, I see it. You have to add everywhere !important

That’s because the global code gets injected to the page before the CSS of the stack itself. With the important statement you overwrite that.

.justified-gallery>a>.caption {
    font-weight: bold !important;
    text-align: center !important;
    background-color: rgba(0, 126, 0, 1.00) !important;
}
2 Likes
7

Ah ok. That makes perfect sense. I’ve learned something good today!

Thanks very much @Jannis

R

1 Like