Use a new CSS file to override current website's - javascript

My website has currently 3 CSS files that are automatically included as a part of the website and I do not have access to the source i.e. index.html of the website but I do have access to the CSS files of my website.
I am trying to use my own style to override my websites CSS files and create a new CSS file that would contain all the styling that I would like to overwrite on my website.
I have tried using #import url(css4.css) and I have placed that at the top of my last CSS file but that wouldn't overwrite the last CSS file's styling.
How can I achieve this?
<link rel="stylesheet" type="text/css" href="currentCSS1.css">
<link rel="stylesheet" type="text/css" href="currentCSS2.css">
<link rel="stylesheet" type="text/css" href="currentCSS3.css">
<!-- How to add this below just by using CSS? -->
<link rel="stylesheet" type="text/css" href="newCSS4.css">

Besides using !important that most answers are advising you to use, this is a matter of CSS specificity
The concept
Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.
How is it calculated?
The specificity is calculated on the concatenation of the count of
each selectors type. It is a weight that is applied to the
corresponding matching expression.
In case of specificity equality, the latest declaration found in the CSS is applied to the element.
Some rules of thumb
Never use !important on site-wide css.
Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).
Never use !important when you're writing a plugin/mashup.
Always look for a way to use specificity before even considering !important
can be represented by 4 columns of priority:
inline = 1|0|0|0
id = 0|1|0|0
class = 0|0|1|0
element = 0|0|0|1
Left to right, the highest number takes priority.
Here is a snippet with a Full example of a CSS specificity
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY: 0/1/0/0 */
#id {
background-color: green
}
/* SPECIFICITY: 0/0/1/0 */
.class {
background-color: yellow
}
/* SPECIFICITY: 0/0/0/1 */
section {
background-color: blue
}
/* ------------ override inline styles ----------- */
/*to override inline styles we now use !important */
/* SPECIFICITY 0/0/1/0 */
.inline {
background-color: purple !IMPORTANT /*going to be purple - final result */
}
<article>
<div id="id">
<div class="class">
<section>
<div class="inline" style="background-color:red">
<!--SPECIFICITY 1/0/0/0 - overridden by "!important -->
</div>
</section>
</div>
</div>
</article>
Now here is the Full snippet step by step
ID: GREEN
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/1/0/0 */
#id {
background-color: green
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>
CLASS: YELLOW
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/0/1/0 */
.class {
background-color: yellow
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>
ELEMENT: BLUE
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 0/0/0/1 */
section {
background-color: blue
}
<article>
<div id="id">
<div class="class">
<section>
<div>
</div>
</section>
</div>
</div>
</article>
INLINE STYLE: RED
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
<article>
<div id="id">
<div class="class">
<section>
<div style="background-color:red">
<!--SPECIFICITY 1/0/0/0 -->
</div>
</section>
</div>
</div>
</article>
OVERRIDDEN INLINE STYLE: PURPLE
/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */
/* SPECIFICITY 1/0/0/1 */
section > div {
background-color: purple !IMPORTANT
}
<article>
<div id="id">
<div class="class">
<section>
<div style="background-color:red">
<!--SPECIFICITY 1/0/0/0 -->
</div>
</section>
</div>
</div>
</article>
You can calculate the specificity of your element(s) here
Note:
A must read on this subject
Inheritance and cascade
CSS Specificity
Specifics on CSS Specificity

Here's a fun solution no one has mentioned.
Facts:
You cannot modify the HTML of the page at all - no problem!
You can modify the CSS files, but the developers may modify them
again later and remove any changes you made - not a worry.
You cannot/do not want to use Javascript and JQuery - fine by me.
You can add more files on to the server - Excellent!
Let's do some .htacess hacking for fun and profit!
Document root .htaccess file:
Options +FollowSymlinks
RewriteEngine on
RewriteBase /
RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]
Result: hackedCSS3.php is silently served instead of css3.css on every request.
REF: http://httpd.apache.org/docs/2.2/howto/htaccess.html
hackedCSS3.php file:
<?php
// Send the right header information!
header("Content-type: text/css; charset: UTF-8");
// Output the css3.css file
echo file_get_contents("css3.css");
?>
// Add your CSS here with any neat !important or override tricks (read: specificity)
div { ... }
Bonus:
You could expand this solution to include all three .css files in this one .php file (but only serve, say, css3.css and send the css1.css and css2.css to a black hole with .htaccess), and use clever regular expressions to remove/modify those developer's CSS without touching any of their files. The possibilities are tantalizing.
Addendum:
Can you be a bit more specific on where to include these files?
The .htaccess file should be in the document root directory of the website. This is where www.example.com/index.html would load index.html
Should the hackedCSS3.php file be in the same directory as the other
css files?
It can be in any directory you specify in the .htaccess file. The document root is fine. Change
RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]
to
RewriteRule ^(.*?)css3.css(.*?) /folders/you/want/hackedCSS3.php$2 [L]
Should our css content (where you specified // Add your CSS here...)
should be within html style tags?
No. Treat your CSS code in that section as if it were a .css file. You do not need <style> tags.

To use CSS only, the best way would to use Chrome or FireFox's developer tools and find the various style you want to overwrite.
The for each of the style you find that need adjusting then use the !important modifier.
.newClass {
color:red !important;
}
Another way would be to write unique css class names and again use !important if you need. The real trick here is in specificity. If an identifier is more specific the rule will be applied.
6.4.1 Cascading order
6.4.1.4
Finally, sort by order specified: if two declarations have the same
weight, origin and specificity, the latter specified wins.
Declarations in imported style sheets are considered to be before any
declarations in the style sheet itself.
<a class="my-most-awesome-link its-really-cool">Most awesome link</a>
.my-most-awesome-link.its-really-cool {
text-decoration:none !important;
color:red !important;
}
If you are desperate you could use javascript to remove the unwanted css.
See this JSBin for a working example.
I found this interesting technique
<script>
function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"; //determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"; //determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement);
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
allsuspects[i].parentNode.removeChild(allsuspects[i]); //remove element by calling parentNode.removeChild()
}
}
}
removejscssfile("css1.css", "css") ;
removejscssfile("css2.css", "css") ;
removejscssfile("css3.css", "css") ;
</script>

In your new CSS file, add !important to the block of code, for instance:
if you have this on css1.css:
h2{
color:#000;
}
In css4.css put the same element, but with !important, as follows;
h2{
color:#ccc !important;
}
Therefor, !important will force that this style will be by all means the style set for the element to which it's applied.

Use #import url('css4.css') in one of your existing css page. Then use specificity to be highlighted your new code as bellow:
Html :
<ul class='ulclass'>
<li class='liclass'>
<a class='aclass>The text</a>
</li>
</ul>
css1.css :
.aclass{
color : red;
}
css4.css :
ul.ulclass li.liclass a.aclass{
color: green;
}
Then you will have green color in your a element

write a new css, and use id of elements rather than class. Also use !important in css.

An alternative: Rely on the cascade, instead of specificity
A number of solutions here recommend using #import to include your css4.css file and then modifying the selectors therein to have a greater specificity or to use the !important declaration, but there is yet another way.
Paste the entire contents of css4.css at the end of css3.css. In this way, you need not rely on !important or specificity, because the cascading inheritance will adopt your rules at the end of the file if they are of equal specificity.
With this method, you are sacrificing modularity for easier implementation.
Example of pasting, relying on cascade:
/* Contents of css3.css */
.mycooldiv {
font: bold 1.2em sans-serif;
color: tomato;
}
/* Pasted contents of css4.css */
.mycooldiv {
color: lime;
}
<div class="mycooldiv">Hello World</div>
However, it would be easy enough to create greater specificity by simply prepending html to the beginning of every rule in css4.css, if you don't want to paste it at the end of css3.css. This is preferred to adding !important where it works.
Example of importing, relying on greater specificity:
/* #import of css4.css with greater specificity */
html .mycooldiv {
color: lime;
}
/* Contents of css3.css */
.mycooldiv {
font: bold 1.2em sans-serif;
color: tomato;
}
<div class="mycooldiv">Hello World</div>

I think I have an answer. The way that I have tried to achieve this is:
1) Say my css3 is the last CSS in the list and I have all my changes in css4. I have made a copy of css3 and called it "css3-Original.css" and added my css4 in the same folder. I then created another css file called "css3.css" (because that is the last one it takes from the list) and added imports of my Original css3 first and then my overriding css4.css file as given below:
css3.css (The new one)
#import url("css3-Original.css")
#import url("css4.css")
This is the best way I found it to work. This way although I know that my css3.css file will change on updates but I know how I can replace it very easily and quickly. I have used !important in my css4.css wherever necessary (if required) but basically because its the last css file, it uses that styling as compared to any previous ones (unless they are !important).
Thanks for the suggestions guys. I finally managed to come to a solution.

If I understand you're question correctly, adding #import url(css4.css) to the top of css3.css does import your stylesheet into css3.css. But your styles are being overridden by the styles in css3.css. This is because of Cascading Order and Specificity. In order for your css4.css styles to be used, your selectors must have a higher specificity than the selector in css.3.css you are trying to override.
Example: <h1> tags will be colored red.
body h1 { //this is more specific
color: blue;
}
h1 { //this is less specific
color: red;
}
But since you're #import url(css4.css) line of code will get removed every time the developers update the css3.css file this is not a "bullet-proof solution"
Do you have the ability to add any javascript to the site? If so you could use the following solution
jQuery
$('head').append('<link rel="stylesheet" type="text/css" href="css4.css">');
Javascript
var head = document.head
, link = document.createElement('link')
link.type = 'text/css'
link.rel = 'stylesheet'
link.href = 'css4.css'
head.appendChild(link)
Source: https://stackoverflow.com/a/11833777/2687861

Unfortunately, I have to agree with phari.
Quote:
1) You cannot modify the HTML of the page at all, and therefore cannot include another CSS file. 2) You can modify the CSS files, but the developers may modify them again later and remove any changes you made. Hence you cannot permanently modify the CSS files. 3) You cannot/do not want to use Javascript and JQuery). If all of these things are true, there is no solution to your problem.
Commented by phari on Mar 26 at 14:29
Let me break it down. I will try my best to explain why there's no solution (correct me if I am wrong at any of these options);
Option1: Using jQuery or Javascript.
You cannot modify the HTML of the page at all!! You do not want to use jquery nor javascript.
This means that all answers to your question mentioned on this page which involves jquery or javascript are disregarded. This does not mean the answers given on this page are wrong. In your case it's not possible.
Option2: #import url(css4.css);
Your website has 3 css files that are automatically included as a part of the website, but unfortunately, you DO NOT have access to ANY of these css files. You can not place this piece of code in css3.css, or any of these files.
You can modify the CSS files, but the developers may modify them again later and remove any changes you made, which means #import url(css4.css); can also be removed.
Also using #import url(css4.css); would be completely useless. You'll have to place #import url(css4.css); at the end of css3.css, but this won't work because #import rules must always be first in a document. If I am not mistaking ilia (who commented on Mar 23 at 9:42) meant the code can be place anywhere in the file. #import url(css4.css); must be at the top. The link ilia provided as "prove" also specify that it's a requirement to place it at the beginning.. Check the two links below.
More Info visit http://webdesign.about.com/cs/css/qt/tipcssatimport.htm or https://developer.mozilla.org/en/docs/Web/CSS/#import#Specifications.
Option 2 is disregarded too.
I don't think there could be another way to do what you want to do.
Hence, there is no solution to your problem.

For duplicate CSS definitions, the last definition will have precedence.
If the added css4.css file is actually referenced after the "3 css files that are automatically included", then the css4.css file's definitions should override the prior duplicate definitions from these other files.
If you are not seeing the results that you expect, use the "view source" option of your browser to confirm the sequence in which the CSS files are referenced. Also use the "Developer tools" of the Chrome browser or the "Firebug" add-on for the Firefox browser to find out how the browser is interpreting the CSS definitions to yield a result that you did not expect. These tools should provide insight to your problem.

You can just overwrite the text in the css file available to you, the style which you want from previous css file you can copy that code in the you can add with that new code refresh your website the result you need appears

Related

Inline math overlapping with text in MathJax in HTML webpage

The inline math sometimes overlaps with the text that follows. I think I've been able to pinpoint the exact source of the issue, which is a line in the stylesheet, but I don't understand what's going on and how I should fix it.
Here is my style.css (this is enough to reproduce the issue):
section.post *, section > p * {
max-width: 100%; }
Here's my HTML page:
<html>
<link href='../stylesheets/style.css' rel='stylesheet' type='text/css' />
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: { equationNumbers: { autoNumber: "AMS" } },
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
});
</script>
<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<!-- for mathjax support -->
</head>
<body>
<div id='container'>
<div class="content">
<section class='post'>
<p>If \(T=100\) then compute \(1/{\sqrt{T}}\) again.</p>
</body>
</html>
Here's what the output looks like:
Any help will be much appreciated!
The css * applies to ALL elements inside other elements. If you remove the stars, it works as expected and since I assume you want the p to be at most 100% wide, such rule should still accomplish what you want.
As you may know, MathJax takes what is a single element of text from the beginning, and splits it internally into multiple spans based on the designated delimiters it finds. These spans form a rather complicated nested structure (check your browser development tools yourself, there is absolute positioning and MathML and lots of more in there) where some spans have the display property set to inline-block. Now max-width doesn't apply to inline elements but it does to inline-block elements. With your rule, all of these nested spans also get the max-width: 100% rule set.
We can mimick the behaviour like this:
.truncated { white-space: nowrap; max-width: 10px; }
.ib { display: inline-block; }
<p>
<span class="truncated ib">
Text that is truncated due to <tt>inline-block</tt> and <tt>max-width</tt>
</span>
<span>
Ensuing text
</span>
</p>
<p>
<span class="truncated">
Text that is not truncated thanks to <tt>inline</tt> and <tt>max-width</tt>
</span>
<span>
Ensuing text
</span>
</p>
You need a master of MathJax to get a precise reason as to where and why this happens, but my guess is that during some intermediate step, the content of some inline-block span gets a max-width set indirectly by its parent content or directly through parent css at which point the max-width of the child also gets a meaning (max-width in percent has no meaning when the parent doesn't have a width). When the type-setting proceeds, this child box needs to grow which it can't due to this restriction. The need for growing may come from a font being downloaded or something else and may also differ between expressions since some expressions are typeset in a different way than others.
I think the lesson here is that you can style elements that MathJax outputs (typically font-size, color etc...) but I would be careful when it comes to styling them with restrictions on dimensional properties (height, width, min-height, min-width, max-height, max-width) because MathJax needs this freedom to do a good job and if you don't have master level insights into the MathJax typesetting procedure, it is also not likely that this type of styling will have the effect you intend it to have.

Can elements be styled with external CSS

An external CSS file is applied globally to the referencing HTML page. Is it possible to limit the scope.
I am aware that I can do .myCssClass etc but for this project, I'm going to need 2 very different styles in one page. Consider 2 divs, where one uses CSS stylesheet 1 and the other uses stylesheet 2 (and there will also be the orthodox CSS for the site).
The style sheets will also be used else where, so I can't edit the CSS. It would be idea to share the external CSS by element. Something like
<div stylesheet="../style.css">content 1</div>
<div stylesheet="../style2.css">content 2</div>
Is this possible?
You can use scoped attribute, but unfortunately it is supported only by Firefox. So, the ids and classes is the best, accepted, approved and common solution.
<div>
<style scoped>
h1 {color:red;}
p {color:blue;}
</style>
<h1>Heading</h1>
<p>hello world! I'm of blue color!</p>
</div>
<p>I'm out of the scope, so I'm of the black color :(</p>
You must have then 2 different classes for them, one class from style.css and other from style2.css, as they'll overwrite one over the other if you only use the 'div' selector, if you can choose a specific class from each style.css, I think that would be wiser than complicating your life, or try the solution that Paweł posted
As far I know isn't possibile, but you can create "zones" using CSS selectors, in example, take a look here:
<div class="content">
<div class="myElement">
</div>
</div>
<div class="footer">
<div class="myElement"></div>
</div>
with this selector in css:
.content .myElement{
height:50px;
width:50px;
background-color:blue;
}
only the div with "myElement" class wrapped in the div with the "content" class will be affected by this rule.
here's a fiddle showing this case:
https://jsfiddle.net/fn7ohw75/

Different style sheets for different parent pages

I am struggling with tweaking my Angular JS application.
There is the whole application where in the end I'd like to use my app.css file as a style sheet. So each state like:
domain/#/articles
domain/#/articles/1
domain/#/users
domain/#/users/1
will use this file.
However I do have a cms section in my application (i.e. domain/#/cms/articles and I'd like to use completely different styles there (nothing in common with app.css). Is there anything I could do to easily load cms.css for selected states and do NOT load app.css there?
My initial idea was to add two style sheets in my index.html file with either ng-if or ng-show for each but that's definitely not a good approach (most likely it wouldn't even work).
What about assigning a top-level class to each page, and then nesting the styles that are unique to that page within it? This is made even simpler if you're using a CSS preprocessor like LESS or SASS.
For example, you'd have something like this:
<div class='main-page' ng-controller='main'>
<p>Some text</p>
<p>Some more text</p>
</div>
<div class='cms-page' ng-controller='cms'>
<p>Some CMS text</p>
<p>Some more CMS text</p>
</div>
And then in your CSS:
.main-page {
//main styles here
background-color: black;
p {
color: white;
}
}
.cms-page {
//cms styles here
background-color: red;
p {
color: blue;
}
}
Extrapolate that idea as needed, but now you don't need to worry about reusing class names or having styles on one page conflict with styles on another, as everything is nested safely in its page class.
For global styles, of course, you just leave them out of the top-level page classes.

How can I selectively change text using a CSS class?

I need to add a CSS/HTML 'fragment' to a page to change the text in the following:
<div>
<h3 class="category-heading">Keep this text:</h3>
</div>
<div>
<h3 class="category-heading">**Change this text**:</h3>
</div>
I have tried the following:
<style>
h3.category-heading {
text-indent: -9999px;
}
h3.category-heading::after {
content: “New and Featured Products”;
text-indent: 0;
display: block;
line –height: 120%;
}
</style>
But this changed both instances of the text.
Is it possible to specify the second instance of the css class to be changed? or is it possible to select and change the wording in the second css class by adding a html fragment?
Supposing you can use Javascript by including it an HTML fragment :
Depending on the inclusion mecanism (we need to know more about the tools you use), something containing :
<script>
window.onload = function(){
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
}
</script>
If the first solution breaks some features of your website (because It could override defined behaviour), you should use :
<script>
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
</script>
Why not to use an id attribute?
<h3 class="category-heading" id="itemThatShouldBeChanged">**Change this text**:</h3>
and than just
#itemThatShouldBeChanged {content:"other text"}
You should take a look at nth-child
Be aware that this is CSS3
this will give you the following css selector :
div:nth-child(2) h3.category-heading::after

Remove CSS of an image (CSS is part of a generated code)

I am trying to remove the css of an image. My actual code doesn't include this CSS, but it comes from a generate code. I can't touch that neither modify anything that is related to the generared code.
This is my real code
<div class="bubble">
<img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png" style='float: left;' alt="Quotes">
<p id="comment11">I was very impressed with the unique design and high quality of this pen.
</p>
</div>
<div class="quote_speech">
<div class="name" id="author11">By PEDE</div>
<div class="company" id="company11">September 25,2013</div>
</div>
This code is added to a div from the generated code name rightCol
And there is a CSS class declare the following way
#rightCol img{
display:block;
float:none;
margin:0 auto 0 auto;
position:relative;
border:0;
padding:3.5px 0;
backgroun-color:#fff;
width:166px
}
The issue is on width:166px.
The bad new for me is I can't remove it manually(Generated code).
So I was thinking to use javascript for this.
using this $('#one').hasClass('img')
But this returns me false.
I did a demo getting in JS FIELD getting the CSS. DEMO
If I remove the 166px from the CSS it works, but that solution is not available for me. And the has class returns me false. Wondering why?
Thanks in advance
Actually you can use !important to override this behavior but it is better to declare more specific rule rather than using !important
#rightCol img#one {
width: auto;
}
Demo
Hi I checked your demo page and just added one line to your document.ready function.
$(document).ready(function () {
$('#one').css('width', 'auto');
randomtip();
});
check and let me know if still problem exist.

Categories

Resources