Hey there,
I am trying to add an Inner border to a box like here(1) under one of my products pages here(2):
Looks like they put a border around a border or something.
Thank you for any help in advance 
Password: emori
Please add the following code at the bottom of your assets/theme.css file.
.template-product .animation-contents .background-media-text__text{
box-shadow: inset 0 0 0 2px #000000;
border: 16px solid #fff;
}
Hope this works.
Thanks!
It worked but now it also gets added do all the other ones i might add on future products. Is there a way to set a class maybe? I can not find the actual HTML , . liquid is confusing
Remove the previous code and add this new code and let me know if this works.
.template-product .animation-contents .background-media-text__text{
box-shadow: inset 0 0 0 2px #000000;
border: 16px solid #fff;
}
Sadly not, It might be worth to mention that I had to create a separate template file and section for this one product page since Shopify does not save different pages by default.
Called it “product.eggplant-mask.liquid”
{% section 'product-template' %}
{% section 'product-eggplant-mask' %}
{% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, product: product %}
{% section 'product-recommendations' %}
{% section 'recently-viewed' %}
{% if collection %}
{{ 'products.general.collection_return' | t: collection: collection.title }}
{% endif %}
It sadly did not. For some reason 2 of my responses did not get posted. It might be worth to mention that i had to create another template file called product.eggplant-mask.liquid and a corresponding section to make this a costume product page.
Not understand what you said. I checked your product page and the section you have mentioned that has inner border I can see.
Please elaborate.
Meaning it happens on all sites. Instead of just the one you checked. Happens here as well for example
I got it. Please remove the previously given code and add this new code.
.template-product #shopify-section-product-eggplant-mask .animation-contents .background-media-text__text{
box-shadow: inset 0 0 0 2px #000000;
border: 16px solid #fff;
}
Let me know if this works.
Thanks!
Worked like a charm! Thank you so much. While I’m here, is it too much to ask for help to also vertically center the box inside that banner?
Could you provide a screenshot and details. What exactly you need?
Sure thing, In the picture below you can see that it is not nicely centered. (the bottom-border looks way too close to the bottom of the image box). I tried to make it wider to fix this but then the responsiveness on the phone doesnt work well. Maybe just center it vertically? (green): not really centered. (red): Maybe like this?the only problem with the red box is that when I do it like that, the responsiveness doesn’t work properly anymore.
Hi Dmwwebartisan,
I would like to add a thin white inner border to all 6 collection images on the homepage - what code should I add?