changing color of text per section

Tourist
4 0 0

does anyone know of a strategy on how to implement text colour changes per snippet? 

the homepage is made out of multiple sections, each section has a different background colour, therefore one text colour option isnt fit for purpose. 

 

my ideal Scenario is have a text colour changer on the UI part of shopify so the Graphic Designers can change the text colour in each section without affecting the colour across the site.

 

 

0 Likes
Highlighted

Hello 

You are working on which theme?

Please share your site url.

Want to modify or custom changes on store hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Content Writer | Digital Marketing | SEO Expert | Site Optimization | Web Design | Web Development
0 Likes
Excursionist
20 0 5

Hi Liam,
it might be helpfull to add a new Text Color Option to the live customizer for all your sections. 
Therefore you would edit the Section Schema of every Section and add a color picker.

 

"settings": [

Settings from the Section...
, 
      {
        "type": "color",
        "id": "text_color",
        "label": "Text Color for this Section",
        "default": "#000000"
      }
]

Then you can apply the text color via CSS.

 

<div class="section_xy" style="color:{{section.settings.text_color}}">
.
.
.
.
<div>

Hope that helps and have a good day.

:-)

 

Was this answer helpful?
Leave a thumbs up, so others might find it faster.

Would you like to learn more about Shopify Development?
You might like my Youtube Channel
1 Like
Tourist
4 0 0

@Jan_F this is what I did, what I failed to change is the CSS to {{section.setting.text_color}}. 

 

I will give this a try :) 

 

thanks 

0 Likes
Tourist
4 0 0

@Jan_F do you have any idea, how to implement this if the styling isnt to be done inline? 

I also want to manipulate Hover styles so will need to write a scss rule, do you know how I could reference liquid in the scss file? 

0 Likes
Excursionist
20 0 5
Hi Liam,
one of the benefits doning this with inline css, is the high selector specificity that inline css has.
That means the css rule has a high priority and can override other css rules effecting the element.

If you want to use a style tag than you need to have a unique selector for the css rule.
In the section file you can also define a style tag and unify the selector with the section Id.

For example you could implement a css rule like

.color-{{section.id}}
{
color:{{section.settings.text_color}}
}

And than you section needs the same css class

<div class="color-{{section.id}}">
</div>



Unfortunatley I can't think of a way to include this rule in the theme.scss file, but I hope I could still help :-)
Was this answer helpful?
Leave a thumbs up, so others might find it faster.

Would you like to learn more about Shopify Development?
You might like my Youtube Channel
1 Like
Tourist
4 0 0

Hi, 

 

so far, I created a style tag within the Snippet. Gave the selectors some styling rules that look like the following

 

<style>
.sectionPriceSize{
font-size: {{section.settings.price_size}}px;
}
.sectionTextSize{
font-size: {{section.settings.text_size}}px;
}
.sectionTextColor{
color: {{section.settings.text_color}};
}
</style>
 
this works fine as long as its Section.settings.someID, however when I try to access something one level deeper like - 
block.settings.someID - it cant access the block settings. Would you know why it can access section settings but not block? 
**-EDITED-** 
when using {{block.settings.someID}} inline it worked fine... just was trying to move all inline into styling rule set 
thanks,
0 Likes
Excursionist
20 0 5

Hi Liam,

 

I´m not 100% sure if I correctly understood what you tried to explain in your last message.


I´m guessing now you have a Section with multiple Blocks in it.

If that's the case you can access the blocks like in the following snippet:

 

{% for block in section.blocks%}

{{block.settings.color}} ...do something with all the blocks {%endfor%}


You can also access single blocks specifically if you want:

 

{{ section.blocks[0].settings.color}}

{{ section.blocks[1].settings.color}}

 

Happy testing :D

Was this answer helpful?
Leave a thumbs up, so others might find it faster.

Would you like to learn more about Shopify Development?
You might like my Youtube Channel
0 Likes