I tried several ways to override bootstrap3 nav-pills active color via CSS but it seems the LESS takes priority. I tried also using !important on the relative CSS properties with no luck: the LESS always has priority.
The only way I found is to obviously recompile bootstrap with customized nav-pills colors, but I'd prefer to use CSS so I can rely on CDN.
Any hint?
The relative affix/scrollspy is working of course via:
<body data-spy="scroll">
...
<ul class="nav nav-pills nav-stacked affix-top hidden-print" data-toggle="affix" data-spy="affix">
Relative jsfiddle
Not sure what you did, but this code works:
.nav-pills > li.active > a {
background-color:red;
}
// This changes the color of the active
.nav-pills>li.active>a:hover {
background-color:red;
}
// This changes the color of the hovered pill
Related
I recently switched to Ionic 4 and I'm having some troubles with the SCSS.
I have a very basic home page :
<ion-content padding>
<div class="quizz-progress ion-text-center">
<ion-progress-bar value="0.4"></ion-progress-bar>
</div>
</ion-content>
And I would like to set a custom background color for my progress bar without using primary colors set in variable.scss
I saw while running the app that this is the result HTML inside the ion-progress-bar
<div class="progress" style="transform: scaleX(0.4);"></div>
<div class="progress-buffer-bar" style="transform: scaleX(1);"></div>
These elements are inside a shadow root, and I understood that using a simple background-color: red in my SCSS wouldn't work.
Here is what I did in my SCSS file :
.quizz-progress{
ion-progress-bar{
.progress{
--background-color: var(--ion-color-primary);
}
.progress-buffer-bar{
--background-color: var(--ion-color-light);
}
}
}
But this has no effect. How could I change the color of the progress bar without using the color attribute ? Thank you in advance for any help
try like this
<div class="quizz-progress ion-text-center">
<ion-progress-bar value="0.5"></ion-progress-bar>
</div>
.quizz-progress {
ion-progress-bar {
--background: green;
--buffer-background: red;
--progress-background: black;
}
}
here CSS Custom Properties
In Less is there a simple way to make all attributes in a class !important? My usecase is that I will be dynamically inserting a 'tag' (div) into existing divs that will always have inline styling.
Example:
<div class="text-widget ui-sortable" style="font-size: 5em;>
<div class="tag"><span>Click me to drag widget. My font size should never change</span></div>
<p>I am a text widget that can be dragged. When I am deselected my tag above will be deleted</p>
</div>
So .tag properties need to be !important to avoid getting the text widgets css. Is there a simple way in less to make all properties !important? Something like...
.tag !important {
.... lots of properties that I dont want to add !important to each one.
}
This is in reply to #sazr's question to my comment.
If you think you need to use !important then your CSS is very complex and often has too many top level rules that affect too many things. Sometimes this is because you are trying to create generic CSS that is applied throughout your page, sometimes it is because you are creating rules that have such a large value for specificity that you can't figure out another way to force the style you want on your element.
Learning what specificity is and how it works is the most important thing for a CSS developer. If you don't truly understand that then you are doomed to need !important to resolve issues that elude you.
Look at this chart that I took from here: http://www.standardista.com/css3/css-specificity/
Notice the image associated with !important. It is the nuclear option and should be used as a last resort. Although I use it on every rule for #media print to not have to worry about my printouts.
Using some kind of name spacing with your CSS will help reduce the death spiral that can be caused by too many non-specific selectors or too many selectors that are so specific that you can no longer override those rules.
A select like this:
#page1 .outershell .innershell .form button {
background-color: green;
}
has a specificity of 1,3,1
If you have this layout:
<div id="page1">
<div class="outershell">
<div class="innershell">
<form class="form">
<button>Click me</button>
</form>
</div>
</div>
</div>
And you want to change the button's background color to red then you have to create a new selector with a higher specificity.
This won't work
.form button {
background-color: red;
}
Since it only has a specificity of 0,1,1
#page1 .form button {
background-color: red;
}
This only has a value of 1,1,1
So you need to use two ID selectors, a fourth class selector or a second element selector. Or you can place the exact same selector after the first and then all of your buttons after that declaration will be red.
But that won't change any other buttons to red. So with this layout:
<div id="page1">
<div class="outershell">
<div class="innershell">
<form class="form">
<button>Click me</button>
</form>
</div>
<div class="secondshell">
<button>Not me</button>
</div>
</div>
</div>
the button "Not me" will not be red, or even green.
Things I do
I do not ever us ID selectors unless I must to override existing CSS.
I do not use !important except for #media print and I use it for everything in my print output. That way I know my specificity for the print output and I do not worry about some other CSS selector ruining my printouts.
I avoid deep selectors. Most of my selectors have a specificity value of 0,1,0 to 0,2,0 or 0,1,2
I use attributes for state values and attribute selectors to reduce the amount of JS I need to write, allowing CSS to do the work for me.
BEM to the rescue
OK. Some people don't like BEM. But it has save my life from the complexities of CSS. I have not had a single CSS specificity problem since I started using it, except when dealing with older CSS and even then I find it easy to repair.
BEM is not just about CSS, it is also about formatting your DOM in a sensible way to help the CSS work for you instead of you having to work for it.
Using this DOM:
<style>
.form-box--btn {
background-color: red;
}
</style>
<div>
<div>
<div class="form-box">
<form class="form-box--form">
<button class="form-box--btn">Click me</button>
</form>
</div>
<div class="other-thing">
<button class="form-box--btn">Me too</button>
</div>
</div>
</div>
I KNOW that my two buttons are red. And as long as everyone working on this page agrees to follow the rules we never run into a problem with the button changing color.
I know that is a simplistic example, but reading more about specificity, BEM and name-spacing will tell you much more than I can in this post.
Some light reading
Here are a few links that talk more about specificity, BEM and name spacing:
https://uxengineer.com/css-specificity-avoid-important-css/
http://getbem.com/
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://zellwk.com/blog/css-architecture-1/
Make a class for it:
.tagStyle (#bg: #00FF00) {
background: #bg;
/* Other properties */
}
.tag {
.tagStyle() !important;
}
I want to limit viewport, where the nodes can be dragged and displayed to full hd resolution (1920×1080 px). Is it possible with cy.resize() function? I've tried to set cy.resize({width: 1920px, height: 1080px}), but it doesn't work.
Use CSS on your container.
If you read the docs for cy.resize(), you'll notice it just syncs with CSS changes.
You can use custom CSS also when you add graphs in HTML.
Like
<div class="col" [hidden]="noGraph">
<div id="cy" class="bg-white graph-dynamic-height"></div>
</div>
and in CSS
.graph-dynamic-height {
height: calc(100vh - 215px);
}
The above code work for me.
In Zurb Foundation's Orbit Content Slider, how can I remove the little bullets/circles at the top that represent how many slides you have (and are also clickable)? I want them gone.
There is no bullets/circles at the top in zurb-foundation 5.
So I assume you are using this type of orbit.
How about try .orbit-bullets {display: none;}, somewhere in your css file?
You can use the data-options attribute in your ul:
<ul data-orbit data-options="bullets:false;">
<li>
<img src="satelite-orbit.jpg" alt="slide 1" />
</li>
<li>
<img src="andromeda-orbit.jpg" alt="slide 2" />
</li>
<li>
<img src="launch-orbit.jpg" alt="slide 3" />
</li>
</ul>
You can also use Javascript:
$(document).foundation({
orbit: {
timer_speed: 1000,
bullets: false
}
});
Foundation 5 has more documentation toward the bottom of the Orbit page.
It shouldn't matter which version of Foundation you are using. As mentioned in the above answer; setting orbit-bullets to display none should work.
example:
.orbit-bullets { display: none; }
You could also try the following:
.orbit-bullets-container { display: none; }
If neither of these declarations are working I would guess that the issue lies within your CSS. It would appear that you have either set orbit-bullets to display block somewhere in your stylesheet after you have set them to display none, possibly within a parent div; or you are calling your stylesheet before foundation's CSS and it's being overridden after your declaration. When using any framework, you should call those styles and scripts first; before your application files.
If you could provide an example it shouldn't be difficult to resolve.
I have a loadMask. This sets a gray background and on top of that the loading image that says Loading. From the documentation:
// Basic mask:
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
The problem is I only want the small square with the loading image and the "loading..." label, I need to get rid of the gray background.
This gray background get dawn in .x-mask x-mask-gray div. I have tried setting the CSS of this div to different values for width and height but I can't make it work.
here is the HTML:
<div class="x-mask x-mask-gray" id="ext-gen1099" style="width: 1124px; height: 575px; ">
<div class="x-mask-loading">
<div class="x-loading-spinner">
<span class="x-loading-top"></span>
<span class="x-loading-right"></span>
<span class="x-loading-bottom"></span>
<span class="x-loading-left"></span>
</div>
<div class="x-loading-msg">Loading...</div>
</div>
</div>
If you see, width is set to 1124px and height to 575px, I need that to disappear, make it 0px or remove the whole x-mask-gray but without removing the child nodes. And hopefully view the "Loading..." label centered.
I hope you can help me, any suggestions are greatly appreciated.
Your best option is to override those styles but just make the background transparent instead of trying to remove the DIV completely.
If you add the following CSS it will leave the mask's background transparent.
.x-mask, .x-mask.x-mask-gray
{
background-color: transparent;
}
Alternatively, you could override the Ext.LoadMask's onBeforeLoad method and pass in true as the last parameter of the mask() method (which is the 'transparent' parameter) which will remove the x-mask-gray class from the masking DIV, as below:
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: "Please wait...",
onBeforeLoad: function(){
if (!this.disabled) {
this.el.mask(Ext.LoadingSpinner + '<div class="x-loading-msg">' + this.msg + '</div>', this.msgCls, false);
this.fireEvent('show', this, this.el, this.store);
}
}
});
myMask.show();
Unfortunately, you will still need the CSS override for the .x-mask class with this solution because it still adds a 30% opacity background.
Hope this helps
Stuart