Narrative Theme Gallery - Add white rectangle behind text

lenarei
Explorer
52 3 4

Hi community,

I am trying to add a white rectangle behind the text and in front of the image displayed in the gallery of the narrative theme. At the end, I would like to achieve something like this:

lenarei_0-1628768158836.png

And this is what my gallery images looks like right now:

lenarei_1-1628768253065.png

So I managed to fiddle in some extra text, but I simply cannot figure out where to add some code for the rectangle to show up behind the text. I just started editing the theme, so my code is still very much the original of the narrative theme.

Any help with this will be much appreciated!

 

Replies 7 (7)

oscprofessional
Shopify Partner
15830 2369 3072

Hello,
Please share your site url.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
lenarei
Explorer
52 3 4

The site url is www.olenia.de

oscprofessional
Shopify Partner
15830 2369 3072

 

 

 

.image-bar__text {
    top: 50%;
    background: #fff;
    color: #000;
    position: absolute;
    margin: 0 auto;
    vertical-align: top;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    width: 72%;
    text-align: center;
}
h3.h2.text-title.image-bar__caption {
    color: #000;
}
p.content-text {
    color: #000;
}

 

 

 

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
lenarei
Explorer
52 3 4

Thanks so much for your help, oscprofessional! This is very close to what I am looking to do! 🙂 I would also like to achieve that the white box adjusts in height to the amount of text I put in. So that it doesn't matter whether there is a 1-line or 3-line description, the margin between the last piece of text and the bottom of the white box always stays the same (e.g. 20px). And that the text components I enter will always be in the center of the rectangle, vertically and horizontally.

oscprofessional
Shopify Partner
15830 2369 3072
.image-bar__text.has-animated {
    background: #fff;
    color: #000;
    width: 80%;
    box-shadow: 0 1px 20px rgba(54,54,54,.3);
    position: absolute;
    margin: 0 auto;
    vertical-align: top;
    text-align: center;
    font-size: inherit;
    padding-top: 42px;
    bottom: 0;
    left: 0;
    right: 0;
}

please update this css

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
15830 2369 3072
p.content-text {
    padding: 4px 10px;
}

 

Also add this one !


Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
lenarei
Explorer
52 3 4

Thanks again for your suggestion! I have added the script but unfortunately it only moves the text/white rectangle around. What I would like to achieve though is a kind of responsive resize of the white rectangle, depending on the amount of text within the box. And that no matter what device the box is viewed on, the text box and text are centered in relation to the background image.