change the colour of a section - debut theme

Store Design
1

hi, how do i change the colour of a section on debut theme?

id like to change the ‘crystal consultation’ section to EFD2CB HEX - website www.mysacredsoul.co.uk

Also, is there a way to make the buttons round edged instead of square on my text overlay and across my whole homepage?

2

oh and also make the padding shorter between my featured collections and the button if possible

3

@mysacredsoul

Please add the following code at the bottom of your css file.

//for button
.template-index a.btn {
border-radius: 5px;
}

For the color , do you want to change background of text part only or the complete section?

4

@mysacredsoul

Please add the following code

//for button
.template-index a.btn {
border-radius: 5px;
}

For the color , do you want to change background of text part only or the complete section?

5

@mysacredsoul

step 01:

  1. Go to your Store > Theme > click to edit code.
  2. find this file "base.css " and open.

step 02:

  1. Paste the code at the end of the file.

Do you want to change background of text part only

.feature-row .feature-row {
    background-color: #EFD2CB;
}
.template-index a.btn {
	border-radius: 5px;
}

Do you want to change background the complete section

#shopify-section-e7d0b81f-8dfb-458d-99a5-6586c0e1907d.index-section {
    background-color: #EFD2CB;
}
.template-index a.btn {
	border-radius: 5px;
}

hope this idea helps you

6

Hi @mysacredsoul ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

#shopify-section-e7d0b81f-8dfb-458d-99a5-6586c0e1907d {
    background: #EFD2CB;
}
.template-index .btn {
    border-radius: 10px;
}
.template-index .grid--view-items + .hr--invisible {
    margin: 20px 0;
}

I hope it would help you
Best regards,

Kate | PageFly

7

this code didnt work

8

neither of these worked

9

Hi @mysacredsoul ,

I’m sorry to hear that. Please give it a try with this new solution:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->And paste my above code at the TOP of the file:
My code:

#shopify-section-e7d0b81f-8dfb-458d-99a5-6586c0e1907d {
    background: #EFD2CB;
}
.template-index .btn {
    border-radius: 10px;
}
.template-index .grid--view-items + .hr--invisible {
    margin: 20px 0;
}

PageFlyKate_1-1675673524417.png
PageFlyKate_1-1675673524417.png1067×626 238 KB

I hope it would help you
Best regards,

Kate | PageFly

10

Yay thank you it worked!

Also, is there a way to make the buttons round edged instead of square on my text overlay and across my whole homepage?

11

Hi @mysacredsoul ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the TOP of the file:

.btn {
    border-radius: 10px !important;
}

I hope it would help you
Best regards,

Kate | PageFly