Since browser has its own default cascading style sheet applied to webpage, is there a way to replace it with Bootstrap? Like whether there is a browser that support this or one has to look into open source browser's source code and replace some parts with Bootstrap.
I don't think so. But why all on earth wanna do that? I think you need decompiled source of the browser to do this.
Related
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.
A customer complains that on his mac the css on his website looks terrible. i checked it and found out that he uses some settings in his browser to set the font to a specific one and also have a minimum height.
The problem now is that some of the css depends on heights and now is not working right.
is there any chance i can detect such things and override the css? (besides doing it with php and load a custom css)
I agree with the comments above. If a user customizes their local font settings the onus should not be on you to make it work. They've overwritten your intended design. That being said, here's a way to detect fonts using JavaScript.
http://www.lalit.org/lab/javascript-css-font-detect/
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.
What I would like to do is apply a system-wide CSS reset. How can I do this?
Here's a little bit of information about what is meant by a CSS reset.
The goal of a reset stylesheet is to
reduce browser inconsistencies in
things like default line heights,
margins and font sizes of headings,
and so on.
http://meyerweb.com/eric/tools/css/reset/
We do this by linking a reset.css in our host html page, as you normally would. It works like you would expect. You can also link reset.css into your module file, but it seems more appropriate in the host page.
What you might not expect is that GWT's default css will be injected afterwards, even if you don't link it in, if you're inheriting the default theme in the module.xml file. You can affect that behavior. Read http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html for more information about the details of CSS and GWT.