Menu icon Foundation
Can't change font color

Hi everyone, please bare with me as I am very new to Foundation 5.

I've installed the Scss version and so far things seem to compile almost ok.

As i've read before, I am adding my custom css to the app.scss in the scss folder. My own custom classes work fine which @include components.

But, I want to change the default $header-font-color. This is where I am going wrong somewhere. If I put e.g $header-font-color: #CCC; in the app.scss file it doesnt effect my header colors.

Can someone please point me in the right direction?

Thank you kindly

changesettingsFontcolorfont color

Hi everyone, please bare with me as I am very new to Foundation 5.

I've installed the Scss version and so far things seem to compile almost ok.

As i've read before, I am adding my custom css to the app.scss in the scss folder. My own custom classes work fine which @include components.

But, I want to change the default $header-font-color. This is where I am going wrong somewhere. If I put e.g $header-font-color: #CCC; in the app.scss file it doesnt effect my header colors.

Can someone please point me in the right direction?

Thank you kindly

Rafi Benkual over 5 years ago

The best place to make changes is in your _settings.scss file. About line 173 you will see it:

Just uncomment the style you want to change and make the change.

Example:
```CSS
// Control header font styles

$header-font-family: 'Shadows Into Light Two', cursive;
// $header-font-weight: bold;
// $header-font-style: normal;
$header-font-color: #3f2b22;
// $header-line-height: 1.4;
// $header-top-margin: .2em;
// $header-bottom-margin: .5em;
// $header-text-rendering: optimizeLegibility;

Note
In you app.scss file, make sure:

// Global Foundation Settings
@import "settings";

Kenneth Williams over 5 years ago

Thank you for replying,
My _settings.scss file doesn't have those entries?
just to be sure... I'm using foundation 5 with bower components
the _settings file that im looking at is in public_html/scss/
and it has 997 lines?

Rafi Benkual over 5 years ago

In the bower version it is line 1097.

// We use these to control header font styles
// $header-font-family: join("Open Sans", $body-font-family);
// $header-font-weight: 300;
// $header-font-style: normal;
// $header-font-color: #222;
// $header-line-height: 1.4;
// $header-top-margin: .2rem;
// $header-bottom-margin: .5rem;
// $header-text-rendering: optimizeLegibility;

It doesn't seem like you have the right or most up to date file. I would try updating or downloading the zip

Kenneth Williams over 5 years ago

Thank you again I really do appreciate this.

Ive just gone to https://github.com/zurb/bower-foundation/releases/tag/5.0.2

this is the version installed with my foundation it doesn't'nt have that many lines in _settings.scss

which version am I supposed to have?

James Dullaghan over 5 years ago

5.0.2 is the most up to date version.

You can copy the settings.scss file and paste it into your own. Somehow the settings file in your project seems to have gotten muddled along the way.

Hope this helps!
-James

Nathan Cooper over 5 years ago

In 5.0.2 the variables for header font styles are in components/_type.scss (beginning at line 6) not _settings.scss.

Ivan Torres over 5 years ago

Hi James,

I did as you recommended and copy the _settings.scss since I was still getting the old version even after updating Foundation with bower to 5.0.2, now I can see the Typography setting starting on line 1080.

But, now I am wondering if anything also on my installation didn't get installed properly…
How can I make sure an existing project started on Foundation 5 Grunt lib sass is using the latest version?

I already did a bower update

Thanks,
Ivan