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

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
0 Likes
Highlighted
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