I’d like to customize the lightbox overlay of the Apia skin in The Grid. Specifically, I’d like to remove the filename string in the lower left, and then adjust the color/opacity of the background tint.
Is that possible in the Custom css tab?
Hi @dbrinda,
Thank you for reaching out to us. Yes this can be done via custom CSS by adding the following code in the Theme Options > CSS:
/* To remove the filename string */
.tolb-open .tolb-inner figcaption {
display: none !important;
}
/* To change the color and opacity of backgrond */
.tolb-holder {
background: rgba(141, 133, 32, 0.8) !important;
}
To learn more about CSS rgba function please see https://www.w3schools.com/cssref/func_rgba.asp
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Hope this helps!
Thank you!
You’re more than welcome, glad we could help.
Have a nice weekend
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.