I know you can edit the syntax colors in the Chrome Web Inspector by editing the user css file, but is there a way to do this for Firebug? I'm using 1.12.5 on FF 27 on Windows 7.
I would recommend an additional UI plugin. Here is what I utilize:
https://addons.mozilla.org/en-US/firefox/addon/acebug/
It supports importing themes, which can modify the coloring and styling of the markup.
EDIT
Another way would be to change the CSS using Stylish. How this is done is described in Jan Odvarko's blog.
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
Info/Problem.
Using Sharepoint online with a dark/black theme.
On the homepage, I am using the document library previewer web part.
The font for URL's/Hyperlinks is defaulting to black so they aren't visible on the black background.
Attempting to change the font color of these URL's using CSS.
What I've tried
I've used the Dev Tools in Chrome to locate and change the CSS to make the font color white. This works, but the changes don't save after I refresh the page.
Downloaded and Installed Sharepoint Designer and copied the style element to a txt file stored in the style library. I'm not sure how or where to insert this file in Sharepoint designer to apply to to my site
The ideal solution would be editing the CSS for the homepage and then saving it permanently. I feel like I've gotten most of the way there, I just can't figure out how to save/apply my changes.
If it isn't already obvious, I'm not much of a developer so I'm a bit out of my depth here.
I don't think you can customize the css of existing webpart using designer. You have to create your own previewer using spfx. there are some webparts you can checkout.
Did you try to add the CSS style code into Script Editor web part in the home page?
If you use modern page, check the solution below.
react-script-editor
Is there any tool available wherein I may open a CSS file and see a color box next to each color and background-color rules?
There's plenty. You can do this in Visual Studio with the Web Essentials plugin. Chrome Developer Tools does it. If you use Sublime Text there's a package for that: https://github.com/a-sk/livecss. If you use Notepad++ there's plenty of plugins: http://npp.campulka.net/
It's a matter of a simple Google Search and you'll find want you need.
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 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.