changing color of text per section

[Liam_cottrell]

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.

[oscprofessional]

Hello Liam_cottrell,

You are working on which theme?

Please share your site url.

[Jan_F]

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.

:-)

[Liam_cottrell]

@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 

[Liam_cottrell]

@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? 

[Jan_F]

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 :-)

[Liam_cottrell]

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,

[Jan_F]

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