The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.
CSS Input
Hi,
Does anyone know if there is any tool (probably a Chrome extention), that will allow you to inject a css sheet (stored on your server), into another site, for viewing purposes only.
I update / redesign a lot of different sites for my clients. I usually start by opening their site in Chrome and using the inspector to change a few things around in front of the client... however as soon as i close the tab, the changes are lost... so i'd like to be able to save the CSS code to a input-style.css file and save it to my server and then 'inject' it into my client's site for demonstration purposes.
Thanks in advance for your help.
Does anyone know if there is any tool (probably a Chrome extention), that will allow you to inject a css sheet (stored on your server), into another site, for viewing purposes only.
I update / redesign a lot of different sites for my clients. I usually start by opening their site in Chrome and using the inspector to change a few things around in front of the client... however as soon as i close the tab, the changes are lost... so i'd like to be able to save the CSS code to a input-style.css file and save it to my server and then 'inject' it into my client's site for demonstration purposes.
Thanks in advance for your help.
Who is Participating?
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get this solution by purchasing an Individual license!
Start your 7-day free trial.
I wear a lot of hats...
"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.
Not sure about chrome - I did find this though
https://developer.chrome.com/extensions/manifest/web_accessible_resources
And this
https://developer.chrome.com/extensions/tabs#method-insertCSS
Which talk about injecting CSS into the page
https://developer.chrome.com/extensions/manifest/web_accessible_resources
And this
https://developer.chrome.com/extensions/tabs#method-insertCSS
Which talk about injecting CSS into the page
I don't think stylish works with HTML. In chromes developer tools there may be something like that but I don't know since I haven't used such a feature. What are you trying to accomplish? There may be another way to do it which works better.
Thanks Brandon.
Basically i spend a lot of time, editing CSS and HTML live on a website in front of a client, using Inspect Element on Google Chrome.
This allows me to change the colors of various part's of a client's website in front of them so that i can direct feedback on the changes they want.
Obviously as soon as move away from the page or refresh the page, the changes are lost... i'll love to be be able to save the changes to a 'browser css file' as such so that anytime the page is loaded i can turn this on and off to inject CSS and HTML.
Basically i spend a lot of time, editing CSS and HTML live on a website in front of a client, using Inspect Element on Google Chrome.
This allows me to change the colors of various part's of a client's website in front of them so that i can direct feedback on the changes they want.
Obviously as soon as move away from the page or refresh the page, the changes are lost... i'll love to be be able to save the changes to a 'browser css file' as such so that anytime the page is loaded i can turn this on and off to inject CSS and HTML.
There are text editors such as brackets.io which will automatically reload a page when you save a local file. I believe you can use them to inject css or possibly html.
Here is a link from the brackets github which goes over the live-preview functionality.
https://github.com/adobe/b
If you can't get it working, there are plugins which add similar functionality to the atom.io editor.
https://github.com/adobe/b
If you can't get it working, there are plugins which add similar functionality to the atom.io editor.
Thanks Brandon. Sorry i don't think i am explaining myself correctly.
If a new client loads their existing site in a browser (as normal)... i'd like to be able to 'CSS & HTML' hack it with them live, so they can see the suggestions i am making.
I'd then like to be able to save the changes i made so that i can 'inject' them into the webpage again if i load the website into a new tab.
If a new client loads their existing site in a browser (as normal)... i'd like to be able to 'CSS & HTML' hack it with them live, so they can see the suggestions i am making.
I'd then like to be able to save the changes i made so that i can 'inject' them into the webpage again if i load the website into a new tab.
It's not really feasible to load a server-side stylesheet into a random website, but only for one person.
The options I see are as follows:
1) Develop on a secondary server which is a copy of the first, modify the copy, and share the URL with them (this is industry standard practice).
2) You can use a screen sharing tool such as Google Hangouts so that they can see the changes you are making on your side.
3) Give the client a javascript they can paste into the developer tools console which will fetch a remote stylesheet and append it to the page (clients usually don't like doing this kind of stuff).
I highly recommend that you use revision control such as git. This will allow you to easily save a local set of changes and then push them to somewhere else. It will also make it easy to clone copies of your websites. As an added bonus you will get a revision history which makes it easy to revert changes.
The options I see are as follows:
1) Develop on a secondary server which is a copy of the first, modify the copy, and share the URL with them (this is industry standard practice).
2) You can use a screen sharing tool such as Google Hangouts so that they can see the changes you are making on your side.
3) Give the client a javascript they can paste into the developer tools console which will fetch a remote stylesheet and append it to the page (clients usually don't like doing this kind of stuff).
I highly recommend that you use revision control such as git. This will allow you to easily save a local set of changes and then push them to somewhere else. It will also make it easy to clone copies of your websites. As an added bonus you will get a revision history which makes it easy to revert changes.
I don't think you understand me still (sorry i am probably explaining it poorly :-)
From time to time i meet with various clients and they show me sites they like, but they always want to suggest tweaking certain aspects of sites the like.
I like to open any site they choose in Chrome, right click on the area they are talking about, and then click Inspect Element... this allows me to edit the CSS & HTML live in the browser.
This is only for prototype / wireframing... however i would like to be able to save the HTML / CSS hack
From time to time i meet with various clients and they show me sites they like, but they always want to suggest tweaking certain aspects of sites the like.
I like to open any site they choose in Chrome, right click on the area they are talking about, and then click Inspect Element... this allows me to edit the CSS & HTML live in the browser.
This is only for prototype / wireframing... however i would like to be able to save the HTML / CSS hack
It won't be a 100% copy but you can right click on the page, save as, and then open the saved version in a new browser tab. Then you can edit the source files using whatever editor you want (there are even browser plugin editors such as Quickfire). That sounds like it's going to be the closest I can get you to what.
Here is what I do.
I edit the CSS in Firebug using the CSS window. I choose the .css file I want to edit and make the modifications to it.
When I am done I copy the content and paste to a new file. If you work within the CSS tab - not the Style pane on the right of the HTML window - you get the entire CSS file this way - not just the contextual CSS relative to the highlighted element.
I edit the CSS in Firebug using the CSS window. I choose the .css file I want to edit and make the modifications to it.
When I am done I copy the content and paste to a new file. If you work within the CSS tab - not the Style pane on the right of the HTML window - you get the entire CSS file this way - not just the contextual CSS relative to the highlighted element.
Thanks guys. This is what i am referring too. I am surprised there isn't a plugin that allows you to capture / save the changes you made.
I am surprised there isn't a plugin that allows you to capture / save the changes you made.Giving a plugin writes to save to disk is a potential security risk. The only thing I would change is the Firebug - open in editor - where it opens the current style sheet in its changed form rather than the original. A highlight cut and paste though is a couple of keystrokes more.
Experts Exchange Solution brought to you by
Your issues matter to us.
Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.
Start your 7-day free trialIt's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS
From novice to tech pro — start learning today.
Experts Exchange Solution brought to you by
Enjoy your complimentary solution view.
Get this solution by purchasing an Individual license!
Start your 7-day free trial.