I am NOT after anyone to code this, I am after some advice and possibly links to similar system, that we may learn from
I have searched long and hard, but had no luck. What I am wanting to do is:
Have a webpage with two panes. Demo image below.
Upper Pane: holds a CSS file, like a textarea. User can edit and save as they go. With a Preview button below..
..which onclick shows a preview pane or modal window. With the css changes to a particular file.
I suppose its a bit like JS fiddle, but it preloads a specific css file.
The Preview pane has a specific html file loaded. So that when user saves the session updates the css file, and they can se their progress.
I know this isnt a question in the strictest sense, and perhaps before voting down you may just assist with some pointers to similar scripts .. or logic. As it is I have had no luck finding anything that can do this, let alone knowing where to start to create something like this.
Another one pure css jsfiddle Dabblet.com:
Instant preview, increment/decrement by alt+up/down keys
Related
I'm trying to use an open source HTML5 file uploader snippet in one of my pages, and have put (I believe) all the correct javascript in place.
However, when the page loads I see the 'choose file..' button along with the text box that shows the path to the file on my hard drive, and they're both greyed out.
In looking through the Google and FireFox development tools I can't see why this would be; the CSS involved is quite involved and I can't tell easily whether there's a block display of hidden in there, or whether something else is disabled.
Nothing's jumping out. Are there HTML or CSS inspectors that can help figure out why HTML element X is disabled?
There should be a disabled attribute set. You can try two things:
Check the HTML by viewing the source code. This is the HTML rendered before JavaScript.
Check the Dev Tools and look for a disabled attribute. Then check your JavaScript.
It is hard to debug this remotely but this should send you on your way.
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 🤓
Is it possible for me to edit the css using coda, and view my changes live in a separate window?
I just downloaded it as I heard good things about it, and I want to learn efficient CSS coding using it.
cmd-2 and cmd-3 are shortcuts that are great, looking for any tips that would help me be fast!
I think you might be looking for a plugin called Lively
http://menumachine.com/blog/2008/12/a-live-preview-window-for-coda/
Also you can add a refresh meta tag to your HTML. This will refresh the page every 2 seconds.
<meta http-equiv="refresh" content="2" />
Another solution is the XRefresh plugin for Firefox...
http://xrefresh.binaryage.com/
Hope that helps!
Couldn't you have the page you're building in a separate browser window and refresh with edits? Especially if you're not working off a server because you don't need to commit anything and all your files are immediately uploaded.
I know Coda has a preview screen for CSS styles. But as answered earlier you may want to try Lively if that's more what you are looking for.
Best of luck
Keep an eye on on LiveReload. It looks as if it has an impressive feature set and will cost you a small bit.
Lively? Coda does this already with the split window function; for example:
Split an index.html file and have one half as preview and the other in edit and you will see the preview change as you edit the editable file you have loaded.
With CSS, split the window and drag an html file from the left menu and change it to preview - saving the edited css file with update the preview.
A footnote to this is a problem where "live update" stops working - awaiting Coda's comments on this as only found one other thread online that refers to this major problem.
Should this bar on the HTML designer show the tag name? It sometimes does!
Here's an image of what I referring to.
I thought for sure it must be a bug but considering that I heard that MS was rewriting the editor (designer too?) I am starting to question whether I know how to use it!
Note the "TD" tooltip on the bottom right. Shouldn't this "TD" appear on the bar on the far right where the mouse would be?
This looks like a bug. If there's a reliable repro for it (i.e. if you can show to do it from a new or sample form), you should file the bug on http://connect.microsoft.com/VisualStudio. (Or you could file it anyways, but without a repro, it's hard to find and fix...)
Here's my current workflow for editing CSS:
Me: "Take a look at this page!"
Guys: "Try making the post titles bigger"
Right click on a post title, choose "inspect" (to inspect it in firebug)
Find the appropriate CSS statement in Firebug (h2.post_title or something)
Modify the CSS in Firebug, ask friends how it looks
If it looks good, make the change again in Textmate
I want to avoid step 6. I.e., I want the ability to edit CSS via a Firebug-like UI and be able to commit my changes to the relevant file immediately (rather than having to copy them by hand as I do with Firebug)
Edit: Something that works on a Mac would be ideal
Have you tried "Web Developer" extension in Firefox? It allows you to open, edit and save CSS files.
http://www.skybound.ca/
Go forth and be enlightened. This is truly a life changing program.
Another possible workflow:
"Hey guys, take a look at this page!"
"Try making the post titles bigger"
Make the change to the CSS file
Hit reload
I only use Firebug for debugging (eg: "why is this thing getting that style?") not for making changes when I know where they need to go in the CSS. This workflow does depend somewhat on being able to reload the CSS easily. If you're working on an app where hitting reload completely disrupts your state it might not be ideal.
Check out Backfire:
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
Haven't tried it, but sounds promising.
Check out my contribution to this problem:
http://www.cssupdater.com
Step 6 would then be:
6: One click on the "Sync now" button in Firebug!!
The click sends your changes to the desktop application, which syncs your orignal css files.
You can also choose the changes you want to sync in the application. It works with your favorite text editor or IDE and on both Windows and Mac!
Heureka?
XRefresh with "Soft Refresh" enabled may help your workflow, but you still need to know what CSS selectors do you want to add/edit.
What's why I'm developing LIVEditor, because I don't want to manually redo the change again in the text editor after tweaking my css styles in Firebug (or the likes).
Backfire (see post below) was created specifically for Quplo (http://quplo.com), which is a tool that specificly does what you describe. You write html and css, then talk about what needs to be changed, make the changes (using firebug or web developer toolbar) and hit save.