I was wondering whether it is possible to override a website's CSS with my own? I have seen a blog about how to replace a .js file from the website with Fiddler2. I'm guessing this is possible for CSS files too, or is there a better way to do this?
It's trivial to do this with Fiddler, and it's done in the exact same way as replacing a JS file. Simply drag/drop the site's stylesheet to Fiddler's AutoResponder tab, then edit the file or replace it with your own. Or write FiddlerScript to do the same thing. This will work with ANY browser.
If you use Firefox, you can try this addon.
And this the same addon, but this one is for chrome.
You can set a custom stylesheet to any page with your browser, if that's what you're looking for.
Related
I have lot of css files for my website and want to remove unused css from that files. Don't know which style is using for which purpose. Is there any tool or suggestions to remove unused styles for improving page optimisation.
Please suggest
You can use purifyCss online tool to get the cleaned css , just enter you website url or provide html and css code
You can try "web developer" chrome extension from chrome webstore
I'm trying to find certain html tags for a website that I'm creating. I used a theme on wordpress. There are some tags that I want to change and I can see them using the developer tool that shows you the source code on Chrome when you press F12. However, I've been digging through all the php files in my wordpress site and I can't seem to find them. Is there some kind of plugin that can do this for me or is there an easier way to find what you're looking for?
Thanks!
There is loads out there on the interweb that you can read through to figure out what you are looking for. It really depends on what exactly on your page you are looking for as Wordpress sites load dynamically. So if its something on your homepage you code could be in home.php, header.php, footer.php or any number of other files. Another handy tip is to search all files in the theme directory for the class or id of the element you are looking for. You can do this on notepad++ or other advanced text editors.
Best of luck!
When you open your page in browser's DOM Inspector you may see a lot of elements which have not corresponding tags in your HTML (or PHP) template files. This maybe simply because of possible Javascript code which could build DOM elements on the fly.
So, if you can't find those elements in template files, try to inspect JS code which manipulates or builds DOM elements of page.
I'm not a desktop applications developer so I was wondering if someone heard about an extension that actually writes on the file system. it would be great if you open firebug like extension and do some modifications e.g. adding CSS rules and they will be added automatically in the CSS file. how hard would it be to build such an extension?
The closest I've found is XRefresh which actively monitors files for changes, then automatically refreshes Firefox. It feels very similar to editing live with FireBug.
I think an extension like this would be possible, but it would be pretty hard to map DOM changes to a specific stylesheet.
You can could use the Web Developer Toolbar for this.
The changes you make in its CSS editor (CSS > Edit CSS) are applied to the page immediately (without saving to file), but it also has a Save... option, so you can overwrite the existing CSS file with it.
It's a pretty basic text field, though, that just displays the plain CSS file. It doesn't have any syntax highlighting nor organize the CSS rules according to the cascade etc. like Firebug does.
Also see this related question:
Why can’t I save CSS changes in FireBug?
Use Backfire. It's an open source solution I wrote that sends CSS changes back to the server and saves them. It has a working .NET server implementation example that is easily portable to any other platform.
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
I'm making a website that will have to render correctly on FF/IE6/IE7/Opera/Safari. IE6 came as a late requirement (when I had done all the other browsers) and it just has to be useable, not necessarily the same as on the other browsers. Now I'm tweaking it so that it's useable on IE6 as well.
To this end I've created another stylesheet in my theme called IE6_override.css. As you might have guessed, I want it to be applied only when the browser is IE6. Conditional comments would perfect for this.
The only problem is - ASP.NET renders a <link> tag for every CSS file that is in the theme's folder, thus including this file unconditionally on all browsers.
I would like to stick to themes because it's completely feasible that we might create more skins for our application later (if the customers desire that).
Is there any way how I can make ASP.NET exclude this specific .CSS file from its auto-including?
Added: Thank you for your answers! In the end I found a workaround. Due to some other styling problems I've asked about earlier, I'm forced to have a IE6-workaround Javascript as well. Thus I prefixed all my IE6-specific rules with a .ie6_dummy class selector and then removed it in JS upon page loading. :)
Yes you can... You can just remove the specific page header control in code behind. The css files are added automatically through theming, but u can remove them again after. Like for example u can put in the page load of your master file:
Page.Header.Controls.Remove(YourCssFile);
Or if you wanna have all the css files removed at the same time:
var themePath = string.Format("~/App_Themes/{0}", Page.Theme);
var removeCandidate = Page.Header.Controls.OfType<HtmlLink>().Where(link => link.Href.StartsWith(themePath)).ToList();
removeCandidate.ForEach(Page.Header.Controls.Remove);
I don't think you can. We stopped using the App_Themes folder for exactly that reason. This also saved us having to prefix every css file with a number so they load in the right order.
Indeed it's not possible to exclude a specific CSS file. However, there seem to be several workarounds located here. I'd suggest reading through those and choosing an appropriate solution (if any).
There are a couple of posts out on the web which seem to address your problem - looking for "Conditional comments in asp.net themes" I came across these which look like they may help:
How to take control of style sheets in ASP.NET Themes with the StylePlaceholder and Style control
Conditional stylesheets in Themes
The first one will also address the media issue with theme stylesheets as well.
I would like to control which parts in Stackoverflow are visible to me by a css file.
There are about ten css -files in Firefox installation folder. I am not sure whether I should edit them or not.
How can I customize Stackoverflow by CSS in Firefox?
You can create a file called "userContent.css" in your profile folder and it will be loaded on each page. Here's more information: http://www.mozilla.org/unix/customizing.html
If you need to make changes which only affect one particular site instead of every site, then you can use this syntax:
#-moz-document domain(stackoverflow.com) {
body {
background-color:#f0f;
}
}
The CSS equivalent of GreaseMonkey is the Stylish extension which allows you to overwrite site CSS without modifying your userChrome.css file.
With Stylish installed, you can simply create a custom user style for stackoverflow containing your css overwrites without risking messing up userChrome.css. You can also disable or enable that particular stylesheet at any time. Also, make sure to use !important in your style declaration as CSS specificity comes into play.
Try using firebug from http://getfirebug.com
You can also use greasemonkey to do further customization.
You can get a very handy addon in Firefox, called GreaseMonkey. It executes a custom javascript after a page loads, and is able to modify the html on the client side. For example people use it to strip out various elements, change color, fonts, rearrange elements etc
There is also a book about it available online for free
You can get the Greasemonkey add-in here.