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.
Related
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 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.
I want to keep all my style in CSS file. I don't want to rewrite existing CSS, I want to reuse existing classes.
I have a standard CSS classes, like:
.greenArea{
background-color:#4CAF50;
color:#ffffff;
}
I generate some buttons, that I want to apply this class to, but I don't want to do it from JS, I want to do it in CSS, so all styles would be in one place.
let btn = document.createElement("button")
btn.name = "start_btn"
Is there CSS syntax to apply CSS class to some HTML object?
Like this (fictional code structure):
button[name="start_btn"]{
apply-class: greenArea;
}
There's no way to do that in CSS because CSS doesn't change elements attributes, but alternatively, you can use hover,active,focus..... to detect elements case and apply some codes to the cases.
CSS cases link
You can do it with SASS placeholder Selector. In documentation they explained well.
Codepen
// Html
<button name="start_btn">I created dynamicly</button>
<button name="start_btn">I created dynamicly too</button>
<button name="yellow_btn">Whoa I'm yellow</button>
// Scss
%greenArea {
background-color:#4CAF50;
color:#ffffff;
}
%yellowArea {
background-color:yellow;
color:#000;
}
button[name="start_btn"]{
#extend %greenArea;
}
button[name="yellow_btn"]{
#extend %yellowArea;
}
You can instead handle it like:
let btn = document.createElement("button")
btn.name = "start_btn"
btn.className = "greenArea";
This will create element as:
<button name="start_btn" class="greenArea"></button>
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}"
I'm creating a tumblr them and I have to write an external CSS file but I am having trouble editing the css style of the post elements.
This its structure:
<li class="post quote">
{other code}
</li>
The problem is that the class name has a space in it.
How would I create a CSS class to access this? And yes, I know I can just put a style attribute in the element tag but I was kind of hoping for another option.
The problem is that the class name has a space in it.
This is not possible in CSS. What you are doing is giving the element two classes.
You can address them such:
.post.quote { .... }
but in your case, it's probably better to use a valid separator like
post_quote
This element actually has two classes - it is marked with both the post class and the quote class. So, you can use the following selectors to access it:
// css
.post { ... } // elements with the post class
.quote { ... } // elements with the quote class
// jQuery
var postLis = $('.post');
var quoteLis = $('.quote');
You can also stack selectors to return all elements which meet all conditions in the selector, by including the different selectors together:
// css
.post.quote { ... } // elements with both the post and quote classes
// jQuery
var postAndQuoteLis = $('.post.quote');
This might work:
$('li').each(function() {
if($(this).attr('class').indexOf(" ")>-1) {
$(this).css('border','1px solid #ff0000')
}
}