When using developer tools in firefox or chrome, after a change has been made to the developer tools stylesheet is there a way to save those changes for later reference when fixing the actual stylesheet?
Simply copy/pasting them would be the easiest thing.
There is no way to actually save changes to a stylesheet directly from the developer console/inspector if that's what you're asking.
In Firefox (they call their version of the tools Web Developer),
to save HTML:
right-click on the outermost element that you changed (or that you want to save), and select
Copy -> Outer HTML. Then paste into a file.
to save CSS changes made on the Inspector tab that you added to the element inline entry, at the top of the cascading styles list:
the best I can suggest is to copy the HTML (see above), paste into a new file, then do a search for style'".
This will highlight/find all inline styles. Some may have already been in the document. The others will be the ones you added. You'll just have to recognize which are which. You will then need to either add them as inline styles to your HTML, php, and js code, or look at the surrounding classes and tags to piece together how to add them to your stylesheet, without breaking anything else.
If you know you'll want to save your styles to put in a stylesheet, this is probably not the recommended place to experiment or edit your css.
Instead, you should edit any of the cascading rules that appear below element inline, or edit local copies of stylesheets directly from the Style Editor tab.
If you edited, or disabled a style from the css cascade list (for a selected element), or edited css from the Styles Editor tab, saving styles is fairly easy.
Switch to the Style Editor tab. The top section is a list of all the stylesheets used to "build" the current webpage.
Any filenames shown in italics contain styles that you modified, added, disabled. To the right of the filename, click Save and you can save the entire modified stylesheet.
Any styles that you disabled (whether they existed in the orig file or not) will be commented out, and it may be preceded by an !.
Unfortunately, if you just want a list of your edits, you have a bit more work to do, since you cannot simply save a list of only the styles you modified. There is no indication in the file you saved that shows which styles were added or modified by you. As a work around, you can download a "file diff" program, to compare two files highlighting the differences between them.
Know that can also edit these local copies of the stylesheets directly, instead of using the Inspector tab, and those changes will appear on the HTML page, just the same as if you had edited a style via the "Inspector" tab. This is handy to know if you want to add a CSS selector combination for an element that did not appear in the cascaded styles shown for that element.
Note, on the Inspector tab, to the right of every cascaded style shown for a selected element, the text to the right of the selector is the name of the file it appears in. If you click on that name, it will switch you over to the Styles Editor tab, and show you the contents of that file. Again you can edit the (local copy) of that file directly. Also, this makes it easy to save a copy of this file, without needing to scroll through the file list to find it.
Note: as a bit of a hack, if you don't want to use a file diffing program, don't have many styles, and you need a list of only the styles you changed, you can use the following process.
For every style you modified in the cascaded list, uncheckmark it (disable it). Now in the css file, it will be commented out, and proceeded by an !, for example:
/*! color:#FFDCFD; */.
Now you can search your saved file for /*! to quickly find your edited styles (and delete everything else). The tedious part is remembering every element to click on, in order to access every style you changed, find it, and disable it. However, it is an option, and a good work around, in a pinch.
Yes, you can, in Chrome at least. Just make the changes by clicking the plus symbol at the top right of the Styles panel of Dev Tools. Then from the drop-down choose 'inspector-stylesheet' and enter your changes.
Now, if you click the link to the right of the styles you make it will take you to the inspector stylesheet in the sources panel. There you will see all your styles. Now just right-click somewhere in that pane and choose 'Save as'. Job done.
Related
I've added a widget element (my account widget) to a page using a shortcode (there is an annoying bug when I use the widget).
and of course the element is missing the theme's style.
I've found one post about this, and how to resolve it, but I can't seem to understand WHERE do I find the html and css relevant to that element, and where to place them.
I would love to understand how it is done.
link to my page (you need to create an account to see it): https://rotemy12.sg-host.com/%d7%94%d7%97%d7%a9%d7%91%d7%95%d7%9f-%d7%a9%d7%9c%d7%99/
link to the explanation I found
Many thanks!
You might find it useful to look into how to edit templates/themes.
It seems you will have to access files inside the wp-content/themes/[theme-name]/; there you should find a style.css, a function.php, (and a bunch of other files). You can edit style.css to customise styles to your liking: edit the style.css to insert styling information for your widget; you might need to look after specific selectors depending on your theme.
Also please note that depending on the browser you are using, you should have developper's tools that will be useful to find out about parents' selectors Chrome / Safari.
I'm using the Chrome devtools persistence feature with browser-sync and sass.
I set a Workspace pointing to my scss folder and I can edit scss files from Chrome and have all css files created correctly, applied to browser real-time and saved in hard drive.
However when I select an element on the Elements > Styles tab and make some changes, the changed file is the http://localhost:3000... one so changes are not kept. Then I still have to find the local file in the Sources tab to copy these changes.
I'm not sure if this is the best we can get but if we could either open the local file directly from the Elements > Style tab instead of the http://localhost:3000... file or somehow automatically copy any changes in the http://localhost:3000... file to local file the workflow would be even easier and faster.
Does any one knows how to accomplish that, even using some app/extension?
UPDATE:
From Rohit answer I found that if I turn off css source maps in devtools settings then it is correctly synced, showing the green circle on the Elements > Style and keep my changes, although it still pointing to http://localhost:3000...style.css file.
However then it only changes this file, not the specific partials/*.scss file and if I run sass compiler it overrides the css with the old code.
With the css source maps on Chrome finds my partial scss correctly but doesn't show the green circle so it's not synced and doesn't keep changes.
The problem seems to be with syncing scss files instead of css.
I was trying with a Workspace pointing to my root scss folder, also tried pointing it to the direct parent of the file beeing edited and still not syncing corretly.
This is a shot in the dark but,I beleive if you add the parent folder of the files you are working on from Devtools > Sources Tab > Filesystem tab > Add folder to workspace.
Like so :
Then navigate to your folder, and add reload the page. After reloading if you see green
like so:
It means it is synced and will update without you going to the sources tab.
Adding the root of my project to the Workspace synced scss files correctly. Now when I click an element on the Element > Styles tab, Quick source opens the right file at the right scss rule but doesn't follow my changes in the Element > Styles tab (as it does using pure css) and I still need to copy changes to Quick source or edit there directly, save and wait sass compilation to apply changes on screen.
The workflow is much easier now but I'm not choosing this as the correct anwser because is not "as live as css" yet and maybe someone knows how to do this final step.
PS: browser-sync is not needed in this setup, just something to compile sass and Chrome apply changes automatically.
I've been toying around with different CSS styles for a site that I'm running by selecting various things with Chrome's built-in "Developer Tools" and editing them one by one. Now I've landed on an overall style that I'm more or less happy with, but I'm not sure how to save my results! Is there an easy way to save or export all the changes that I've made in Chrome as a big CSS file so that I can apply them to my actual site?
As long as you haven't been sticking them in element.style, yes:
Go to a style you have added. There should be a link saying inspector-stylesheet:
Click on that, and it will open up all the CSS that you have added in the sources panel
Copy and paste it - yay!
If you have been using element.style, you can just right-click on your HTML element, click Edit as HTML and then copy and paste the HTML with the inline styles.
The way it works now, Meteor automatically finds CSS files in the client directory and renders it without having to call it in the HTML's header tag.
However, how would I be able (if it's even remotely possible) to associate one particular CSS file or files to just one HTML page?
I recently purchased a theme for one section of my website that I didn't want to bother creating myself, since I hate doing UI for my main page myself. But when I place the CSS files of this template with the ones I have for the other template I use, one template's CSS files overwrite the other, so everything ends up looking like a huge jumbled mess.
I hope I'm being clear with my question. Is there a way to get around this?
So, if there's not a way to keep the file from being included in meteor, you could add a class to the body tag of the page you want the styles to appear in, then prepend that class to the beginning of the styles in your new stylesheet, ex: .yourBodyClass#stylehseetID, .yourBodyClass.stylesheetClass
if you put your stylesheet in the public folder, it will be treated as a static file, but then it should go in the header which is rendered by Meteor, and since Meteor is a single page app (SPA), it only has one header for the whole application.
If you need specific styles for a page, you can use some prefix for your css classes. That's probably the easiest.
I've been following two articles about how to start editing scss files on chrome canary (not livereload.com)
https://medium.com/#toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0
and this one
https://developer.chrome.com/devtools/docs/css-preprocessors
I added my workspace and the browser is actually reading my file like in the following:
And then when I click into sources i can modify the content like in this picture:
I can change the css here and it's fine and it's updating my scss file from Chrome to file.
The issue
When I go to the elements inspector (first tab on devTools) and I try to change anything on that. The styles.scss becomes automatically styles.css and then I am not able to modify anything on the elements inspector that will change my scss file.
Also when I change anything on my scss file (using sublime text 2). The browser is not reloading my css, so it's not working from file to Chrome.
Are this two thing a bug? Is it mean to work like that?
It is a bit hard to make the model-based editing (in the Elements panel) play well with source-mapped code, since different users may expect different behaviors (moreover, editing a variable-based property value in SASS may assume editing it directly or editing the variable value instead.) Thus, we have not decided on how this should work, and the CSS-SASS link is just broken at the moment of edit (since the CSS no longer corresponds to the SASS source it was generated from.)
Please star https://code.google.com/p/chromium/issues/detail?id=257778 and leave a comment saying what kind of behavior you expect.