This might be a weird question but i do this often enough that I'm going to ask, When i am making some adjustments to the look of my web page via CSS I often just inspect element and put in the changes and then when it looks right i copy and paste those changes back to my css sheet and save (the css files are located on my remote server uploaded with FTP), occasionally i accidently refresh the page without the css properly copied and loose my css, is there a way to "get back those changes after refreshing my page or is there a tool i could use to automatically save/back them up so they don't get lost?
You can do this with DevTools Workspaces: https://developer.chrome.com/docs/devtools/workspaces/
You can only make changes to CSS in a file, not inline CSS or HTML markup.
I hack styles into pages and copy them over in the same way that you do.
To answer your question, I don't know of any way to get the changes back (clearing changes is the whole point of 'refreshing'), but here are 2 alternative options:
Make smaller changes (I try to focus on a single element/node at a time)
There are a lot of chrome extensions that tackle this type of problem
https://chrome.google.com/webstore/detail/devtools-autosave/mlejngncgiocofkcbnnpaieapabmanfl?hl=en
Related
There are many times when I make changes to the CSS (and maybe HTML) of different elements directly inside the developer tools. Refreshing the page will result in loss of all those changes and copying them one at a time to a text editor will take a lot of time.
I can directly get the HTML by doing Copy Outer HTML but how do I get all the updated CSS from the page?
I am using Firefox.
Thanks.
So I've made some little modifications to a particular website (background color, fonts, etc...) and I want these changes to be permanently applied for the next visits.
The issue is when I refresh the website, it goes back to its initial form.
Wether it's for Google or Safari web browser, is there a way to accomplish such task?
The thing is that each time you enter a website your browser downloads the whole DOM code of this site. The changes you make with Chrome's or Safari's dev tools applies only for the already-downloaded DOM that is displayed on your browser, but next time you will enter the same website, a new DOM will be downloaded and displayed - without your changes.
So, actually, I'm sorry but what you want is not possible.
What you can do is:
Save the modified HTML code to your PC (I don't know if it helps you).
Use an extension that allows you to run a JS code automatically on page load (there are bunch of this kind of extensions), and with that JS code you can manipulate the DOM the way you wish to. Yea I know, that solution involves maybe long code writing but this is the way you can change the new DOM every time - automatically.
I'm new to Wordpress but have an understanding of HTML/CSS. I recently fixed an issue on a site where a button wasn't being rendered properly.
I added the CSS changes to the custom CSS box for that particular page (the homepage). The changes worked on the editor preview but after saving and publishing the fix isn't live. I had thought that it might be a cache issue (WPEngine) but I did this two days ago. Shouldn't that be enough time for it to resolve?
I've cleared the cache on all my devices.
Is adding custom css in the WP Admin the way to fix this or does this need to be addressed in a different manor by uploading files or changes files via FTP?
If you clear your cache and cookies in your browser you should be able to see your changes almost immediately if you add your CSS through the wp-admin custom css area.
A good way to check if that code is there is by viewing the source of your page and searching for the CSS in your dom. If it is not there, but added into your custom css in the theme it might be a problem with your chosen theme.
If you change the theme's css directly through FTP you will want to keep in mind that if you ever update your particular theme, all your custom css will be overwritten and you will lose it. You can see more on how to add custom css here:
http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/
I'd like to make a disclaimer that I'm brand new to both CSS and Wordpress.
I've been using "Google Inspect" to edit the CSS of my Wordpress site. Everything looks like it is working well as I'm making the changes but the second I refresh the page it reverts it back to it's original formatting.
I am using this resource but the solution he came up with still doesn't seem to work for me.
Right now I am:
Saving my CSS
Making changes to the CSS
Saving my CSS again
Refreshing the page with no luck...
I'm not sure if there is any other information that I can provide. Let me know if there is and I'll update this post.
Any help would be greatly appreciated.
after reloading your change CSS code not working because it's either not saving to your CSS file or you may have to clear your browser data
Try viewing your page in another browser or incognito mode. This will force your browser to refrain from using any pre-cached versions.
Additionally, I would highly recommend using child themes when modifying your wordpress CSS. This will prevent your stylesheets from being overwritten when wordpress updates.
ok, maybe I'm wrong here, but it sounds to me like you are just not saving the stylesheet (which holds all the CSS of your site) correctly.
Perhaps I can summarize the technique from the other post quickly:
Open the browser element inspector and make your css edits.
Navigate to the css style sheet in the inspector and save the file
to your computer as style.css in your theme folder
Refresh the page and hope to see the changes.
This is making some assumptions I'm not sure are happening in your case:
This will only work if you are doing this in a local development
environment OR you are FTP'ing this style.css file to your server.
You aren't making any changes to currently unstyled elements. The
web inspector will add these as inline styles and they won't be in
said stylesheet.
I don't mean any disrespect by this whatsoever, but you will save yourself a ton of pain and suffering by learning how to do this right the first time.
Download:
Atom - Code editor
Desktop Server - The free version
Learn how to use those to create a local development environment and then use Atom to change your CSS.
I've just found the CSSCoverage tool in the firefox dev. edition.
It shows the unused CSS classes from a page / set of pages that can supposedly be safely removed to slim down your stylesheets.
My question is, does anyone know a way to save the stylesheets from the console without the unused rules. It visibly displays them so surely there's a way? When I click save, it saves the original (full) stylesheet.
There is way to copy the classes which you add run time through inspect element in browser by clicking on one of newly added class, then it shows you only new one.
But I think there is no way to select only those classes which are useful to grab all other classes
Thanks