Change Background colour of custom HTML section (prestige theme)

SDBdigital
Shopify Partner
67 0 16

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 %}

Replies 8 (8)

oscprofessional
Shopify Partner
15821 2368 3077

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
SDBdigital
Shopify Partner
67 0 16

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

oscprofessional
Shopify Partner
15821 2368 3077

Capture.PNG

Hi,

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

then write css for background color

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
SDBdigital
Shopify Partner
67 0 16

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

 

Clarke-
Shopify Partner
48 6 14

@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.
SDBdigital
Shopify Partner
67 0 16

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.

Chemainus
Visitor
1 0 0

Hi Guys,

I'm struggling following the instructions here, can any please post a simple and easy to understand instuctions how to change the background color in "custom HTML" in prestige theme please?

Thank you.

oscprofessional
Shopify Partner
15821 2368 3077

@Chemainus ,
share your site url..

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing