Override .css stylesheet file (not inline) - javascript

Is it possible to somehow override the default (in this case liquid) CSS stylesheet, but without using inline styles?
Also I want that style to apply only to that specific page, and not any others.
Yes, I can use !important inside <style> tag on that specific page, but I would need to reset a lot of things. It just too much work, and looks very messy.
So is there any way I could reset ALL elements to default property values, and use my own style just on that one page?

Well you can't modify your .css files, but you can replace files dynamically using js.
function replaceFile(newFile, fileLink) {
var oldcss = document.getElementsByTagName("link").item(fileLink);
var newcss = document.createElement("link");
newcss.setAttribute("rel", "stylesheet");
newcss.setAttribute("type", "text/css");
newcss.setAttribute("href", newFile);
document.getElementsByTagName("head").item(0).replaceChild(newcss, oldcss);
}
Another solution, would be to add the desired styles using jQuery or js.
$('.demo').css({'background-color':'red','color':'white');

css stands for Cascading Style Sheets so once you've added a style you can only change or remove it by using another style. to answer your question specifically no you can not. or as mentioned in the comments just remove the stylesheet from that specific page.

You can select all elements inside a wrapper with * and override:
Example:
.mylink{
color: red;
}
.mylink:hover{
color: black;
}
.reset *{
color: orange;
}
.reset *:hover{
color: silver;
}
This is the link without reset:
Link
<div class="reset">
This is the link with reset:
Link
</div>

Related

How to dynamically change css values (like color in whole app) etc

I have one question...
If you want conditional styling: you must use ng-class or ng-style construction.
But...
For example: I'm an admin, and I want to change color of my application with custom color from colorpicker. How can I change some code in css?
For example I have this line in style.css:
body{
background: #ffffff;
}
(also all tags like a, h1 etc implement some color)
and in controller I change this #ffffff to #000000.
What is the best way to change this color in css, without using ng-class or ng-style on each tag in each controller?
The best way is generate a file like color.css with all css rules with color, background-color, border-color etc. overridden. But angularjs will not be enough.
color-default.css
body {
background: #fff;
}
color.css
body {
background: #f00;
}
Full JS way
Add class on every element you want to override.
Create class for every properties like so:
.skin-color { color: {{color}}; }
.skin-background-color { background-color: {{color}}; }
.skin-border-color { border-color: {{color}}; }
etc..
Apply class on your html where you want:
<h1 class="skin-color">My title</h1>
<p>Hello I'm online!</p>
<p class="skin-background-color">No difference!</p>
<p>I'm link</p>
You can save the color variable in localStorage for example.
Démo: http://codepen.io/anon/pen/jPrabY
You could write the CSS rule in JavaScript and add it to a stylesheet dynamically. A couple of good articles on how to do that are here and here.
var myColor = '#FF00FF';
var stylesheet = /* get stylesheet element */;
stylesheet.insertRule('.dynamic-color { background-color:"' + myColor +'";}',0);
Of course, in a pure Angular way, you would create a directive that wraps the DOM/stylesheet interaction.
The easiest way I can think about is, for example, clicking on myBox changes its background-color.
html:
<div class="myBox" ng-click="changeBackgroundColor()"></div>
js:
$scope.changeBackgroundColor = function(){
angular.element('.myBox').css('background-color', '#000');
}
css:
.myBox{background-color: #fff;}
Hope I've been helpfull.
Another alternative is SASS or LESS and deal with colors using variable...

How to Stop Overriding of Bootstrap Css Styles

Problem
I have a stylesheet (bootstrap) that when applied in the header overwrites my personal styles.
I do need these bootstrap styles when the js is invoked otherwise the dialog that pops up is un-styled.
How can I stop my own styles from being overwritten?
I didn't understand your question fully, but here's what I understood:
1- You are using Twitter Bootstrap in your project, and it is overwriting your stylesheets.
2- You need bootstrap for a popup dialog and nothing else.
Well, from the first question, you can:
-Call your hand-made stylesheet AFTER calling Bootstrap's css.
-Change your stylesheet CSS classes and ID's.
-Hierarchize your classes from the ID's, for example:
#foo{
color: black;
}
#foo .bar{
color: white;
}
#foo .bar>li{
margin: 10px;
}
-Add a '!important' after the affected classes (Not recommended at all).
For the second matter, you could:
- Costumize your boostrap, you could pick certain plugins (such as popup), and exclude others that you don't use. (Costumize Bootstrap)
Like Nick R mentioned in the comments - Order is important here. The browser will 'overwrite' styles as stylesheets are loaded. For example, if you have two sheets:
.darkdiv {
color: #fff;
background-color: #000;
}
and then a stylesheet with:
.darkdiv {
color: #888;
}
Any element with class "darkdiv", will keep the original background-color but have the grey (#888) colored text as that style was 'overwritten' by the second stylesheet.

Can I prevent a CSS style to be overwritten?

I'd like to apply a CSS to some linkbuttons on page load but one of them <a id="lb1">logoff</a> must keep its style, no hover nor other event must change its style.
The linkbuttons have no class and the css applied to all of them is done to tags, this way:
a
{
//style
}
a:hover
{
// style
}
Is it possible?
No, you can't.
You can use more specific selectors (or even inline CSS with the style attribute) so that they are less likely to be overridden accidentally.
You can use the (eugh) sledgehammer of !important so they will only be overridden by another !important rule.
There is no way to prevent them being overridden though.
Please please please please please avoid using !important whenever possible. You will run into SO many annoying problems and issues from using this. I consider it a very lazy hack.
What you want to do is append a class to the link that you don't want overwritten. Classes are given a higher priority than general selectors (such a, p, b). So if you append this class to the link, the CSS will override the default CSS you have set for a.
CSS:
a {
color: red;
}
a:hover {
color: blue;
}
.derp:hover { /*you can add everything you want to preserve here, essentially make it the same as the link css. you can also change it to #lbl:hover, although there's no good reason to be using an ID as a CSS selector*/
color: red;
}
HTML:
this will turn blue on hover
<a class="derp" href="#">this will stay red on hover</a>
Here's a fiddle to show you. The second link has a class appended that preserves the original style: http://jsfiddle.net/p6QWq/
Why not add a class to all the link buttons you want to change, and not add it to the one you don't want to change.
Then you can call:
$(".myClass").css("backgound-color", "blue");
This would change the background color for every element with a class of myClass to a blue background.
Or you could add a whole new class to the link buttons that have a class of myClass:
$(".myClass").addClass("myExtraClass");
This would then make the class attribute of your link button class="myclass myExtraClass"
Seeing your code posted makes it a little more clear on what you want to do. Try this:
a {
text-decoration: none;
color: orange;
}
a:hover {
text-decoration: underline;
color: blue;
}
This would apply a default style to all <a> elements. Now you could overwrite this default style by providing a specific style for the anchor with the id you gave above:
#lb1 {
color: black;
text-decoration: none;
}
#lb1:hover {
color: black;
text-decoration: none;
}
I mocked this up in a quick and dirty jsFiddle. See if this gives you the desired result. IDs take precedence over classes and default element styling. So if you have one that you want to keep the same, apply and ID and style the particular element accordingly. This would also help you by preventing you from having to apply a class to several elements. It's less coding to apply one ID than to apply twelve classes. (Just an exaggerated example. I don't know how many links you have.)
Hope this helps.
css is cascading by definition, so any style you apply to a tags will apply to this specific one, except if you overwrite it.
You'll have to either assign a class to all the other buttons or overwrite all the default properties for this specific button.
Also, do not forget the pseudo-classes :visited and :active.
You should use !important in your css like :
a {
/* style */
background: #FFF !important;
}
a:hover {
/* style */
background: #FFF !important;
}
You could always overwrite your css by simply creating another stylesheet and place it at the END of your stylesheet links in the head of your html.
<head>
<link rel="stylesheet" href="location/location/first_stylesheet.css">
<link rel="stylesheet" href="location/location/revised_stylesheet.css">
</head>
This is not the most productive method of overwriting your css however; one would be well advised to eliminate the necessity for this separate stylesheet by simply appending elements with a class attribute. The class attr will allow you to modify basic html elements, tags and overlay a final layer to "rule them all". Enjoy!

Dynamically change CSS rules in JavaScript or jQuery

I'm looking for a way to change the CSS rules of my stylesheet imported in the document. So I have an external stylesheet and some class and div attributes inside. I want to change one of the rules with JavaScript or jQuery.
Here is an example :
.red{
color:red;
}
So the idea is to do something in JavaScript and the HTML knows that now the color is another color like this:
.red{
color:purple;
}
But I want to have this rule for every element that I add in the future by the way of append. So if I add a span with the CSS class .red, the text has to be purple and not red.
I hope I made it clear.
You can inject style declarations into the DOM.
$("head").append('<style>.red { color: purple }</style>');
You jQuery .css() method to do that.
$('.red').css('color', 'purple');
For multiple rules:
$('.red').css({
'color': 'purple',
'font-size': '20px'
});
When you add dynamic element in future to DOM by the way of append, just give those element some class or id and write CSS rules like above after appending them and they will applied for all dynamically created element.
Working sample
Note
Add dynamic rules is not a good solution in my point of view. Instead of the you can load some external CSS file.
But if you need something like dynamic rules add method then:
$('head').append(
$('<style/>', {
id: 'mystyle',
html: '.red {color: purple }'
})
);
And for future use:
$('#mystyle').append(' .someother { color: green; font-size: 13px } ');
Working sample
If you want to add a rule, instead of editing each element's style directly, you can use CSSStyleSheet.insertRule(). It takes two parameters: the rule as a string, and where to insert the rule.
Example from the above link:
// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0);
In this case, myStyle is the .sheet member of a style element.
As far as I can tell, the style element must be inserted into the document before you can grab its sheet, and it can't be an external sheet. You can also grab a sheet from document.styleSheets, e.g.
var myStyle = document.styleSheets[1]; // Must not be a linked sheet.
myStyle.insertRule("#blanc { color: white }", 0);
Note: The page recommends modifying elements by changing their classes, instead of modifying the rules.

In CkEditor, how do I apply a stylesheet while I'm currently editing?

When CKEditor is loaded and I'm editing the stuff, I want the background to be yellow as I edit.
How do I "set" that stylesheet inside the editor.
There is an option contentsCss which lets you to load an external CSS stylesheet containing your custom style definitions. Using that you can make your content look exactly as it would look on your website. So in order to use it you need to instantiate CKEditor in the following way:
CKEDITOR.replace('mytextarea', {
// Custom stylesheet for the contents
contentsCss : 'assets/custom.css'
});
And you would also define you custom.css for example as follows:
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
color: #444;
background-color: yellow;
}
h1, h2 {
color: #555;
background-color: #EFEFEF;
}
/* etc some custom styles */
EDIT. Using config.js
There are couple of ways to achive what you need using config.js file. Example:
CKEDITOR.editorConfig = function( config )
{
// ... some other configuration options
// Define some custom class to be assigned to body element ogf the editor area
config.bodyClass = 'body-yellow';
};
Create contents.css file in the same folder as config.js. Inside define your styles:
.body-yellow {
background-color: yellow;
}
That's it.
Something like this:
var editor = CKEDITOR.replace( 'editor1' ); //textarea with id="editor1"
editor.on( 'instanceReady', function( ev ){
//set the background properties
this.document.$.childNodes[1].childNodes[1].style.backgroundColor = 'Yellow';
editor.focus();
});
Hope it helps
Create a CSS class that has the background color you want, then use jQuery .focus(); in an additional javascript in your footer:
$('#target').focus(function() {
$(this).addClass("yellowBG");
});
If you want to go a bit further you can actually define your custom style sheet from your javascript at run time -
function generateCSS(){
var base = document.createElement('style'),
baseAttributes = {'id': 'yourID', 'type': 'text/css'},
cssString = '';
base = $(base).attr(baseAttributes);
//Now create your css rules
cssString += '.body-yellow {background-color: yellow;}';
base.append(cssString).appendTo('head');
}
And then when you are done with it, you can delete it, if you so desire.
You could of course use plain JavaScript to do this. I used jQuery here just to be concise. This method sort of helps when your plugins virtualise your rows and you don't want to crowd your style sheets with rules that may or may not be used. So when the rows are deleted and inserted (assuming you have quite a lot of custom styling on these rows), you don't need to keep digging through the DOM to re apply the styles -> generate your css and be done with.

Categories

Resources