A site exists for which I must re-style the front-end “template” using existing markup, but with an updated design. What I hope to do is somehow inject my own locally-written CSS style sheets onto the page so that my styles take over.
It seemed like a User Style Sheet would be the answer, but I was met with the following pitfalls:
-
I often had to !important rules to make them stick, which won’t happen once my styles replace those that are existing.
-
I cannot link to local images.
I do not have a local development environment of the site available to me. The best I can do is wget mirror the site locally and edit the styles from there.. but I would prefer to restyle the existing markup if possible.
Any suggestions for a browser plugin or similar would be appreciated! Thank you!
This is possible. Take a look at the document.styleSheets property. It contains a object tree that is all of the CSS on the page. You can change individual properties of someone else’s style sheet, or link to a local one entirely.
Here’s a link http://www.javascriptkit.com/domref/stylesheet.shtml to start, but I would google for some better resources as-well.
document.styleSheets[0].href = ‘file://js/newstyles.css’