CSS Image Gallery 2 Support Product Page

Answered

horizontal caption (title) bar

Asked 9 years ago
1
has this question
9 years ago Ruth B posted:
Thank you for the timely response to my last question.

Where is the code for the horizontal caption bar?
I would like to change the height and opacity.
How can I change the position of the bar so it is up off the image and positioned above it?

Thank you.

Replies

Replied 9 years ago
9 years ago Teodor Kuduschiev replied:
Hello,
If you want to change the position of the caption just style its class in your custom css file, which you include after the CSS Image Gallery css file.
Depending on the caption position, its classes are:
When the caption position is TOP
.dmxGallery2-caption-top {
}

When the caption position is BOTTOM
.dmxGallery2-caption-bottom {
}

If you wish to style the appearance use the following class:
.dmxGallery2-caption {
}

Replied 9 years ago
9 years ago Ruth B replied:
I'll give it a try and let you know the results. Thank you.
Replied 9 years ago
9 years ago Ruth B replied:
currently the code is:

.dmxGallery2-caption-top {
top: 0;
}

because I am not certain what to do to move the caption and its background "up" I experiment.
I tried all of these

top: -20;
top: -200;
top: -20px;
top: 200;
it doesn't budge.

Could you be a little more specific on the code to change the original code up so the caption and its background is resting vertically on the image as opposed to on top of the image?

part 2 in separate topic.
Thank you.
Replied 9 years ago
9 years ago Ruth B replied:
opacity

I find two .dmxGallery2-caption { }
one at line line 85 and one at line 313

Line 313 is for the Title and here is what I have so far

.dmxGallery2-caption {
z-index: 1;
position: absolute;
box-sizing: border-box;
width: 100%;
height: 62px;
/* no height displayed in original code*/
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background: #cbd03d;/* #fff;*/
/* how do I change the opacity?*/
color: #000000;# /*#333;*/
padding: 10px;
}
QUESTION 1: How do I change the opacity?

line 85 is for the description:

.dmxGallery2-caption {
z-index: 1;
position: absolute;
box-sizing: border-box;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
background: #fff;
color: #333;
padding: 10px;
}
How is it possible to have two classes with the same name?
More importantly ...How do I change the opacity?
Replied 9 years ago
9 years ago Teodor Kuduschiev replied:
Hello,
Could you please be a little more specific what do you mean by:
Quotethe caption and its background is resting vertically on the image as opposed to on top of the image

How do you imagine this? Vertically?

As for the opacity - you can change it in the UI of the extension, in the properties inspector.

Also - i explained you that you should use the classes i provided in my previous post, in a separate css file, not to edit the original css files.
Replied 9 years ago
9 years ago Ruth B replied:
re: "Also - i explained you that you should use the classes i provided in my previous post, in a separate css file, not to edit the original css files. "
That wasn't clear to me.
__________________________
re: opacity.
I saw the opacity in the interface after I asked the question.
-------------------------------------------
re: "the caption and its background .." "How do you imagine this? Vertically?"
How do I move it UP?

Thank you.
Replied 9 years ago
9 years ago Teodor Kuduschiev replied:

QuoteHow do I move it UP?


.dmxGallery2-caption-top {
top: -XXpx
}
Replied 9 years ago
9 years ago Ruth B replied:
Thanks again!

Reply to this topic