I've already mapped the necessary files to the local resource - however, while that does allow me to save any changes made to a file in the Sources panel, I was wondering if it's possible to automatically save changes to CSS made in the Elements panel. Otherwise at the moment, any changes made to the style in the Elements panel seem to exist only there.
I remember at some point there used to be a little indicator of the file and line number next to a class/id etc. in the Styles tab of the Elements panel - surely it can't be that hard to simply 'update' any changes to that style rule considering Chrome knows exactly where it's coming from (in the case that it's a stylesheet and not an inline style?). It would be a great relief to my workflow.
The answers to this similar question are obsolete.
When you have finished making your changes in the Elements tab. Next to the style there should be a link with the file name there, something along the lines of site.css:4 or similiar, if you click on that link it will open up the sources tab with that certain page what you have editied containing the modifications. Then you can go to save as, and then save the document from there.
I hope this helps you out :)
Related
I edited a webpage with customized elements. The elements were edited with the chrome F12 dev tool.
The problem is, every time I refresh the webpage, my edited elements will be reverted back to the originals.
This is what I want to do: next time when I load the same webpage, I want to have my edited elements, instead of the original elements. This way I don't need to manually edit those elements again.
Is there a simple way to do it?
I checked this Save Chrome dev console html changes but it seems not too helpful for my case.
One possible solution is to create my own webpage, and then use the edited elements in my webpage. Not sure if this will work; and it involves a lot of work.
I use a site at work that has unordered list "ul" with a lot of "li" elements without borders, I would like to always highlight the "li" elements to have better readability.
What I do at this moment is right click the page and open the inspector and add this line:
<style>li:hover {background-color: #ffff99;}</style>
It works but I'm wonder if I can do a plugin for this or if there is another way to do it automatically (I have already send a request to the developer of the site to request this change but while I wait I would like to know what would be the best approach to automate this task)
The list look like this:
File.txt 85215165
File2.txt 96312121
File3.txt 41212123
File4.txt 65623443
File5.txt 69532055
... and so on
(It's not a continuous string, the file name and the number are elements inside the one "li" element and I'm not able to select them at the same time with the mouse)
And it has no style so it's difficult (at least for me) to see which number in the right match the file name in the left.
Note: The list is generated with a script and when I try to see the code of the page (right click see source code) I don't see it, I just see the script, that's why I do it with the inspector
This may solve the issue:
Stylish or Stylebot -- Chrome plugins -- both seem to add your preferred CSS on top of the specific websites you choose.
Paste this in the browser console, slightly faster and easier than editing HTML tags from within the tree in the inspect element tab.
document.head.insertAdjacentHTML("beforeend", `<style>li:hover {background-color: #ffff99;}</style>`)
I want to start by saying that I did not build said website. I was given FTP access to the site and can download it's entirety.
What we are interested in is replacing the images as they are rather outdated.
If I replace the images (naming them as the ones that exist as of right now), they update just fine.
But adding more does not. Lets say that files are numbered 1-6. If I replace those with the same name, they change. If I add 7.jpg, for example, it does not show in the gallery.
Do I need to update the CSS code or upload it again?
I can provide the code in turn.
Without further details it's hard to tell what the problem is, but it looks like either someone hard-coded CSS or hardcoded HTML. But I would really need to see the code.
Please try to copy/paste at least the code for file that should render the images.
Your gallery should contain new images' name.
if you upload 7.jpg, this one is not in your gallery I guess.
I think it will not matter if you update the CSS.
A priori, to clear any doubt if the images are in cache, I suggest you refresh the page by typing ctrl + R or open a tab in incognito mode.
I was modifying a theme for a WordPress based site, the Anew theme to be specific. Although I changed the theme options - style.css file and custom.css file, I couldn't change the color of the links.
Then I used Chrome's Developer Tools to check where my rules were overridden. The overriding rule was on an (index) file, with parenthesis. With no relevant information on the internet, I decided to take a look at it later.
After some hours, all my changes were committed and now it shows the new color. But I am still curious about this (index) file. Is it a script-added rule?
It is probably CSS embedded in the HTML (style tags in the head), either as part of the markup or added dynamically via JS (or possibly by PHP when the page is rendered).
Need more info to give any answer more specific than that.
When you see index it means the page you're on. The CSS is directly embedded into the page instead of in a separate file.
I am trying to include this line of html into a sharepoint 2007 content section inside a page i have just created. I am the owner.
<link rel="stylesheet" type="text/css" href="/sites/gskglobal/mcLaren-partnership/Documents/live.css" />
I input this using Edit HTML Source on a piece of content (This was the only way i could find out how to input HTML directly).
When i click ok the styles display perfectly having already uploaded the css file.
When i click save it removes the entire link element and leaves me with no stylesheet.
i could put the styles in line, but i really don't want to do this.
N.B no erros are displayed only
Warning: The HTML source you entered might have been modified.
Both of those will work, however the CSS may get executed AFTER the SharePoint Page is rendered.
The short and simple way is to add the CSS file to any document library (Style Library too). Add the Link script above into a text file and upload that. Add a Content Editor Web Part to the page and through the settings, point it to the TEXT file with the script.
The CEWP part is executed during the HTML creation process when building the page thus the CSS gets executed with the header (like the rest of the CSS for SharePoint).
Try adding your .css file to your main web "Style Library"
You need only to publish your css file
Go to your all document view
find your file
publish
The best and easiest way I found to add any form of html into the document when adding a webpart simply add a form then edit the html as you would normally and this will no longer give you the
Warning: The HTML source you entered might have been modified.
It will just leave the markup in there without sharepoint stripping or editing your markup
Just wanted to make people aware that this is possible and maybe an option if you don't have access to the other suggests.