First off, I know a question like this already exists and I have browsed through it but the answers given aren't up-to-date enough for Chrome 62.
With 62, I know you can view style-sheets by simply clicking on the stylesheet in the style-rules tab however when i add styles to elements, there is no link to a style sheet next to them.
I also know that if you go into sources and right click on a file you can see the modifications to it but the problem is, I don't know which file I am modifying.
Has Google took away the option to view changes made while using the developer?
Related
I would like to set the webpage logo disappear by css display:none.
I already know how to open the element , for example , in the website www.kori.jp, i can find the div class .logo and able to put display:none in it.
But after reflesh or click other page, it appears again. I want to set it invisible for the whole website at the time I have my presentation.
How can i use and set the css in the chrome browse (or any browser which is more user friendly)
I need to present and show the website but cannot display the company information.
Thanks a lot
Not sure why you would want to do this, but I'm not the one to question it. Editing elements in, for example, Chromes developer tools only store it temporarily and, since you're not really changing the CSS of the site, it is obvious it returns to its normal state when you refresh.
While it can and probably will break some functionality, what you could do is hit CTRL + U on a website to show its source, copy+paste everything from there into your own files somewhere locally, and change it that way. Remember to do this both for the .HTML and .CSS files though (and perhaps even .JS files if they exist on the site)!
i want to change the size of the header of the Liferay portal page through css.How do i achieve this? i also want to change the color of the menu.
Nowadays every browser has some Firebug-style developer tools. E.g. on Firefox, hit F12 and the tool will open at the bottom of the page. Choose the "Inspector" (labels might vary, I'm looking at the german UI), find the "choose an element of the page" button, then point your mouse to the area of the page that you want to explore the CSS. You'll see how the appropriate part of the DOM is selected in the inspector and even the actual CSS rules that apply. You can temporarily change the CSS there and try out what values you actually want.
Next, learn how to build a theme in Liferay. You'll add the required CSS, identified in the step above, in your theme's custom.css.
Yes, this isn't the actual CSS that you need (probably you just wanted to know that single line), but your next question would be on how to change a different aspect of the default theme - this is how you can find it out and even solve other theme-related problems that you didn't even think of yet.
I'm trying to re-skin an existing site using CSS only. I will be taking one of their CSS files and redoing it to match a new design, without changing any HTML. I want a good way of continually updating and then testing, but I have to do it locally because they do not have a dev environment. The site itself is dynamic and authenticated, so I can't just download pages from the site and test the entire thing locally. I was hoping that there is a way to tell my browser (Firefox, preferably) to disable that specific remote CSS file and replace it with a local file.
I don't want to use something like Web Develop Toolbar or Firebug because that requires me to manually make the changes each time I load a page. I want something more seamless.
I was thinking one possibility is to load my new stylesheet in userContent.css, but I would still need a way of telling the browser not to load the original stylesheet from the server.
Any ideas?
UPDATE: I found this Mozilla bug report https://bugzilla.mozilla.org/show_bug.cgi?id=208641 discussing the issue of being able to change userContent.css without restarting Firefox. One of the posters (Simon Wilper) posted some files and info about adding a menu item to refresh userContent.css, but it talks about modifying browser.xul and I can't find that file on my system. This seems like the last piece of the puzzle.
You can use AdBlock Plus to create a custom filter to block that one particular stylesheet, so it will not load when you go to the site. This rule will always be in effect, so as you refresh the page, you will not have to do anything extra.
https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/
As for adding your own stylesheet onto that external site, you can use Stylish, an add-on for adding your own stylesheets to particular domains. This, too, will always be present as you refresh the page.
https://addons.mozilla.org/en-US/firefox/addon/stylish/
The issues you will run into, I imagine, will be what to do with images you are intending on linking to in the CSS. You will have to upload them somewhere, reference them absolutely, and then once you are finished, replace the URLs with new locations on their server. Also, that editing Stylish stylesheets within their editor is pretty poor (no code colouring, no code completion.) Probably better to edit it in your editor of choice, and then paste it into the Stylish textarea. Hit save, then see your work (I believe you won't even have to refresh, but I might be wrong.)
Also, both these add-ons are available for Chrome too.
https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
I am not sure why people are suggesting to install extensions for this simple task. I would suggest you to just follow these steps to disable whichever file you want from being loaded in your browser that you want. Just follow these few simple steps:
Hit Ctrl + Shift + C to open source inspection
Navigate to Network tab
Right Click on any file from the list and and click Block request URL
Now the file won't load. Cheers!
PS: Steps are same for Google Chrome and Mozilla Firefox browsers. Not tested on Opera and/or Safari.
Install web developer extension
http://chrispederick.com/work/web-developer/firefox/
And then it will create a menu under the Address bar, click on the css tab and then "Disable Styles" > Disable Individual Style Sheet" > then select the style sheet file you want to disable
after this, again click on the css tab and then "Add User Style Sheets" , next select your css file.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm a web developer/designer, and I need my code-illiterate clients to be able to easily mess with the colors of particular elements, save these CSS changes, and send them to me. I'll be guiding them over the phone, but I still need it to be easier than expecting them to locate CSS selectors in a theme sheet, and write hex codes.
I need an in-browser inspector that can allow a code-illiterate individual to:
Easily manipulate colors on a web page's elements, with a GUI color-picker.
(+) Chrome does this perfectly. It's exactly what I want.
(-) Firefox's otherwise gorgeous inspector seems not to have this basic capability.
Save the affected stylesheet, so they can send it to me.
(?) Firefox's Style Editor makes saving sheets easy, however changes to inspected elements - strangely - do not seem to be applied.
(-) Chrome may supposedly be able to do this, deep within the Sources panel, but it seems you need to be a hacker to figure it out, because I'm the code-literate one, and I haven't yet figured it out.
I find the existence of this conundrum very baffling -- why have browser vendors bothered making such a rich web-page editing suite, where one can manipulate CSS, but not include a basic "save changes" feature? Am I missing something?
Edit 01:
I have found, in Chrome, that one can freely manipulate an element's CSS with the inspector, then click on the CSS sheet associated with each rule (in the top-right corner of the rule) to take you to the Modified CSS Sheet in the Sources tab. This is what I want to save.
From here, one can right-click anywhere in this modified source code, and then Save-As -- but strangely, unfortunately, and unintuitively, Chrome saves the wrong source code. It saves the original, unmodified source code -- not the modified source code you had right-click save-as'd. Very frustrating, and I'm currently trying to find a way around this bug. I'm so close!
Edit 02:
Okay, I've figured it out. When you save a file in Chrome's Sources tab, you're not just saving that file -- you're actually setting Chrome to constantly auto-save that file upon every change you make to it.
This is actually kind of cool, but very misleading.
So, after you save a CSS file, Every change you make to an element's CSS in the inspector, will auto-save to that file. This persists even if you restart the browser.
Confusion arose, because when you have a file marked for auto-saving, and you then Save-As a modified file, Chrome weirdly writes the original file, not the one you right-clicked. As soon as you make any change after that, when Chrome will auto-write every current modification to that file. I regard this to be a bug in Chrome.
Lesson be learned, First, Save-As the file. Second, make your changes.
Presto, your modified CSS theme awaits you on your hard disk.
To be clear, if you Save, then make changes, then save again -- Chrome will have saved the Original Source, not your Modified Source. This makes the order of things important.
I do not know of a way to see a list of files currently marked for auto-saving, or how to unmark them.
How to use Chrome to play with CSS and Save it
Determine which Stylesheet you will make changes to. Be sure to only affect rules associated with this stylesheet.
Navigate to this stylesheet in the Sources panel of the Developer Tools, Right-click it, and Save-As this file to your computer. You can get to a stylesheet in the Sources panel quickly by clicking the stylesheet at the top-right of each CSS rule for a selected element in the Elements panel.
Freely make changes to CSS Rules associated with your chosen-and-saved stylesheet. Chrome will automatically save each change to the stylesheet you saved on your computer.
Keep in mind, however, that you must do things in this order. If you save the stylesheet, then make your CSS changes, then save again, Chrome will oddly write the original unmodified source to file (until you make one more change, which causes Chrome to auto-save all changes to file).
How to use this with your clients and friends
Set up a theme stylesheet with blank (or default-ish) CSS rules (that have top precedence) for every element you intend to let them play with.
Over the phone, guide them to Save-As this theme stylesheet from within the Sources panel.
Guide them in inspecting elements, and using the the Chrome inspector's GUI color-picker to meddle around and find the exact colors they want.
Have them send you the saved stylesheet :)
It's a good idea for you to verify that the modifications are in the file they sent you, before they close their browser window :P
i use this Chrome extension to save the files i modify directly in Chrome DevTools.
Seems hard to configure it, but it does his job. Plus i think it's a must-have for web-developers/designers.
Maybe with some tweak you can make it do what your trying to do.
Sitemod.io allows you to use Chrome Developer Tools to edit any HTML, CSS or JS code on any live or local web page. After you finished working, you can save the edits and get a unique URL to the modified version so you can share your mod with your clients.
Here is an example that illustrates how the above can be done.
I'm one of the developers of this tool so please feel free to ask me anything 🤓
First, I know this question exists, but it's not what I'm getting at. I want to know if there is some view in Developer Tools that lets you see all styles added "via inspector." For example, I can select the span.count element and see this is something I added.
But I've added lots of stuff via inspector. Right now I have to click on each element to see if it's one of the elements that I added a style for.
Anyone seen an SO post for this already or know the answer? Thanks.
Since at least Chrome 22, you can open the "inspector-stylesheet" source in the Sources panel. It contains all the rules you have added manually.
If anyone is coming across this question and still having trouble with newer versions of chrome this worked for me:
Add a style in the elements panel on an element, then in the elements panel within the css rules, click on the inspector-stylesheet link. This will open the inspector stylesheet in the sources panel. You can leave it open there and add to it as needed.