I have 2 question.
Is it possible to change a sidebar backgorund colour based on it's id?
For example, in sidebar.js, I have sidebar1 and sidebar2. I want sidebar 1 to have a different colour than sidebar 2.
How do I input the default sidebar on a custom page? I created a new page, however, it only contain the default navbar and footer only, no sidebar.
Thanks for all the help :)
For now you can swizzle the theme sidebar and add a class according to the sidebar name.
If you open an issue, we could automatically add that class on the sidebar
Use CSS:
Add customCss to your theme config(docs), e.g.:
{
// ...
presets: [
[
'classic',
/** #type {import('#docusaurus/preset-classic').Options} */
({
// ...
theme: {
customCss: require.resolve('./src/css/custom.css'),
}
})
]
]
}
Add "className": "category1" to _category_.json
Add class of same name to src/css/custom.css:
.category1 > .menu__link {
color: red;
}
NOTE: the element that receives the class contains an a element of class .menu__link that defines the default color, so override that.
Related
This demo implements a dark and light Angular theme.
When a theme is selected the class name for the current theme set on the body element with an observable like this (app.component.html):
[class]="s.OS.S.theme.obs | async"
When a new theme is selected the current theme is removed from the overlay container and the new class name is added to the overlay container.
This is all done within app.component.ts. These snippets remove and add the class name from the overlay container:
Remove Theme Class from Overlay Container
overlayContainerClasses.remove(...themeClassesToRemove);
Add Theme Class from Overlay Container
this.overlayContainer.getContainerElement().classList.add(themeClass);
In general it works except when the dark theme is selected it looks like the overlay container stays in place, it is black and it covers the whole viewport. Clicking within the viewport makes it disappear. That is just an attempt by me to describe whats happening.
Any ideas on how to fix this?
Theme Implementation Within styles.scss
#use '#angular/material' as mat;
#include mat.core();
$my-theme-primary: mat.define-palette(mat.$indigo-palette, 500, 200, 800);
$my-theme-accent: mat.define-palette(mat.$cyan-palette);
$my-theme-warn: mat.define-palette(mat.$deep-orange-palette, A200);
$light-theme: mat.define-light-theme(
(
color: (
primary: $my-theme-primary,
accent: $my-theme-accent,
warn: $my-theme-warn,
),
)
);
// ====================================
// Make sure to have a dark background
// Dropdowns will blend in with light
// backgrounds.
// ====================================
$dark-theme: mat.define-dark-theme(
(
color: (
primary: $my-theme-primary,
accent: $my-theme-accent,
warn: $my-theme-warn,
),
)
);
// =====================================
// always include only once per project
// =====================================
.dark-theme {
// use our theme with angular-material-theme mixin
// #include angular-material-theme($dark-theme);
// #include mat.core-theme($light-theme);
#include mat.all-component-themes($dark-theme);
background-color: black;
}
.light-theme {
// use our theme with angular-material-theme mixin
// #include angular-material-theme($dark-theme);
// #include mat.core-theme($light-theme);
#include mat.all-component-themes($light-theme);
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, 'Helvetica Neue', sans-serif;
}
Found some issues in the theme implementation. Take a look at the update code: https://stackblitz.com/edit/angular-xvxuhg-acrvsa?file=src%2Fstyles.scss,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
Documentation - https://v14.material.angular.io/guide/theming
styles.scss - dark theme is implemented using #include mat.all-component-colors, not themes.
app.component.html - Apply the mat-app-background CSS class to your main content root element (typically body).
https://material.angular.io/guide/theming#application-background-color
app.component.ts - Instead of using an observable + async pipe to read the theme class. #HostBinding is a lot more straight forward.
#HostBinding('class')
themeMode: string = '';
We are adding custombuttons to our fullcalendar like below.
Is there a way to change the background and foreground color of the button?
And is there a way to set padding or margins to the custom buttons?
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
Yes, you can set any properties you like using CSS.
On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.
For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:
.fc-myCustomButton-button
{
background-color: red !important;
}
(You need the !important so that fullCalendar's other CSS rules don't override it.)
Demo: https://codepen.io/ADyson82/pen/WNJqXLM
I am using mat-select to display a list of options. So, when you click on the mat-select input filed, it shows a list of options using div with cdk-overlay-pane class.
I want to customize cdk-overlay-pane class. Using ::ng-deep I did this like,
::ng-deep {
.cdk-overlay-pane {
transform: translateX(-40px) translateY(-13px) !important;
}
}
& it works also, but it is affecting another cdk-overlay-pane.
Is there any way to give customClass to that div with cdk-overlay-pane ?
<div id="cdk-overlay-1" class="cdk-overlay-pane customClass" style="transform: translateX(-40px) translateY(-51px);">
so that only this div will be customized & it will not affect other divs.
You should use MAT_SELECT_CONFIG injection token . It has an option overlayPanelClass: string | string[], which represents:
the class or list of classes to be applied to the menu's overlay panel.
Shortly, use the following code at component or at module level:
providers: [
{
provide: MAT_SELECT_CONFIG,
useValue: { overlayPanelClass: 'customClass' }
}
],
Demo: https://stackblitz.com/edit/angular-hxgonn
The overlayPanelClass option is available from Angular Material v11.
MAT_SELECT_CONFIG is docummented here.
MatSelectConfig is docummented here:
#andreivictor's answer didn't work for me. Because I'm using select inside the autocomplete. If you are using autocomplete you have to do like this;
import { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS } from '#angular/material/autocomplete';
--
..
providers: [
{
provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
useValue: { overlayPanelClass: 'customClass' }
}
],
..
In my app, I have movies' details that can be opened, and I want the buttons of the detail to match the movie.
For instance, with the movie "Back to the Future", I have in my data colors = ["#000000","#123123"].
If I do <div [ngStyle]="{'background-color': movie?.colors[0]}"> the div will be of the color I wanted.
My question is, in Ionic, how can I change variables.scss to have these colors (updated when we open a new movie) ?
Because we can't modify tabs with custom css, so I have to add it to variables.scss...
if you want to update any css color or value like font-size like the sass variable at run time use css variables in this way you can update any css property value at run time if it base on css variable like the color in my example but it 's can be any css value
consider this example
style.css
:root {
--color : red;
}
* {
color:var(--color)
}
AppComponent
colorList = ['green', 'blue'];
updateColor(color) {
document.documentElement.style.setProperty(`--color`, color);
}
Template
<button *ngFor="let c of colorList" (click)="updateColor(c)">{{c}}</button>
stackblitz demo 🚀🚀
sass variable are going to compile at build time to there values so they are not reusable at run time
For most use cases, it is convenient to programmatically change the CSS value of an element by mapping it with a variable. We want the CSS value to change every time we update the variable, not only through this.ngZone.run().
<div class="progress" [style.height]=currentLevelPercentage>
This example has shown how we can map the height CSS property of the div element (class progress) to the variable currentLevelPercentage and change its value dynamically. currentLevelPercentage is the variable that must be compulsorily present in the TypeScript file.
For those here to know how to change color of each tab background in super-tabs (ionic) here's my 4 tabs code (I can now change height and width with code too ^^).
in tabs-page.scss :
:root {
--color1: white;
--color2: white;
--color3: white;
--color4: white;
}
super-tab-button:nth-of-type(1) {
background-color: var(--color1)
}
super-tab-button:nth-of-type(2) {
background-color: var(--color2)
}
super-tab-button:nth-of-type(3) {
background-color: var(--color3)
}
super-tab-button:nth-of-type(4) {
background-color: var(--color4)
}
in tabs-page.html : do nothing particular
in tabs-page.ts :
constructor(public navCtrl: NavController, public navParams: NavParams) {
document.documentElement.style.setProperty('--color1', this.movie.colors[0]);
document.documentElement.style.setProperty('--color2', this.movie.colors[1]);
document.documentElement.style.setProperty('--color3', this.movie.colors[2]);
document.documentElement.style.setProperty('--color4', this.movie.colors[3]);
}
Thank you #malbarmawi !
Just an idea about changing style dynamically. here is what i am using
<span [style.width]=foo></span>
Change the value of ‘foo’ in your .ts file
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#style-binding
Simply try this
[ngStyle]="{'background-color': item.color}"
My question is about renaming and extending of css styles.
Lets say I imported a css file which has a style below
// These two styles are from imported css
buttonStyle{ .... }
buttonStyle:hover{....}
// I want to create a new style
myStyle extends buttonStyle:hover { ...}
Is it possible to extend my new style so that my style will be merged with buttonStyle+buttonStyle:hover+ myStyle content
We cant extend properties in CSS, Why cant you do like this:
Here in the imported CSS we are just adding myStyle along with the other two
buttonStyle, myStyle {
....
}
buttonStyle:hover, myStyle {
....
}
myStyle {
// Add on properties for myStyle
}
So that myStyle will get the properties of first two and then the third one and the duplicated properties will be overrided with respect to its priority.