Overriding CSS styles - javascript

Lets say I put the following in <body>
<script src="https://gist.github.com/2059.js"> </script>
looking at that js file, the first line is:
document.write('<link rel="stylesheet" href="https://gist.github.com/stylesheets/gist/embed.css"/>')
I don't have write permission to that js file. Is it possible to dynamically swap out embed.css and swap in the href to another version of that CSS file? Can this be done such that it requires no user input - the page will load with my own CSS file and not embed.css?

The easiest option here is going to be to load your own CSS in a way that will override the Gist CSS - this is going to be much simpler than trying to dynamically change the code Gist provides. Two options for this:
Add !important to your CSS declarations.
Use the same selectors as the Gist CSS, but prefix them with another selector to make them more specific than the Gist CSS declarations, e.g. mycontentarea .gist-syntax .c
The second option is probably going to be more reliable, as long as you know a selector for an enclosing element. See a working example here (I've replaced the standard Gist string color with a nasty yellow): http://jsfiddle.net/aqGEc/

Related

Editing CSS (changing selectors) at runtime with JavaScript: prevent application inside DIV

I would like to be able to prevent a CSS file from applying to the inside of a DIV tag.
The CSS file is included in the <head> section of a HTML document. I cannot remove the file or change it. All I have control of is the inside of that DIV tag. The HTML document is generated with MediaWiki, so I'm not allowed to use iFrames. I cannot host my content anywhere else, but I can take external resources such as CSS and javascript, upload them, and include them in the inside of my DIV.
Currently, I have Jquery, and I can include all sorts of external libraries.
Using jQuery to find the <link rel="stylesheet" href=...> and then .remove()ing it does work, but that messes up the rest of the page, which I am prevented from doing by a LOT of red tape.
Is there a way to "javascriptically" do something to the stylesheet such that it applies only to anything that's not inside my DIV? Maybe using the :not() selector?
I have no idea, and I have never touched the not selector before. Please help. Thank you.
You can't make prevent CSS from applying to a part of the document, even if you could change it (which is doable with Javascript as long as you don't care about users with no Javascript). You have two options basically:
Override the CSS. Probably the least painful way is to take some CSS reset stylesheet and prefix every rule so that #1 it only applies to your div, #2 it has high enough specificity to override all MediaWiki rules. You can then apply your own styles on top of that.
Make the div not part of the document. You could create an iframe in Javascript and move the contents of the DIV there. (Shadow DOM would be a nicer approach but there is not much browser support yet.)

How to use specific font with highlight.js

Updated with the proper link to the example
I am using a Hugo theme that comes with bundled with CSS and uses Highlight.JS for syntax highlighting. The web pages I have created show a plain "courier" based fixed width font in the code blocks see here for example of my site page
I would like to use another font, like sans-mono or something more neat looking, like it shows on Highlight.JS web page here
I'm not super familiar with Javascript and CSS, just trying to use them. Is there an easier way to tell Highlight.JS to use specific font? Assuming I have font files available.
Thanks
ZeeKay
Add this to your CSS:
pre > code {
font-family: "Sans Mono", "Consolas", "Courier", monospace;
}
This will use the first font in that list that is available on the user’s system. Sometimes fonts have different spacing that their real names, so for example if "Sans Mono" doesn’t work, try "SansMono". Make sure to put monospace last so that at least some suitable font is chosen if the user doesn’t have any of the listed fonts.
If this doesn’t work, maybe it’s due to a selector specificity problem, where the default styles provided by highlight.js are overriding your own styles. Something that will help avoid this is putting the <link> that loads your CSS file after the one to load the highlight.js CSS file. If this doesn’t work, you will have to make the pre > code selector more specific, such as changing it to #main pre > code if all page content is wrapped in an element with the ID main.
If you’re not sure how to add CSS, the easiest way is to put it in the HTML template surrounded by <style></style> tags. Though it’s better to put it in a CSS file and reference it with <link rel="stylesheet" href="myStyles.css">.

apply css on elements which are present in a set of urls

I believe the following is not possible without javascript/jquery but still wanted to confirm as I am not good in css/html/jquery.
I would like to apply certain style to an element but only when a particular url is accessed in my website.
I am using asp.net so a single aspx page template can cater to a host of urls so I cannot write the style in the html of the template.
If I write this style in a css file and include it in the template it will get applied to all urls.
I can selectively load this css file through jquery but I do not want to involve jquery into this as much as possible.
I can also use a asp.net literal control and load the css based on the url from code-behind but then addition of new urls would involve a code change. Also it sounds very messy.
Currently I am applying this through javascript/jquery as below on document.ready
if (window.location.href.toLowerCase().indexOf("/some-url/") > 0)
{
$('#some-element-id').attr('style', 'display:none');
}
But this shows the element for a split of a second before disappearing.
A solution involving jquery/javascript but resolving the above issue will also help.
I hope I was able to explain it properly.
Please let me know if any clarification is required.
It is probably showing at first because it is rendered at least a bit before the page is loaded, so it is shown until the jQuery ready() function is called on page load.
I would think the easiest fix would be to hide the element by default, then show it if it is in the URL:
#some-element-id{
display:none;
}
if (window.location.href.toLowerCase().indexOf("/some-url/") < 0)
{
$('#some-element-id').attr('style', 'display:block');
}
if #some-element-id is on a separate page then
add some-class to your element
define that class in a new .css file
only import that new .css file on the page you want the style
applied to
The URL is not part of the DOM so there’s no element to be selected by the CSS.
As you say the only way you can apply the css in a specific URL is using javascript.
The recommendation I can tell you is use addClass instead to use
.attr('style', 'display:none');
Or if you need to add a lot of css you also can include or replace the a full file like:
$('head').append('<link rel="stylesheet" href="youStilefile.css" type="text/css" />');
I hope it's helps!
the best solution is separate your css styles by codes that generated from server (independent from client).
Also you can test below code instead of $('#some-element-id').attr('style', 'display:block');
$('#some-element-id').hide();
and please insure that your jq lib imported successfully.

Programmatically add all Css stlyings from external CSS stylesheets to the html's <head> tag

I am using a python library to convert HTML page into PDF.
It does it correctly, except it only handles inline styling. It does not reflect the styling applied to DOM elements using external style sheets.
So, as a solution I am thinking of adding those CSS styling from all the external CSS stylesheets into the head tag of the html file and then send it to get converted into pdf.
But, I am not sure how? Can anyone give me any ideas or atleast suggestion on how to go around fixing that? Or, if they know a better solution.
Much appreciate
Is the python running outside or client-side? You can examine the solution here # http://www.xportability.com/XEPOnline/FOTestSuite.html. While this does a lot more, you can reach through that page to the included Javascript. Look for flattenstyle.js for inspiration.
Because our handling is different, we actually copy a selected div element to another hidden div and "flatten" the style by extracting styles we want. What you could do is run such a javascript on page load and save out the div and not destroy it, then you have most all the print styling in the HTML.

Adding CSS via Javascript

I am trying to add some CSS styling (in addition to the styles already in place) via Javascript (simply because i do not have access to the main CSS file)
http://jsfiddle.net/pbPyU/
HTML:
<a class='store-locator-button'>replace me</a>
JAVASCRIPT:
$(function() {
$('.store-locator-button').addClass('tempstorebutton');
$("a.store-locator-button").each(function(index,el){
$(el).text('BUSCAR UNA TIENDA');
});
});
CSS:
.tempstorebutton{padding:5px; color:#fa5dae;}
It works fine in JSfiddle, but not on my site. Any suggestions?
The order in which CSS is applied is important. You should add your JavaScript code at the bottom of the page to make sure it gets applied in case some other styles are already applied before hand. Try !important property too in case your CSS is overriden.
I would recommend having your own css file being rendered after the one you want to override.
Then you should add those classes that you want to override on your css file with the styles that you want. Otherwise it's a frustrating path you should avoid.
!important declarations should not be used unless they are absolutely necessary.
Every browser has default css settings. You must override css.
one approach is to reset css: reset css example
another approach is to override only the parts you need css with !important
keep in mind that in css the more specific is on a higher priority to render
you can also try to check if the css changes you make appear with changing the css code in firefox firebug or google chrome developer or your browser debugging interface and than you can see if your css tweeks work for real or not.
you can also try to give the class a different name.
hope it helps feel free to correct and edit anyone

Categories