Liquid, JavaScript, themes, sales channels
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:
And this is what my gallery images looks like right now:
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!
Hello,
Please share your site url.
.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
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.
.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
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
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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024