Change Background colour of custom HTML section (prestige theme)

Highlighted
Shopify Partner
6 0 0

Hi

 

I need to change the background colour (and if possible make the width full screen) of the Custom HTML section in Prestige theme.

Here is the liquid file for the custom HTML section:

 

<section class="Section Section--spacingNormal" id="section-{{ section.id }}">

  <div class="Container">

    {%- if section.settings.subheading != blank or section.settings.title != blank -%}

      <header class="SectionHeader SectionHeader--center">

        {%- if section.settings.subheading != blank -%}

          <h3 class="SectionHeader__SubHeading Heading u-h6">{{ section.settings.subheading | escape }}</h3>

        {%- endif -%}

 

        {%- if section.settings.title != blank -%}

          <h2 class="SectionHeader__Heading Heading u-h1">{{ section.settings.title | escape }}</h2>

        {%- endif -%}

      </header>

    {%- endif -%}

 

    <div class="Rte" style="text-align: center">

      {{ section.settings.html }}

    </div>

  </div>

</section>

 

{% schema %}

{

  "name": "Custom HTML",

  "class": "shopify-section--bordered",

  "settings": [

    {

      "type": "text",

      "id": "subheading",

      "label": "Sub-heading",

      "default": "Sub-heading"

    },

    {

      "type": "text",

      "id": "title",

      "label": "Heading",

      "default": "Your HTML"

    },

    {

      "type": "html",

      "id": "html",

      "label": "HTML content",

      "default": "<p>Write your own custom HTML content.</p>"

    }

  ],

  "presets": [

    {

      "category": "Advanced",

      "name": "Custom HTML",

      "settings": {}

    }

  ]

}

{% endschema %}

0 Likes
Highlighted

Hello.....
Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
6 0 0

Hi

The URL is https://comfi.co.nz (password: comfibed)

In the attached screenshot the section with the ligh tblue background is a Custom HTML section. I've managed to specify the lightblue background for the divs in the section, but not for the entire section.

Screenshot 2020-10-21 at 14.47.03.png

0 Likes
Highlighted

Capture.PNG

Hi,

Remove this container , add custom class "anything name there"

then write css for background color

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
6 0 0

LOL, you make it sound easy, but where do I do this?

 

0 Likes
Highlighted

@SDBdigital if you are struggling with those instructions you can add this to the end of your SCSS liquid file.

 

#section-1603269789d9408e52 {
    background-color: #EFF8F2;
}

 

Please be aware because this targets that section if you delete it or add others you will need to change the section it is targeting (you can get the section by using your browser inspect element tool). 

 

for example you want to target the  "minimise movement" "keep moisture away" section you would change the code to target #section-1602679642418

Please like and mark my post as a solution if I've helped you, thanks.
0 Likes
Highlighted
Shopify Partner
6 0 0

HI Clark

 

I added your code to my css file - but it didn't change anything.

Or maybe it did, but I cant see it because the section doesn't stretch to full screen.

0 Likes