I am using dhtmlxTreeview: https://dhtmlx.com/docs/products/dhtmlxTreeView/
I need to override an icon that is in a CSS file. If I go to the CSS file and override class, it is updated in the browser.
But when I run the first time and the pluging reloads again, the plugin doesn't respect the CSS override even if I use the !important keyword.
How can I override that icon file?
I need to change this:
i.dhxtreeview_icon.dhxtreeview_icon_file {
background-image:url(imgs/dhxtreeview_web/icon_file.gif);
}
To this:
i.dhxtreeview_icon.dhxtreeview_icon_file {
background-image:url(imgs/dhxtreeview_web/icon_folder_closed.gif) !important;
}
You will have to link your CSS file after the library's. This will make CSS's native specificity override the library's styles with yours.
Example: https://jsfiddle.net/zk4t2t8a/
<style>
div {
background: red;
}
</style>
<style>
div {
background: green;
}
</style>
<div>
Test
</div>
More information: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Related
How do we style library packaged component from via styles.scss?
For example suppose we have a <hello-component> and the template looks like this:
<div><h1 class="fs-HelloHeading">Hello!</h1><div>
How can be override the CSS inside fs-HelloHeading class and do it in a way that is context sensitive?
So for example if <hello-component> is inside <party-component> then it should have a yellow background, but if it's inside funeral-component then it should have a black background, and we would set these by overriding the styles in fs-HelloComponent. Thoughts?
My end goal is to override classes that are packaged with a component. For example I have these packaged with an Angular Material Table Component.
.mat-header-cell {
justify-content: left;
white-space: nowrap;
min-width: 12rem;
}
.mat-cell {
justify-content: left;
white-space: nowrap;
min-width: 12rem;
}
However I may want to change the width from outside the component later in a specific context, so I was thinking about doing that by adding additional css classes to the mat-row-element.
It is possible to override a style with the !important keyword. from top to bottom, the last !important will be applied. To set individual stylings depending on the surrounding element you can just 'mimic' the DOM-structure. Here is an example what you can put just on the end of the SCSS-file.
party-component {
hello-component {
background-color: yellow !important;
}
}
funeral-component {
hello-component {
background-color: black !important;
}
}
Please note that you have to replace colors and component-names with actual values.
Just try to define another custom selector with more or equal specificity to your CSS selectors.
if any rule is overridden,then you need to use !important flag to force your custom css rules, also consider that when you are using bootstrap, then some utilities classes have !important attribute.
<h1 id="custom-id" class="fs-HelloHeading">Hello {{ name }}!</h1>
style.css:
#custom-id {
color: blue;
}
you may want to use :host and ::ng-deep like
:host ::ng-deep .fs-HelloHeading { // in party-component css file
background-color: yellow;
}
:host ::ng-deep .fs-HelloHeading { // in funeral-component css file
background-color: black ;
}
it will look for all the child elements of these components
for more detail. Here's the docs: https://blog.angular-university.io/angular-host-context/
I'm setting up Shoppy on my website but I don't like the embed style.
Is there a way to change the CSS from my code?
<script src="https://shoppy.gg/api/embed.js"></script>
<button data-shoppy-product="PRODUCT ID">Pay</button>
You have to include your own CSS file and have to overwrite the default CSS. You can overwrite the default CSS by adding a class selector with the default class selector in your CSS file and write your own CSS. For example, if the default CSS is,
.embed--header {
background: #1c2260;
}
then you can overwrite like this:
.embed--header.changebackground {
background: #000;
}
Be sure to give the class name as "changebackground" to your element, otherwise nothing change will happen.
I have a code that i can only edit the CSS and the JS. The problem is that the page loads a default css that cannot be altered but you can run an alternative css and JS to add content to a page and modify the css. So i guess the css that is loaded overrides the default one. But the problem is that you can't just say
a:hover {
background-color: red;
}
You would have to reset background color with none and add underline and stuff.
so how can i tell my css to put my *:hover important over any else and remove the default hover?
The css may be too nested. Adding an !important tag would help. But it's more semantic to follow the train of elements. Right click the element you want to style. When you're looking at the editor, you'll see the specificity on the right side (where the css is) and then you can copy the selector they have. Using this selector should allow you to overwrite any styles necessary.
Far top right of the image. The .container is the overall class used here. In some cases you may see something like. (From Foundation)
.top-bar-section li:not(.form) a:not(.button)
Add following in your CSS and make sure you load it after default CSS.
a:hover {
background-color: NONE !important;
}
Using Javascript
$('body').append('<style>a:hover { background-color: none !important; }</style>');
Let say I have this external "style.css" sheet:
p.class1 {
background-color: blue;
}
And my HTML content is this:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
p.class1 {
background-color: red;
}
p.class2 {
background-color: green;
}
</style>
</head>
<body>
<p class="class1">This is the first paragraph..</p>
<p class="class2">This is the second paragraph..</p>
</body>
For full source code example, visit this link! When I try this .css() code:
$('p.class1').css("background-color", "green");
It will set the p.class1's background-color inline, like:
<p class="class1" style="background-color: rgb(0, 255, 0);">
When I unset it with .css("background-color", ""), the inline style will be gone and the background will set back to red internally. What I want is to set the internal p.class1 style to "" or to remove it when I unset, so the background will become blue externally.. Is there a right way to manipulate the internal <style>?
Keep note, I don't want to remove the internal <style> element to perform the external p.class1 style if it will also affect the style for p.class2 or any attempt that will affect the style of the other in that element.
It is possible, but you will need to use CSSOM to manipulate the style sheet. This is not a jQuery thing, per se, though jQuery can help in the first stages.
The first step is getting to the internal <style> element in the DOM. The easiest way to do that would be to set an id attribute on it in your HTML and then use document.getElementById() to grab the element on the JavaScript side, but any method that can pick out that individual element will work. Assuming you use an id, the HTML might look like this:
<style id="internalStylesheet">
p.class1 {
background-color: red;
}
p.class2 {
background-color: green;
}
</style>
...and then in the JavaScript side...
var styleElem = document.getElementById('internalStylesheet');
Note that if you use jQuery to do this, you need the actual element, not the jQuery collection returned by jQuery().
Once you have the element, you can get into the CSSOM side through its .styleSheet property. Once you're in the stylesheet, the next step is to find the exact rule you want. CSS rules don't have unique IDs like DOM nodes can, so your only option is to search the list:
var desiredRule = null;
for (var i = 0; i < styleElem.styleSheet.cssRules.length; i += 1) {
if (styleElem.styleSheet.cssRules[i].selectorText === "p.class1") {
desiredRule = styleElem.styleSheet.cssRules[i];
break;
}
}
Keeping a reference to the rule you want is a good idea if you will have to change it many times. That way you won't have to repeat this search process every time you want to change the rule.
Once you have the rule you want, manipulating the rule is a lot like manipulating inline styles. For actually removing properties on the rule, I recommend something like this:
desiredRule.removeProperty("background-color");
Note that because of the inefficiences involved in searching the list, I don't recommend you do this unless the rule will affect many elements on the page, and it might have to be changed often. If that fits your use case, then it can be very fast, especially if you keep cached references to the rules you need to change. But this doesn't actually describe many common use cases, and when it doesn't, it's troublesome enough that it could be called premature optimization.
The only way to have a conflicting external CSS file override the inline <style> element without changing your HTML file at all, based on the code in your question, is by adding the !important hack to your external CSS file:
p.class1 {
background-color: blue !important;
}
But this is a hack, is bad, and should not be done, because you are throwing away the "Cascading" part of CSS when you use !important; instead, you should just remove p.class1 { background-color: red; from your inline <style> element, or replace its value with blue, since you don't want red to be used.
Instead, you should have your external stylesheet load after the <style> element. This can be done by simply flipping their order:
<head>
<style>
p.class1 {
background-color: red;
}
p.class2 {
background-color: green;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
This will override the <style>'s p.class1 value of red with the CSS file's p.class1 value of blue.
Alternatively, if you add a wrapper/container element around your <p> elements, you can set your external CSS file to have a more specific selector, which would override the less specific selector in the <style> element. Something like:
HTML:
<div class="wrapper">
<p class="class1">This is the first paragraph..</p>
<p class="class2">This is the second paragraph..</p>
</div>
CSS:
.wrapper p.class1 {
background-color: blue;
}
Since the selector .wrapper p.class1 is more specific than the inline selector p.class1, it will normally override the inline selector.
Firstly, there is no real difference between the external stylesheet and the internal <style> tag. The one defined later will take effect. I presume you have included your CSS before your <style>, so this part of the CSS will never work:
p.class1 {
background-color: blue;
}
Secondly, all inline styles will overwrite any CSS, so your jQuery .css() calls will always work. Setting it to an empty string will remove that inline style property, so it will naturally fall back to the lower-priority stylesheets - in your case,
<style>
p.class1 {
background-color: red;
}
...
</style>
Thirdly, no there is no way to manipulate the internal <style> dynamically. So if you want your p.class1 to revert to blue after inline styles are removed, you should either:
Declare your <link href="external.css"> after your <style>, which would then cancel out your p.class1 internal style. (This then begs the question of: why would you want to include that property for it to be cancelled out then?)
OR
Just use CSS and avoid internal styles.
I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image
For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.
you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/