How to edit the testimonial section color in Debutify theme?

Store Design
1

Hello,

How do I colour the section so that it looks like this and make it look like this, taking off tall the unnecessary borders. I want to make it exactly like this, using accent colour FFD6D8 .

Im Using the Debutify theme.

Mystore : RosalynnSkin.com

2

Hi @RosalynnSkin ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
[data-section-type="quotes-section"] {
    background: #FFD6D8;
}
[data-section-type="quotes-section"] .grid .card {
    background: transparent !important;
}
[data-section-type="quotes-section"] .grid .card .card-footer,
[data-section-type="quotes-section"] .grid .card .card-header {
    border: 0 !important;
}

I hope it would help you.

1 Like
3

Hey @AvadaCommerce , thanks for your reply, that definitley helped, however I want to tweak it a little bit it looks ‘off’.

heres a snippet refer to this

RosalynnSkin_1-1643151044707.png
RosalynnSkin_1-1643151044707.png486×677 29.8 KB

If you could bold the Things in BLUE, there the RED border, and try adjusting the margins so it doesn’t look too spread out, and more so how theoodie.com does there’s on their homepage. Last If you could delete the box around the quotations and leave a black ‘’ instead without the box. Thank you so much1

4

Hi @RosalynnSkin ,

You try paste below code at the bottom of the file theme.scss:

[data-section-type="quotes-section"] .section-header__title,
[data-section-type="quotes-section"] .card-footer {
    font-weight: bold;
}

[data-section-type="quotes-section"] .quote-icon-wrapper {
    background: transparent;
}
[data-section-type="quotes-section"] .quote-icon-wrapper .quote-icon {
    color: #000;
}
@media (max-width: 769px) {
    [data-section-type="quotes-section"] .card-body {
        padding-top: 0;
        padding-bottom: 0;
    }
    [data-section-type="quotes-section"] .card-header {
        padding-bottom: 0;
    }
}

I hope it would help you.

1 Like
5

Thanks for that it looks great, however on mobile its off, this is what it look like on mobile, could you also take off the border and get rid of some of the padding there and reduce the open space.

Heres a screenshot of the view on mobile

6

Hi @RosalynnSkin ,

You try paste below code at the bottom of the file theme.scss:

@media (max-width: 769px) {
    .quotes-section .section-header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .quotes-section .section-header:after {
        display: none !important;
    }
    .quotes-section .card-header {
        padding-top: 0 !important;
    }
}

I hope it would help you.

1 Like
7

Hey @AvadaCommerce

Perfect it looks amazing mobile and desktop thank you so much.

Should I keep all of this code though? Just thinking about site speed and if theres anything here thats not needed.

I’ve left all the code you’ve sent me in every step.

Here’s all the code, I’ll also add a snippet so you can see, if theres anything I can take out that’s not unneccisary I would really appreciate if you would let me know.

All the code pasted:

[data-section-type=“quotes-section”] {
background: #FFD6D8;
}
[data-section-type=“quotes-section”] .grid .card {
background: transparent !important;
}
[data-section-type=“quotes-section”] .grid .card .card-footer,
[data-section-type=“quotes-section”] .grid .card .card-header {
border: 0 !important;
}

[data-section-type=“quotes-section”] .section-header__title,
[data-section-type=“quotes-section”] .card-footer {
font-weight: bold;
}

[data-section-type=“quotes-section”] .quote-icon-wrapper {
background: transparent;
}
[data-section-type=“quotes-section”] .quote-icon-wrapper .quote-icon {
color: #000;
}
@media (max-width: 769px) {
[data-section-type=“quotes-section”] .card-body {
padding-top: 0;
padding-bottom: 0;
}
[data-section-type=“quotes-section”] .card-header {
padding-bottom: 0;
}
}

@media (max-width: 769px) {
.quotes-section .section-header {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.quotes-section .section-header:after {
display: none !important;
}
.quotes-section .card-header {
padding-top: 0 !important;
}
}

8

Hi @RosalynnSkin

Sorry for the late reply

You can copy all, without affecting the speed

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
9

@AvadaCommerce

Alright sweet thank a lot for your help avada!

1 Like