Shopify themes, liquid, logos, and UX
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 %}
Hello.....
Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.
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.
Hi,
Remove this container , add custom class "anything name there"
then write css for background color
LOL, you make it sound easy, but where do I do this?
@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
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.
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.
@Chemainus ,
share your site url..
User | RANK |
---|---|
179 | |
150 | |
69 | |
46 | |
34 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023