I am trying to create a simple dark/inverted Bootstrap 4 theme (black background, white text) using the hackerthemes kit and overriding the bootstrap variables scss. Setting the background to black is simple enough with $body-bg: black, but I can't for the life of me figure out which variable controls text color.
I see headings-color defaults to inherit which I assume means inherit from the general text color, but I can't find where that is defined.
Help an idiot out? How can I set the base text color in Bootstrap 4 using SCSS?
Override body-color. In CSS text color of an element is controlled by the confusingly named color property. So the name of the bootstrap variable is derived from that.
In the same root folder as your bootstrap scss files, create a main.scss file. You can call it what you want: main, site, custom, etc.
/* main.scss */
/* import the necessary Bootstrap files */
#import "_functions.scss";
#import "_variables.scss";
/* make changes to the !default Bootstrap variables */
$body-color: #6D2077; //this is the text color
$body-bg: #F2F5F7; //this is the background color
$input-focus-border-color: #6D2077;
// Typography
//$font-size-base: 12px; // this changes the font-size throughout bootstrap
//$font-family-sans-serif: "Raleway", sans-serif;
//$font-size-base: 1rem;
//$line-height-base: 1.2;
/* here you can change the default colors, for example, text-danger. */
$theme-colors: ( "primary": purple, "danger": orange );
/* finally, import Bootstrap to set the changes! */
#import "bootstrap.scss";
Use a Scss compiler to convert the main.scss code to main.css.
Link to the main.css file from your code.
Related
I want to change the hover Red color inside kendo dropdown as shown in below screenshot. Can anyone please tell me in which file and what is the css class name for same.
If you take a look at this StackBlitz exapmle, you can see (in DevTools), that the default class .k-state-selected is responsible for coloring the node red and the names white. It is located in all.css.
// located in all.css
.k-list .k-state-selected {
color: #fff,
background-color: #ff6358;
}
If you want to change that, you just have to add the right color to this class in your css file and (I know you shouldnt do sth like that but it works) mark it with !important, so that the all.css bg-color is overwritten.
I am trying to move over from Bootstrap to Zurb Foundation.
Bootstrap uses *-color for text colour and *-bg for background colours.
I'm a little confused with Foundation's naming scheme:
What is the difference between $topbar-link-bg-hoverand $topbar-link-bg-color-hover?
Both their names suggest that they change the background colour of a link in the top bar, both are given a colour.
Foundation structure has lots of details, if you search these variables in Foundation you can find them in _top-bar.scss file. Look at it, how used these variables:
// Apply the hover link color when it has that class
&:hover:not(.has-form) > a {
background-color: $topbar-link-bg-color-hover;
#if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
}
$topbar-link-bg-color-hover value can equal with color because use for background-color and $topbar-link-bg-hover value can equal with image or anything else(background css values).
I have a SASS built site, and I'd like to create a second color option for that site keeping the SASS code as DRY as possible.
One thought I had that partly works (and is here for clarity sake) is the following:
// regular theme (black)
#import "settings";
#import "styles";
// white theme
.white {
#import "white_settings";
#import "styles";
}
The above works for simple _styles.scss files, but when I try to use the same approach with Foundation #import "foundation", it only wraps some of the styles that in included in Foundation.
So my question is, is there any way to extend the styles I already have with a wrapping class (that would be set on the body tag) that would allow me to easily switch the color theme of the site without repeating the entire collection of SASS rules?
Optimal solution would also not repeat non-changed CSS properties like margin and padding, and only change the colors (which would be the only portion that would be different, and those are set in the settings).
Foundation has all of its styles wrapped in a mixin that prevents repeating it (ie. import once). This prevents you from reusing the code with different colors or other settings. Looking over the source of the mixin in question, you should be able to trick it into thinking the "module" hasn't been imported like this:
// the modules we want to import haven't been imported yet
$temp-modules: $modules;
.one {
// do some one specific stuff here
#import "styles";
}
// set $modules back to the state it was in before we did our import
$modules: $temp-modules;
.two {
// do some two specific stuff here
#import "styles";
}
// repeat as necessary
I want my grid to have 24 columns within a row of 1320px. I also want to have my default (body) font size set to 22px. Let me show you how I can do this easily with SASS/SCSS and Zurb Foundation... Wait, what?
Not easy. It's basically not possible to set the 'default' font-size to a different value other than rem-base without breaking the grid. If $rem-base: 16px and $base-font-size: 100% everything works fine – I just want bigger fonts. If $rem-base: 16px and $base-font-size: 22px the grid is calculated to have 1815px instead of 1320px. Sure, because setting html font size sets the rem unit and everything other font-size refers to rem.
Changing lines 345, 346 at _global.scss (V 5.2.1) and setting them to different vars like this
html { font-size: $rem-base; }
body { font-size: $base-font-size; }
doesn't affect font sizes for p, ul, etc.
So the question persists: how do I get a 1320/24 grid with 22px base size using Foundation5 SCSS?
Cheers
According to the _settings.scss file 'If you want your base font-size to be different and not have it affect the grid breakpoints, set $rem-base to $base-font-size and make sure $base-font-size is a px value.'
So that's what I've done and the font size increases, but the grid stays the same (although you will need to move the $rem-base so it's AFTER the $base-font-size.)
So it goes from:
// This is the default html and body font-size for the base rem value.
$rem-base: 16px;
$base-font-size: 100%;
To:
// This is the default html and body font-size for the base rem value.
$base-font-size: 22px;
$rem-base: $base-font-size;
It's not something I've done before but hopefully it helps you!
If you need to change the $base-font-size while keeping the grid stuff as it is, you have to set $base-font-sizeand $rem-base to the same value. There is no need to change the lines in the standard foundation _settings.scss.
E.g.
// This is the default html and body font-size for the base rem value.
$rem-base: 14px;
// Allows the use of rem-calc() or lower-bound() in your settings
#import 'foundation/functions';
// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.
// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
$base-font-size: $rem-base;
I'm trying to use jqtouch theming which is based on SASS and COMPASS. I have a file custom.scss with the most simple code, one import and one variable to overwrite:
#import 'jqtouch';
// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/
When I now compile the scss file to css, it will basically just generate the jqtouch css with my filename. The color specification is nowhere to be seen, although the variable is definitley correct per documentation (Official Guide) and in the jqtouch.scss file, which I import for costumizing.
I'm running Sass 3.2.9 and Compass 0.12.2 on a Windows machine.
I've tried it with more variables and different file imports, but the result is always, that my override values are not incorporated.
The ruby config file for compass seems to be unsuspicious.
Does anyone have an idea what goes wrong in the process so that my override values are ignored?
You're setting the color after it has already been used. Basically, what you're trying to do is this:
$color: red;
.foo {
background: $color;
}
$color: green;
Depending on how jqtouch is written, you might not be able to modify the colors at all. You need the variables to be set as a default in order to overwrite them ahead of time:
$color: green;
$color: red !default; // red is only used if $color is not already set
.foo {
background: $color; // color is green
}
So your code should be written as such:
// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/
#import 'jqtouch';