Menu icon Foundation
Need two create two color schemes for top-bar

Hi all!

I'm having a stupid and frustrating problem...

I cannot, for the life of me, create two different top-bar color schemes. I simply need a dark version (what I've created with _settings.scss variables), but I also need a light version. I've tried overriding through a .white class in the element, but so far, it isn't working at all.

Is there an easier solution? Am I just a fool? The world may never know, but any help would be greatly appreciated!

top-bar

Hi all!

I'm having a stupid and frustrating problem...

I cannot, for the life of me, create two different top-bar color schemes. I simply need a dark version (what I've created with _settings.scss variables), but I also need a light version. I've tried overriding through a .white class in the element, but so far, it isn't working at all.

Is there an easier solution? Am I just a fool? The world may never know, but any help would be greatly appreciated!

Bit Byte over 4 years ago

Don't you have the _settings.scss file?

I changed the color there for my top-bar as follows:

// Background color for the top bar
$topbar-bg-color: /*$oil*/$earth;
// $topbar-bg: $topbar-bg-color;

I defined $earth under the list of colors above like this:

// $steel       : #666666;
// $charcoal    : #555555;
// $tuatara     : #444444;
// $oil         : #333333;
// $jet         : #222222;
// $black       : #000000;
$earth      : #9A9786;

Thus all I have to do is to comment out the not needed scheme. I thus have 2 or so many colors as I want to have.

Unless I misunderstood your question, I think you could help yourself likewise..

Regards,

Bit

Sam Linville over 4 years ago

I apologize, I may not have explained my issue very well (or I maybe misunderstanding your response). I have indeed changed the variables in _settings.scss, to suit the dark-colored version of my topbar, which resides on my homepage. But on every other page of the site that I'm creating, I need a light-colored version of the topbar. So I need two versions to exist simultaneously, which is proving to be quite difficult for some reason.

I guess my question is, is there a way to leverage Sass to produce two topbar color schemes that can be called with a class in my HTML, or do I have to produce one color scheme with _settings.scss and then manually override it for my second color scheme in app.scss?

Thanks so much!

Rafi Benkual over 4 years ago

In SCSS there is no way to have your variables split between two components and have different values. Top-bar is really complicated one for doing this. On other components, you'd use the mixin to create custom versions.

So for this, you're best off styling the main one with the settings file and the other on with CSS.

Otherwise you'd need to create a separate top-bar partial, create new variable names and only import that partial where you need it. (I don't recommend this)

Bit Byte over 4 years ago

Hi,

Thanks for clarifying the situation and as Rafi already explained sass variables have this limitation.

Nevertheless, I made a site for my travel agency some time ago and in that each itinerary is very different from each other. Unfortunately, the site is not responsive and that is what I am doing right now – rebuilding/reorganizing it using the Foundation Framework, but the principle and process will remain the same.

I have a MySQL database am using PHP to pull all attributes required for the individual pages. Depending upon the URL, PHP fills all the required attributes into a simple template which has only a background with height and width and produces the page/s within a fraction of a second. All the attributes like color, backgrounds, headings, header-images etc. (anything required) are stored in the DB. PHP creates Record Sets and these can then be dialed-in to any page as “editable attributes”.

I work mostly in Dreamweaver where making templates is a very easy process. In versions 6 and below it had all the databases, bindings, server behaviors in-built into the application, but they removed these in DW CC, but can still be accessed as extensions.

This is how I solved my problem to display unique non-stereotyped pages and came to have a unique CMS like setup. If you care to have a look: http://venture-wilderness.com/indexD.php. This is the only responsive page on the site. You would have to login to go a level deeper..

Regards,

Bit

Rafi Benkual over 4 years ago

This is an interesting topic. Bit, thanks for sharing your experience. It think it would help people in a similar project setup.

I read a recent post on this topic that offers another suggestion: http://www.sitepoint.com/sass-theming-neverending-story/

Bit Byte over 4 years ago

Thanks for the article Rafi. Very interesting and really very innovative.

Perhaps, just what you might simplify around a little to your needs, Sam.

Regards,

Bit