Change color font separatly in Impulse theme

[BigDream]

Hi the community.

In Impulse, the parameters allow you tho choose a color for the font, and a different typo for heading and body.

I would like to be able to choose a different color for each. 

I am a beginner in that matter, so I very need some help 🙂

Cheerz

[LitCommerce]

Hi @BigDream,

Can you send me the screenshot of Customize color and code of the config/settings_schema.json file.

I will check it.

[LitCommerce]

Hi @BigDream,

Please follow the steps:

- Step 1: Change code config/settings_schema.json : https://pastebin.com/fSp4m2gJ

- Step 2: Go to layout > theme.liquid file, find '--typeHeaderPrimary' and add code: https://i.imgur.com/2icA60d.png 

Code:

--colorHeaderPrimary: settings.color_ex_header;
--colorBasePrimary: settings.color_ex_base;

- Step 3: Go to assets > theme.css file and add the code below the line 'font-family: var(--typeHeaderPrimary),var(--typeHeaderFallback);' at all places found. https://i.imgur.com/cq7hrW1.png 

Code: 

color: var(--colorHeaderPrimary);

- Step 4: Go to assets > theme.css file and add the code below the line 'font-family: var(--typeBasePrimary),var(--typeBaseFallback);' at all places found. https://i.imgur.com/VEfPMs0.png 

Code: 

color: var(--colorBasePrimary);

Hope it is clear to you.

[BigDream]

Hi @LitCommerce 

Unfortunatly, I'm stuck at step 2, since I can't find that type of code in Layout > theme.liquid.

I think I can find the equivalent in Assets > theme.scss.liquid as follows :

/*================ Font stack mixins ================*/

@mixin baseFontStack {
font-size: $type_base_size * 0.85;
font-family: $type_base_stack;
letter-spacing: $type_base_spacing;
line-height: $type_base_line_height;

@include media-query($medium-up) {
font-size: $type_base_size;
}
}

@mixin baseSmallFontStack {
font-size: $type_base_size * 0.85;
}

@mixin baseExtraSmallFontStack {
font-size: max($type_base_size * 0.7, 12px);
}

@mixin headingTextCenter {
@if ($type_header_text_center) {
text-align: center;
}
}

@mixin baseTextCenter {
@if ($type_body_text_center) {
text-align: center;
}
}

@mixin headingFontStack {
font-family: $type_header_stack;
font-weight: $type_header_weight;
letter-spacing: $type_header_spacing;
line-height: $type_header_line_height;

@if ($type_header_capitalize) {
text-transform: uppercase;
}
}

@mixin accentFontStack {
text-transform: uppercase;
letter-spacing: 0.3em;
}

@mixin accentFontSmallSize {
font-size: 0.75em;
}

[LitCommerce]

Hi @BigDream,

Can you send me the source theme or staff account. I will check and guide you in detail.

[BigDream]

Hi @LitCommerce 

Here is the current version of the theme in wich I had already implemented the code from step 1 🙂

Thx a lot for your time !

[LitCommerce · Accepted solution]

Hi @BigDream,

Because you are using an old version of the impulse theme so steps 2, 3, 4 cannot be performed.

I will guide again from step 2:

- Step 2: Go to assets > theme.scss.liquid , find 'font-family: $type_header_stack;' and add code: https://i.imgur.com/MZ7uXRK.png 

Code: color: {{ settings.color_ex_header }};

- Step 3: Go to assets > theme.scss.liquid , find 'font-family: $type_base_stack;' and add code: https://i.imgur.com/UGURFvx.png 

Code: color: {{ settings.color_ex_base }};

Hope it is clear to you.