Overlay color transparency

You cannot set the transparency in the UI at the moment. Try manually setting a transparent background color under “Edit CSS” like this:

background-color: rgba(0, 0, 0, 0.5);

The shortcodes are basically the same ones you find in the UI under “Add Blocks”, so by adding them there you can check what shortcode it generates. Any other shortcodes should work fine as well. Just take note that they might not preview in the Template Editor.

Anything in particular you’re trying to achieve?

Thanks for this but doesn’t seem to work.
As for the shortcodes I don’t really understand what you mean here as I don’t see any being generated when adding new blocks (I’m working with Classic Editor not Gutenberg).

I’m still trying to achieve what I asked in my previous ticket here but seems to be mission impossible, at least for me.

I’m referring to “Add Blocks” in the Grid Template Editor: https://help.bootstrapped.ventures/article/216-grid-template-editor

Any block you add there will show up under “Edit HTML” as a shortcode.

This is completely separate from the Classic or Gutenberg editor.

Can you send me a screenshot of what you’re seeing under “Edit CSS” for the background color problem? You can email it to [email protected]

Thank you very much for your feedback and your time!

I can send you here everything in case this can be of interest to someone else.
Yes, now I understood about the shortcodes, good to know, thanks.

So far, I managed to do this already:
https://pasteboard.co/wjbFmecAbGBg.jpg

But the background is the default one and I cannot modify it and the text block is still fully inside the image, not halfway only.

The HTML box contains this:

`[wpupg-item-image default=”500×999″]
<div class=”wpupg-template-overlay-new-container”>
[wpupg-item-title link=”0″]
[wpupg-item-excerpt limit_text=”1″ label=”Label text” label_on_own_line=”1″ label_separator=” ———” limit_type=”words”]
</div>`

and the CSS this:

`.wpupg-template-overlay-new {
width: 100%;
max-width: %wpupg_max_width%;
background-color: %wpupg_background%;
font-size: %wpupg_main_font_size%;
line-height: %wpupg_main_line_height%;
color: %wpupg_main_text%;
margin: 5px;
}.wpupg-template-overlay-new {
border-style: %wpupg_border_style%;
border-width: %wpupg_border_width%;
border-color: %wpupg_border%;
border-radius: %wpupg_border_radius%;
padding: 0;
}

.wpupg-template-overlay-new .wpupg-template-overlay-new-container {
padding: %wpupg_overlay_padding%;
}

.wpupg-template-overlay-new.wpupg-item-has-image .wpupg-template-overlay-new-container {
position: absolute;

left: 20px;
right: 20px;
bottom: 40px;

background-color: %wpupg_overlay_color%;
color: %wpupg_overlay_text_color%;
}`

If I remember well I only modified the margins in there and the background color was not accepting any change in the CSS box.

Best.

At the end of the CSS you have this:

background-color: %wpupg_overlay_color%;

Try changing that to this, for example:
background-color: white;

But in any case, I wouldn’t use the Overlay template as a starting point. Instead, make a copy of the simple template, name it “Overlap” and then add the following at the bottom of “Edit CSS”:

.wpupg-template-overlap .wpupg-meta-container {
  max-width: 80%;
  background-color: white;
  margin: -30px auto 0 auto;
  position: relative;
}

Awesome!
That works fine indeed.
Many thanks for your kind help with this!