Overriding CSS styles

Question

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?

@nrabinowitz - the js file is auto-generated from a gist. Its not the content I'm concerned with, but the display of the gist. I'm trying to swap out the default display to substitute my own. The forking solution doesn't work for this. — Suraj
– Suraj, Commented Mar 17, 2012 at 22:02
@Prescott - There is a good reason, I want to host my code on Gist and Gist does the magic-behind-the-scenes parsing of a code file into div classes that are specific to each language. So I want Gist to do its thing, I just want to swap in my own embed.css to colorize the code the way I want to — Suraj
– Suraj, Commented Mar 17, 2012 at 22:05
the JS is just building HTML and adding a CSS file. Just copy those files and host them personally. I don't see a reason why you would want to keep them hosted there. And if you really want to host them there, why not create your own copy? — Joseph
– Joseph, Commented Mar 17, 2012 at 22:54

nrabinowitz · Accepted Answer · 2012-03-18 05:22:16Z

4

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/

edited Mar 18, 2012 at 5:22

answered Mar 18, 2012 at 5:15

nrabinowitz

55.7k10 gold badges152 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Overriding CSS styles

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related