I would like to apply a CSS stylesheet to all page views in a Firefox browser using a menu option and be able to toggle this when required. (The functionality I want exists in IE: Tools | Internet Options | Accessibility | Format Documents Using my Stylesheet (although I think this may affect pages outside of simply IE).
You could use the file userContent.css lying within the directory named chrome in your Mozilla Firefox profiles directory. There is also an example file named userContent-example.css.
you can use Stylish, you can define global styles in firefox and ability to switch it on and off fast from Firefox.
Usage page.
Global styles, you can see code and how it is done.
There is another Firefox addon called Platypus which which adds a toolbar for editing site styles. It does require you to install Grease Monkey.
I just installed Stylish and my first impression is that is nicer than Platypus, especially when it comes to sharing your styles with others. But I'll reverse my judgment as to which I think is better when I have more time to compare them. :)
Related
I want to debug an issue with CSS and want to start experimenting with all styles turned off. Is there a way in Google Chrome devtools, Firebug or any other dev tool to turn off all styles at once, so that I can start turning them on one by one to see how it affects the elements?
Use an add on called "Web Developer". It's available for different browsers and available here:
http://chrispederick.com/work/web-developer/
You can disable styles from there. It even has many more features.
I created a test extension, to change a few things and maybe add some features to Firefox built-in devtools.
I set up a basic extension, with content css and the usual files, and chrome.manifest:
content devtooltweaks content/
style chrome://browser/content/devtools/framework/toolbox.xul chrome://devtooltweaks/content/devToolStyle.css
Although I can go to "chrome://devtooltweaks/content/devToolStyle.css" and see that file exists in the browser, DOM inspector doesn't show the style applying, I can't see the stylesheet listed either. It's been a long time since I did extension development, is there a step I'm missing here? Or is it not permitted to change the built in dev tools, similar to how it's not permitted in Chrome?
It looks like the style is imported, but not shown as a stylesheet in the DOM Inspector, I also may not have been using firefox -purgecaches. It's working now.
I want to edit the class "top-labels" from the shopping cart page but I can't find it in the css stylesheet. How can I get around this?
Can anyone help?
Cheers
Use an A-grade modern web browser, like Chrome, Firefox or Safari. Find the developer tools for your choice. You might install Firebug for Firefox for example.
With that, right-click on the element you're interested in, say the one with the class top-labels. The browser tools will tell you exactly which CSS file contains the definition of the class, and the line number.
It cannot really be much easier. You can also change the CSS in your browser in that definition and see what the changes do, live. That is invaluable.
I think we need more info but from what you've said I'd guess that the top-labels class is either located in a different style sheet or is an inline style on the page.
You could try adding the top-labels style into the stylesheet you're using and add the styles you want to it that way.
If you want to look at the CSS of other people's websites (to steal learn from them), Firebug lets you inspect the prettified CSS:
But in Chrome 16, you only get the minified CSS as it was served out:
Is there a way to get Chrome to prettify the CSS?
In the newer versions there is a "format" button that prettifies the source:
(only just realised myself :P )
The Developer's console shows the file as served. If you want a human-readable version, copy-paste the code to http://www.codebeautifier.com/.
If you use the Elements tab, the applied CSS properties are also shown per element.
I recommend Quick Source Viewer, which is an extension to chrome and requires no human copy-pasting (acts sort of like an extra chrome dev-tool).
It can show you the source of the current page formatted and colour coded.
It's pretty powerful, showing all 'sources' of the page, be it css, js or html. Even things like inline css/js can be viewed individually (with injected code highlighted). And the best part is it prettifies all of them, even the css (which chrome's dev tools still refuses to do).
You may want to checkout Pretty Print: https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en
After installing, when you view a minified CSS or JS file, it will appear (after a moment) un-minified.
I am frustrated. I have one website where my drop-down CSS menu works and another where it doesn't.
Their stylesheets differ wildly and, although I have tried to manually copy the menu styles from one to the other, but with no success.
Is their any tool which will let me (like FireDebug) click on a page section (the menu) and then copy the rules which affect that section - ignoring those which are hidden by other rules - so that I can post them into the second site's stylesheet.
It seems that rather than having multiple styles affecting the menu and trying to sort out which have precedence, I'd like to have some software sort it out and generate a single combined rule ... if you see what I mean.
Both FireBug and the inbuilt Chrome Dev Tools show you what styles are being utilised by the selected element. I don't work with FireBug much, but I know the Chrome Dev Tools will cross out overrided styles and even show default user-stylesheets where applicable. It's also kind of nifty when inline styles are applied, eg for a table the "frame" attribute, as it converts these to CSS and displays it as part of the styling ;)
Sounds like you've got problems with accidental inheritance. Try to make sure your CSS selectors are only referencing the elements you want to style. Otherwise things get messy, and stuff like this happens.