"image with text" border colour - sense theme

[Beautage]

Hi all, can someone help me?

Currently, the "image with text" has an F790AB background colour, but I want this colour to be just like a border frame around the text box and the actual background colour to be white if that makes sense. 

also, if there is a way how to do it, is it possible to get it done all at once somehow and only on the product page? As each of my products has separate templates. 

Thank you!

beautage.co

[Made4uo-Ribe · Accepted solution]

Hi @Beautage 

Do you mean like this? 

This is the code. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.image-with-text__content {
    background: white;
    border: 5px solid #f790ab;
}

And Save. 

[Made4uo-Ribe · Accepted solution]

Do you mean this one?

if it is check this one. 

Same Instruction.

.header__submenu.list-menu {
    border-color: #f790ab;
    border-width: 2px;
}

And Save. 

[Made4uo-Ribe · Accepted solution]

Do you mean like this? 

If it here is the code, same instruction. 

.accordion {
    border: 2px solid #f790ab;
}
.accordion details[open] > summary {
    border-bottom: 2px solid #f790ab;
}
.accordion summary {
    padding-left: 10px;
}

And Save. 

[Made4uo-Ribe · Accepted solution]

Hi @Beautage 

Do you mean like this? 

This is the code. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.image-with-text__content {
    background: white;
    border: 5px solid #f790ab;
}

And Save. 

[Beautage]

That's brilliant, thank you! 

Can you do the same for the dropdown menu on the product page, please?

[Made4uo-Ribe · Accepted solution]

Do you mean this one?

if it is check this one. 

Same Instruction.

.header__submenu.list-menu {
    border-color: #f790ab;
    border-width: 2px;
}

And Save. 

[Beautage]

I am sorry for not being clear, but that looks cool too! 

I meant for the collapsible rows on the product page if you could do the same please 🙏 

[Made4uo-Ribe · Accepted solution]

Do you mean like this? 

If it here is the code, same instruction. 

.accordion {
    border: 2px solid #f790ab;
}
.accordion details[open] > summary {
    border-bottom: 2px solid #f790ab;
}
.accordion summary {
    padding-left: 10px;
}

And Save. 

[Beautage]

It did work, but not to full extent. I would like it to be like in your image, that's how it looks after I've applied the CSS code.

[Made4uo-Ribe · Accepted solution]

Please, add this code. Thanks!

.accordion {
    border-top: 2px solid #f790ab !important;
}
.accordion summary {
    padding-left: 10px !important;
}
.collapsible-content__grid.collapsible-content__grid--reverse > div > div:nth-child(4) {
    border-bottom: 2px solid #f790ab !important;
}

And Save. 

[Beautage]

amazing! Thank you so much for your help!