The Bootstrap version is 4.4.1.
I'm also using fontawesome, v5.0.7.
I've created a main.scss file with the following contents:
$theme-colors: ( "primary": orange, "danger": purple );
#import "../node_modules/bootstrap/scss/bootstrap";
This was compiled to /css/main.css that has:
:root {
...
--primary: orange;
...
}
.text-primary {
color: orange !important; }
So far, it seems fine.
In the html file, there's an import for the main.css style file.
<link rel="stylesheet" href="/css/main.css">
When trying to render text in orange, it is displayed in blue.
<p class="card-text text-primary">Some text.</p>
The browser dev tools show indeed that primary continues to be the blue color.
Where should I look for the cause of this?
Related
I have an ionic 5 app for which I built each page using the cmd line, so they were created using the correct structure.
However, when I try to run it, the page styles aren't used, even though the browser shows the css file has been loaded.
I have the following in the .ts page:
#Component({
selector: 'app-onboard',
templateUrl: './onboard.page.html',
styleUrls: ['./onboard.page.scss'],
})
The html file:
<body>
<app-onboard>
...lots of other elements
<div class="style1">
</div>
</app-onboard>
</body>
The scss file:
app-onboard {
.style1 {
color: #ff00ff;
}
}
style1 is on an html element, but it is not applied. However, when I delete the app-onboard wrapper, the style is applied i.e.:
.style1 {
color: #ff00ff;
}
Why would the presence of the app-onboard selector prevent the styles from being applied in the page?
There should be a . in front of the app-onboard in the scss file as you're calling the scss class instead of the html tag like so
.app-onboard {
.style1 {
color: #ff00ff;
}
}
Hence the reason why the style only applied once you removed it.
If you wish to use the selector as per your current scss you'll have to change your html file to
<body>
<app-onboard>
...lots of other elements
<div class="style1">
</div>
</app-onboard>
</body>
I'm assuming the html file is outside of the app-onboard component and you're calling the component from it.
I'm theming my app defining colors and typography. But it's not working for the heading in my app header component based on mat-toolbar. My theme is overridden by default theme css rules for .mat-toolbar h1.
index.html
<html>
...
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
_theme.scss file:
#import '~#angular/material/theming';
#import 'utils/palette';
// Plus imports for other components in your app.
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$fem-theme-primary: mat-palette($fem-palette-primary);
$fem-theme-accent: mat-palette(
$fem-palette-primary
); // NOT USED, same as $fem-theme-primary!
$fem-theme-warn: mat-palette($fem-palette-warn);
// Create the theme object (a Sass map containing all of the palettes).
$fem-theme: mat-light-theme(
$fem-theme-primary,
$fem-theme-accent,
$fem-theme-warn
);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and #include the theme mixins for each component
// that you are using.
#include angular-material-theme($fem-theme);
// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$fem-typography: mat-typography-config(
$font-family: $font-family,
$headline: mat-typography-level(32px, 48px, 700),
);
#include angular-material-typography($fem-typography);
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
#include mat-core($fem-typography);
topbar.component.html
<div class="topbar">
<mat-toolbar>
<h1 class="topbar__logo mat-headline">App Title</h1>
<mat-form-field
class="topbar__search"
appearance="outline"
color="primary"
>
<input
matInput
data-e2e="topbar-search-input"
class="topbar__search-field"
placeholder="Søg"
(input)="handleSearchChange($event)"
/>
<mat-icon matSuffix inline="true">search</mat-icon>
</mat-form-field>
<div>
<span class="topbar__current-user">{{ currentUser.name }}</span>
<a
mat-button
class="topbar__log-out"
href=""
data-e2e="btn-logout"
(click)="logout()"
>Log ud</a
>
</div>
</mat-toolbar>
</div>
Font family is working... But I expect the <h1 class="topbar__logo mat-headline">App Title</h1> to have css:
font-size: 32px;
line-height: 48px;
font-weight: 700;
Instead it has the default styling:
css:
font-size: 20px;
line-height: 32px;
font-weight: 500;
How can I make ALL Angular Material components (including mat-toolbar) use my own theme?
Component mat-toolbar deliberately overrides all heading tags (h1 through h6) to "title" typography, which maps to h2.
You can make it show "regular" typography for h1 with:
#import '~#angular/material/theming';
.mat-toolbar h1 {
#include mat-typography-level-to-styles($fem-typography, headline); // where headline maps to h1
}
Here are all the mappings, if you'd like to apply the above for other heading sizes:
headline: h1
title: h2
subheading-2: h3
subheading-1: h4
caption: h5
Use svg to create an icon font on iconmoon, name it sell-icon, copy the four files (sell-icon.eot\sell-icon.svg\sell-icon.ttf\sell-icon.woff)in its fonts folder into the common fonts folder, import the style.css file into common/stylus, and change it to stylus. Format (remove parentheses and semicolons) and rename it to icon.styl.
And icon.styl has:
#font-face {
font-family: 'sell-icon';
......
}
......
.icon-keyboard_arrow_right:before {
content: "\e900";
}
And I want to use it in head.vue
<template>
......
<i class="icon-keyboard_arrow_right"></i>
......
</template>
.......
<style lang="stylus" rel="stylesheet/stylus">
#import "../../common/stylus/mixin"
.....
.icon-keyboard_arrow_right
margin-left: 2px
line-height: 24px
font-size: 10px
</style>
But unlucky, icon-keyboard_arrow_right does not appear in my web page.It seems nothing wrong in my code.
Who can help me?
I have a website where each section has its own primary color.
I'd like to put something in Bootstrap 4's Sass code, to override the primary color depending on a body class I set.
I have this, but it's not working so far:
$theme-colors: () !default;
$theme-colors: map-merge((
// primary: $blue,
// secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
), $theme-colors) !default;
// override according to portal
html {
&.portal-1 {
$theme-colors: map-merge((
primary: #f1b36d
), $theme-colors);
}
How can this be implemented in Bootstrap 4's Sass file?
You can't change the sass variables which are already converted to static CSS dynamically at the client side.
However, to build theme system you can apply one of the following options:
1. Generate independent theme
Put a theme argument in your build system which will generate different themes CSS Ex: grunt build-sass --theme=brown
var themes = {
"default": "https://bootswatch.com/flatly/bootstrap.min.css",
"cerulean" : "https://bootswatch.com/cerulean/bootstrap.min.css"
}
// Use something like this to add theme: (You can also append instead of overriding whole head html)
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += '<link type="text/css" rel="stylesheet" href="' + themes.cerulean +'">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
2. Change properties based upon the parent class
You can have a base CSS which defines general CSS. And then you can have separate CSS Properties based upon the parent
In the following example update green-theme class to blue-theme and vice versa
div[class^=component] {
display: inline-block;
width:150px;
height: 150px;
margin: 1em;
border: 1px solid black;
box-shadow: 1px 1px 5px gray;
border-radius:1em;
}
/* Colors*/
$blue1: #3066BE;
$blue2: #090C9B;
$green1: #5C946E;
$green2: #80C2AF;
/* Blue Theme */
.blue-theme {
.component1 {
background-color: $blue1;
}
.component2 {
background-color: $blue2;
}
}
/* Green Theme */
.green-theme {
.component1 {
background-color: $green1;
}
.component2 {
background-color: $green2;
}
}
<div class="green-theme" id="mainBody">
<div class="component1">
</div>
<div class="component2">
</div>
</div>
*Run Snippet won't work as we are using SCSS *
Make a scss file structure like this,
- vendors
- bootstrap
- stylesheets /*[Bootstrap 4 official sass files]*/
- _bootstrap.scss
- scss
- themes
- _theme-1.scss
- _theme-2.scss
- _variables.scss
- styles.scss
- portal-1.scss
- portal-2.scss
_variables.scss
#import "../vendors/bootstrap/stylesheets/bootstrap/variables";
#import "../vendors/bootstrap/stylesheets/bootstrap/mixins";
/* override bootstrap default variables ... */
/* custom variables with !default ... */
styles.scss
#import "variables";
#import "../vendors/bootstrap/stylesheets/bootstrap";
/* custom styles ... */
themes/_theme-1.scss
#import "../variables";
/* change value bootstrap and custom default variables ... */
$brand-primary: #428bca
$brand-success: #5cb85c;
$brand-info: #5bc0de;
$brand-warning: #f0ad4e;
$brand-danger: #d9534f;
$body-bg: #eff;
themes/_theme-2.scss
#import "../variables";
/* change value bootstrap and custom default variables ... */
$brand-primary: #C04848;
portal-1.scss
#import "themes/_theme-1";
/* change style with new variable bootstrap default components ... */
.portal-1 {
#import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
#import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
/* custom style overrides ... */
}
portal-2.scss
#import "themes/_theme-2";
/* change style with new variable bootstrap default components ... */
.portal-2 {
#import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
#import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
/* custom styles from style.scss overrides ... */
}
After sass compilation we will get 3 files styles.css, portal-1.css and portal-2.css.
Use style.css by default and others include in head tag for theming.
<html>
<head>
<link href="styles.css" rel="stylesheet" />
<link href="portal-1.css" rel="stylesheet" />
</head>
<body>
<button class="btn btn-primary">BUTTON</button>
<div class="portal-1">
<button class="btn btn-primary">BUTTON</button>
</div>
</body>
</html>
NOTE: After searching a while for a simple solution, I though I could avoid the pain for anyone trying to achieve this:
You can use CSS variables to achieve this.
There is a thread on the main bootstrap github page Github Issue and user #johanlef has posted a gist showing his method and the relevant code gist.
Then you can just make sure the css variables is initialized in you page
.body.theme1{
--primary: #5d8be5;
}
I used for one of my multi tenanted website and it works great.
Is it possible to override :host-styling of an external angular2-component?
We're making a library including a sidebar-component. This component has a default (fallback) background, but this should be overridable by css/theme used in the app.
#Component({
selector: 'sidebar',
styles: [`
:host { background-color: green; }
`],
template: `
<h1>sidebar</h1>
<ng-content></ng-content>
`
})
export class SideBarComponent { .... }
Main App css:
<style>
sidebar {background: red; color: yellow; }
</style>
This returns a sidebar with green background and yellow text, but I want a red background...
Edited:
As found on http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/: add an attribute to the body-tag:
<body override>
<app></app>
</body>
And in your css: use a selector for this attribute:
[override] hello-world h1 {
color:red;
}
This way, your css does not have to be parsed.
Previous solution:
I've found a solution myself: instead of linking my (theming) css-file in index.html, which isn't parsed, I imported this particular css-file in the app.component.ts annotation.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet/css" type="text/css" href="/assets/style/app.css" />
</head>
<body>
<app></app>
</body>
</html>
app.component.ts:
import { ... }
#Component({
selector: 'app',
styles: [`
#import "assets/style/theme.css";
`],
template: `
...`,
})
export class AppComponent {...}
theme.css:
sidebar {background: red; }
Its not possible to overwrite styles set in a component's styles this way. See point 3 on the "Using Component Styles" section in the Component Styles docs (https://angular.io/docs/ts/latest/guide/component-styles.html)
Our component's styles cannot be changed by changes to styles
elsewhere in the application.
Using :host-context is probably a nicer way to acheive this (although i have never tried myself).
You should try to check the same with host-context. As per documentation host-context works just like the function form of :host(). It looks for a CSS class in any ancestor of the component host element, all the way up to the document root. It's useful when combined with another selector.
In the following example, we apply a background-color style to all <h2> elements inside the component, only if some ancestor element has the CSS class theme-light.
:host-context(.theme-light) h2 {
background-color: #eef;
}