Change color font separatly in Impulse theme

Technical Q&A
1

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

Cheerz

2

Hi @BigDream ,

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

I will check it.

3

Hi @BigDream ,

Please follow the steps:

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.

4

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;
}

5

Hi @BigDream ,

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

6

Hi @LitCommerce

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

Thx a lot for your time !

7

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:

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

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

Hope it is clear to you.