8

The title says everything about what I'm looking for. Basically it should be an software that collects all styles of a website so I can edit them and save them.

Please read the question carefully, because I want all mentioned conditions to be met.

EDIT: I want to be more clear here or rather describe my desired workflow. Starting situation will be that you have the sources of the website on your local machine.
Now I want to open the plain sources (HTML/CSS) in my editor/IDE/whatever (no WYSIWYG!). And I want a live preview right next to it or in different window (not in another tab!), I want to see it as I edit the source. The preview should be updated automatically (or when I save the file which essentially would be the same because CTRL+S is kind of a reflex :P).
Additionally it should have an inspector that works like those in Firebug or Chrom(e|ium). When I click on a CSS selector in that inspector, the cursor should jump right to it in the respective source file.

ANOTHER EDIT: Found this https://stackoverflow.com/q/4680109/220652. Almost the same problem.

Community
  • 1
dAnjou
  • 2,035

8 Answers8

12

There are a few options.

Currently I simply use Google Chrome's Developer Tools (Action Video) as it allows for a wide range of inspection, detailed reporting, and over-riding. After making my changes I just copy the updated CSS and over write the relevant sections of the CSS file, refresh, continue plugging away.

Here I have edited a definition in Chrome's Developer Tool

enter image description here

I can follow the file name and line number (after copying the changes) and just paste them into the editor

enter image description here

Beyond that there is a tool recently launched called WebPutty which is designed to alleviate your described problem. While I haven't used it personally yet it's developed by Joel Spolsky's company Fog Creek Software (Joel is also Co-Founder of StackOverflow) So I'd be willing to bet it's a relatively stable, simple, and effective product.

Community
  • 1
Marco Ceppi
  • 48,101
  • How exactly do you copy the CSS? And can you do it per file? WebPutty doesn't seem to be able to handle local websites but thanks for the hint. – dAnjou Sep 07 '11 at 23:38
  • 1
    @jAnjou I tried to provide a few screenshots to show you how the workflow would go. – Marco Ceppi Sep 14 '11 at 21:00
  • Ah, ok. So this workflow is almost the same as with Stylebot. Biggest difference: Stylebot saves the CSS so you can reload the page or go to other pages on that website. Anyway, this get's an upvote. – dAnjou Sep 14 '11 at 21:52
5

This question seems to have already been discussed but you are more specifically talking about a CSS Editor. And I am sure that's why they haven't marked your question as duplicated.

However, what I can suggest you is the usage of several tools which I have posted in answers to other questions, like this: Dreamweaver alternative in ubuntu?, and even when I can bet that you have already seen it, I transcript it here for your convenience:

Your question seems to be a little bit ambiguous.

First of all and related to the alternative to Dreamweaver, I found all the suggestions of all the other answers excellent, but when looking for an alternative to Dreamweaver, the closest application -for me- it was the Amaya Project. Which seems to be richest than other alternatives and a little bit more sophisticated than the Kompozer.

A screenshot from the official web is here for you to see it in action:

enter image description here

Additional screenshots can be reached by clicking the next link: http://www.w3.org/Amaya/screenshots/Overview.html

You may find it a little bit unstable, or at least it was for me but it may also fit your needs.

After playing with WYSIWYG editors, I prefered direct encoding with BlueFish but it is not a WYSIWYG editor.

And about the suggestions for your issue with the firebug I can't say anything, sorry.

Please let us know how did you do if you give Amaya a chance.

Good luck!

Edit == After installing Amaya, I find it yet far from stable but somehow it seems to have a better features than other applications, if you consider that other software are simple Text Editors and Amaya is like a WYSIWYG editor.

I tested what you said in your comment and I found that Amaya don't even get noticed that something changed in the files/folders structure/name. Which won't fit your needs related to this.

In the next screenshot you can see I renamed the "resources" folder to "resources1" and Amaya is yet showing it as "resources" and there is no way to force it refresh. Even after restarting the software and loading the project again, Amaya won't notice it.

enter image description here

I am going to follow your question closely hoping somebody come and drop a good alternative.

Good luck!

Also, in the answers of other users to the same questions I found the "Blue Griffon Web Editor" which seems to be the only stable web editor that features a real time preview window, that -btw- can't be seen in split mode. You can only see the code or the WYSIWYG preview, not both at the same time.

Screenshots placed here for your convenience:

Preview Screen: enter image description here

Code Screen: enter image description here

This tool includes lots of useful tools but some of the add-ons or plugins may be non-free (paid). Which reduces the attraction to it.

The Aptana Studio 3, which I reccomend in this answer: Basic Web Development IDE/Editor like Dreamweaver? is -for me- the best tool for programming, since I can live preview using a web browser in my dual view extended desktop. Which may be not your case.

That's what I can suggest. Sorry if this don't fit your needs and...

Good luck!

Community
  • 1
Geppettvs D'Constanzo
  • 19,552
5

Ok, everbody listen! Geany is just AWESOME! It has a plugin that adds a browser preview. You can place it in the sidebar, in the "bottombar" or in an extra window. And now the two extra bonus bad ass killer features. 1. This browser uses WebKit. That means, it has this awesome inspector! 2. The browser reloads when you save an open document.

Besides this it has so many other awesome features but you should try it yourself. I for one just fell in love. Here you have a screenshot:

Geany

dAnjou
  • 2,035
  • I only wish it opened that it allowed browser window in a new "Tab". That would make non-css testing way better. – Nemo Sep 16 '11 at 05:25
  • I'm not sure whether I understand you, but you can have a browser preview in another tab in almost every other IDE. But that's exactly, what I didn't want. – dAnjou Sep 16 '11 at 11:12
  • See my question http://askubuntu.com/questions/60949/is-there-an-ide-with-inbuilt-browser-and-terminal – Nemo Sep 17 '11 at 18:26
  • Ah ... hmm. Unfortunatly it's not possible in Geany to have the browser preview (which is a fully featured browser) in a tab next to the editor tabs. But you can have it in an extra window. So you could use it with multiple monitors or with a widescreen monitor (one half browser, one half editor). – dAnjou Sep 17 '11 at 19:26
4

Sorry folks, but I will answer my own question. I just found Stylebot. It meets almost all conditions I have. It doesn't have any auto completion but I can live with that.

Here is a screenshot. The sidebar is Stylebot. You have a basic editing mode where you can quickly edit some simple properties, an advanced mode where you can edit the plain CSS for the selected element and with "Edit CSS" you can edit the whole CSS for the page.

enter image description here

Community
  • 1
dAnjou
  • 2,035
2

Try the Firefox addon Firediff. It integrates with Firebug adding the "Changes" tab, which, as the zen-like name suggests, shows any changes you make to the CSS or DOM.

Right click a CSS change in the "Changes" tab to save either a diff or a snapshot of your changes.

firediff screenshot

There is also cssUpdater, though I haven't used it.

As for "selector localisation", I'm not totally sure what you mean but there is selectBug, which you can download here.

scottl
  • 2,588
  • Firediff doesn't seem to work here on Natty and Fx 6.0.2. I made some changes here and there but there are no changes in the "Changes" tab. I'm almost sure cssUpdater would be what I'm looking for but it's not available for Linux. By "selector location" I mean the CSS selectors. When I right click somewhere on the website and click "Inspect Element", Firebug or the Chrom(e|ium) Inspector show me the respective element and its CSS. – dAnjou Sep 08 '11 at 09:54
  • It does work, I am using it in Natty and the latest Firefox right now. Ensure all changes are showing (click the little down arrow on the changes tab). – scottl Sep 08 '11 at 16:46
  • Ok, now Firediff works suddenly but it's a bit messy and the workflow with it is not really nice. – dAnjou Sep 09 '11 at 17:01
0

just a couple of weeks ago a new player raised on this field. I'm talkng about Adobe's open source code editor Brackets. All the info you need, here: https://github.com/adobe/brackets/wiki/Linux-Version

The version spring30 was just released a couple of days ago :) Good luck!

Rho
  • 1,204
  • 1
  • 12
  • 21
0

Aptana Studio is a great IDE but if I'm not wrong, it doesn't have Real-Time Preview. Anyway, if u r interested: http://www.aptana.com/products/studio3

P.S: It has a Hot-Key set for Preview so it's not that big of a deal.

Lilian A. Moraru
  • 6,603
0

Not software per se, but the Stylish Addon (chrome and firefox) updates a page automatically when you save an override stylesheet. Unlike FireBug, it does save it so you can copy and paste it into a proper .css file when you're satisfied.

Tarek Fadel
  • 609