Eckhard M. Jäger

CSSdev for Gimp

Wednesday, June 18, 2008 1:11:18 PM

xhtml, web development, GIMP, css, HTML, browser, web

So here comes my announced and awaited script "CSSdev for Gimp" that is a remastered and more feature rich Python implementation of the old and buggy Gimp2CSS. After a hacking session at area42 this is a first cool working version was available. Meanwhile i updated this script various times and added more features. The major goals for the future are adding support for floating design and nested layers.

How it work:
* open your designed draft in Gimp
* Goto "Filter > Web > CSSdev"
* select your options and a folder where to export the "gimp_cssdev.html"
* After export you will find an XHTML source in the given directory that includes CSS styles too

What still works:
* Visibility for layers and the options of the CSSdev dialog
* Opacity for layers
* Creating an z-indexed based layout
* Layer positions and layer size
* Default font and alternative faces based on my CSS font matching
* default font, its size and its style
* Link colors
* Background color and forground color are based on the actual background colors and forground color of the toolbox
* optional export of layer height
* optional automatic color picking for DIV background color
* The CSS property Clip is supported via layer masks
* Creating additional CSS code for text layers (requires Gimp 2.5.x +)
* Export content of text layers (requires Gimp 2.5.x +)
* Croping layers to their content on export

All other options did not work at this moment but will coming soon.
Download
Download the CSSdev script and copy it to

/home/#YourProfileName/.gimp-2.6/plug-ins

Make sure the file is marked as executable.

Windows user have to copy it to

C:\Dokumente und Einstellungen\#YourProfileName\.gimp-2.6\plug-ins

Make sure your Gimp-Python is installed and working, Windows users will find more informations about Python and Gimp here. The cssdev.py must be marked at the accessrights as an excutable.

Wine 1.0Firefox download day

Comments

1 2 Next »

Jake Tolbertcrazybilly # Wednesday, June 18, 2008 1:56:22 PM

Awesome. I'm looking forward to giving this a go.

Thanks for your hard work!

Unregistered user # Friday, June 20, 2008 11:34:34 AM

Michael writes: Well, hello from the guy who has brought you gimp2css... I wrote this script for Gimp 1.x, that is ages ago, no wonder the produced html+css is not up to date... besides, I'm not really a designer, I work mainly as a backend developer (databases, models etc.) and I needed something pure and simple (well, it doesn't use td tags for layout, now, does it?) for a couple of freelance projects I was involved in at the time. I have posted it online hoping it might be of use. http://freeyourtech.wordpress.com/2008/06/04/gimp2css/ Now, the fact that you have professional expertise in Design, Bart, raises the stakes - I'm expecting to see great stuff. Good luck with CSSdev!

Eckhard M. Jägerarea42 # Friday, June 20, 2008 2:48:30 PM

Hi Michael,
i'm on it

Today i fixed a small bug in the "clip" feature and i started thinking about an algorithm to analyze a design with nested layers. That's the next step. After that i will export implement the image export.
I'm a little bit disappointed that there is no access in GIMP to text layer and the font informations

Hopefully this will be better after the GSOC GIMP Python project.

Unregistered user # Saturday, June 28, 2008 4:58:02 PM

Tenno writes: I must be missing something as i can't get it work... I've installed it in C:\Documents and Settings\Tenno\.gimp-2.4\plug-ins I've follwed the path filters>web ... but no CSSdev just image map and semi-flatten (grey'd out) so what am I doing wrong?

Eckhard M. Jägerarea42 # Saturday, June 28, 2008 9:23:37 PM

@Tenno:
Make sure Gimp-Python is working, check the link in the article about Windows and Python.

Unregistered user # Wednesday, July 30, 2008 10:36:52 AM

micker writes: hello i discover your script i am really imprecive !!! but when i try with gimp 2.4.6 i didn't have the same option with you no div link color ect can you help me ? micker@free.fr Thanks

Eckhard M. Jägerarea42 # Wednesday, July 30, 2008 11:35:45 AM

CSSdev is in development so may there are variations about the options. I planed creating a various range of web tools for Gimp:
- a flash gallery export http://my.opera.com/area42/blog/gimp-flash-gallery
- SuperSlice - a powerfull slicing tool
- CSSdev

Let us talk about bugs when CSSdev 0.5 will be available (soon)

Unregistered user # Monday, September 1, 2008 9:19:43 AM

micker writes: hello do you have some news ? i am really impressive !

Unregistered user # Thursday, September 18, 2008 3:58:45 PM

Unluckyluke writes: Hi Eckhard, I am a professional freelance web developer (php, mostly), definitely a Linux user and a Gimp and Inkscape fan and a Sourceforge project admin (PHP-SmartCSS and DynamiTE4CSS). I really enjoyed your GIMP script and I made some small changes in its code. I would be really glad to contribute someway to CSSDev grow, and to share my changes with you. Can I contact you via e-mail? Greetings.

Eckhard M. Jägerarea42 # Thursday, September 18, 2008 5:54:37 PM

Hi Unluckyluke,

just drop me a line "bart neeneenee de"

Thanx!

Unregistered user # Wednesday, September 24, 2008 4:14:52 PM

micker writes: do you have some happy news ? thank for your work !

Unregistered user # Thursday, November 6, 2008 4:46:56 PM

ajabogado writes: I will eagerly wait for this. I tried it on 2.6, the menu on "Filter > Web > CSSdev" doesn't show up. BTW, super slice will also be a big blast for GIMP.

Eckhard M. Jägerarea42 # Sunday, November 9, 2008 10:34:07 AM

Hi ajabogado,

make sure the file is marked as executable.

Unregistered user # Monday, January 5, 2009 5:21:55 AM

bsbodden writes: On Max OS/X (Tiger). Got Gimp 2.6 running and the script in the plug-ins directory, it is marked as executable but still no Filters | Web | CSSDev shows. Any clues?

Unregistered user # Friday, January 9, 2009 1:16:19 PM

apowell writes: bsbodden, In Terminal: chmod +x filename In Finder: remove the .py form the name In Gimp: refresh scripts list and it should show up. Andre

Unregistered user # Thursday, February 12, 2009 3:13:53 PM

Lari H writes: Is there a new version of cssdev available? I'm interested in the image export functionality (similar to gimp2css). Cool tool. Regards, Lari

Unregistered user # Thursday, February 12, 2009 4:26:37 PM

Lari H writes: I've just ported the image export code from gimp2css (perl) to python. Here's a version of cssdev that supports image export to png: http://pastebin.com/f45b407ae

Unregistered user # Thursday, February 12, 2009 4:30:26 PM

Lari H writes: minor bug fix to the previous version. http://pastebin.com/f632560b

Unregistered user # Friday, February 13, 2009 3:28:26 AM

Lari H writes: Improvements: * cleaner code: refactoring (extracting methods, etc.), cleaning code, migrating to OOP * features: image export support selection that has been saved as channel can be exported too supports "slicing" any shapes (saved selections) with alpha channel support. view code & download: http://pastebin.com/f67aea139

Eckhard M. Jägerarea42 # Monday, February 16, 2009 10:49:21 AM

Hey Lari,

thank you for all this work. I have to review it but at the moment there is no time for me going on with it. This will hopefully changed in some weeks

Your improvements sounds great!

Luca Zanchetta made some improvements to that aren't integrated yet

Unregistered user # Thursday, February 26, 2009 4:52:00 PM

MJL writes: I just installed this on windows and it dont see the option in Gimp. Python is installed(in path) and working, tried removing the .pl and made sure the permissions were ok. Please Advise

Eckhard M. Jägerarea42 # Thursday, February 26, 2009 7:10:29 PM

MJL at the moment i can't help but i will try it as sson as i can on a wondows pc.

Unregistered user # Thursday, February 26, 2009 7:14:35 PM

MJL writes: Ok i got it installed. I am getting this when I hit ok to export Traceback (most recent call last): File "C:\Program Files\GIMP-2.0\lib\gimp\2.0\python\gimpfu.py", line 692, in response dialog.res = run_script(params) File "C:\Program Files\GIMP-2.0\lib\gimp\2.0\python\gimpfu.py", line 353, in run_script return apply(function, params) File "C:\Documents and Settings\mlaster\.gimp-2.6\plug-ins\cssdev.py", line 552, in python_cssdev cssdev.execute() File "C:\Documents and Settings\mlaster\.gimp-2.6\plug-ins\cssdev.py", line 461, in execute self.create_css_for_drawables(drawables, do_position, do_layerbg, do_height, do_bold, do_italic, do_crop, xpos, ypos, valid_layer, layer_text, image_width, image_height, this_font, file) File "C:\Documents and Settings\mlaster\.gimp-2.6\plug-ins\cssdev.py", line 325, in create_css_for_drawables layer_bg = drawable.get_pixel(xpos, ypos) error: could not get pixel (30, 30) on drawable (ID 286)

Eckhard M. Jägerarea42 # Thursday, February 26, 2009 7:46:07 PM

What kind of Python and Gimp version you have installed?

Unregistered user # Thursday, February 26, 2009 7:57:38 PM

MJL writes: gimp 2.6.4 Python 2.5.2 (r252:60911, Feb 21 2008, 13:11:45) [MSC v.1310 32 bit (Intel)] on win32

Unregistered user # Tuesday, March 3, 2009 4:21:28 PM

Tim writes: Hi all believe it's great and helpful plugin .... but have a same problem as MJL descibed on ubuntu :( regards, man ...

Eckhard M. Jägerarea42 # Thursday, March 19, 2009 9:53:34 PM

Hello MJL, hello Tim,

today i installed Gimp 2.6.6 and tried out CSSdev again. Anything works fine here on Ubuntu Hardy 8.04. Are you sure you have Python support in Gimp and the "cssdev.py" in "~/.gimp-2.6/plug-ins" is marked as an executable at the file properties?

Unregistered user # Monday, April 13, 2009 3:30:40 PM

Gamegoofs2 writes: I'm a bit confused. Does CSSDiv work on Windows computers?

Eckhard M. Jägerarea42 # Monday, April 13, 2009 6:46:54 PM

It should run, Make sure your Windows-Gimp installation supports Python.

Unregistered user # Tuesday, April 21, 2009 9:35:24 AM

Theirishkiwi writes: Hi, Have installed cssdev.py /Gimp 2.6.6 on Hardy. Getting following error on export? Traceback (most recent call last): File "/usr/lib/gimp/2.0/python/gimpfu.py", line 692, in response dialog.res = run_script(params) File "/usr/lib/gimp/2.0/python/gimpfu.py", line 353, in run_script return apply(function, params) File "/home/chris/.gimp-2.6/plug-ins/cssdev.py", line 231, in python_cssdev layer_bg = active_image.layers[this_layer].get_pixel(xpos,ypos) error: could not get pixel (30, 30) on drawable (ID 2) I think it's to do with python as do not have gimp-python install, but unable to locate appropriate version for 2.6.6. Any pointers? Chris (Theirishkiwi)

Eckhard M. Jägerarea42 # Thursday, April 23, 2009 9:22:27 AM

The plugin try to get the color on 30 pixel X and 30 pixel Y, but it seems there is nothing. What's the size of the image?

Unregistered user # Saturday, April 25, 2009 6:38:07 PM

ivme writes: thanks for this useful plug in. are there any example document about using ?

Eckhard M. Jägerarea42 # Monday, April 27, 2009 1:52:41 PM

not yet

Unregistered user # Tuesday, April 28, 2009 5:17:53 PM

Everett writes: When I go to reinstall Gimp, it won't let me check the Gimp Python Extention. I'm pretty sure I installed everything properly, but who knows. Any help?

Eckhard M. Jägerarea42 # Tuesday, April 28, 2009 8:40:57 PM

Sorry, i can't really help. I'm using Ubuntu Linux. Have you checked this:
http://registry.gimp.org/node/3916

Unregistered user # Tuesday, May 5, 2009 10:20:08 PM

Ziyaretçi writes: I'm a bit confused. Does CSSDiv work on Windows computers? Muhabbet mirc sohbet Thanks You

Eckhard M. Jägerarea42 # Wednesday, May 6, 2009 9:21:22 PM

It should work on Windows when you have Python support for GIMP installed .

Unregistered user # Friday, May 8, 2009 3:38:44 PM

Steve writes: Hi I am getting exactly the same error message as Theirishkiwi Traceback (most recent call last): File "/usr/lib/gimp/2.0/python/gimpfu.py", line 692, in response dialog.res = run_script(params) File "/usr/lib/gimp/2.0/python/gimpfu.py", line 353, in run_script return apply(function, params) File "/home/steve/.gimp-2.6/plug-ins/cssdev.py~", line 231, in python_cssdev layer_bg = active_image.layers[this_layer].get_pixel(xpos,ypos) error: could not get pixel (30, 30) on drawable (ID 10) I'm running Ubuntu Linux 9.04 with Gimp 2.6.6 I'm also getting at the end of the failed export "Plug-In 'CSSdev' left image undo in inconsistent state, closing open undo groups " any suggestion??

Unregistered user # Saturday, May 9, 2009 9:54:50 AM

Steve writes: UPDATE ON ABOVE COMMENT I installed libgimp-perl and now the script seems to work

Unregistered user # Tuesday, May 19, 2009 12:06:39 PM

kabin writes: I will eagerly wait for this. I tried it on 2.6, the kabin menu on "Filter > Web > CSSdev" doesn't show su deposu up.

Unregistered user # Monday, May 25, 2009 4:34:14 PM

Gamegoofs2 writes: I got it installed, but I'm not sure how to use it. When I exported my design it didn't look anything like my design. Is there some sort of how-to-use thing I could read?

Unregistered user # Monday, May 25, 2009 4:35:58 PM

Gamegoofs2 writes: I got it installed, but I'm not sure how to use it. When I exported my design it didn't look anything like my design. Is there some sort of how-to-use thing I could read?

Unregistered user # Monday, May 25, 2009 4:36:41 PM

Gamegoofs2 writes: Sorry about the double post. Something must have messed up.

Eckhard M. Jägerarea42 # Tuesday, May 26, 2009 7:08:46 AM

Hello guy's,

it seems some of you make the mistake downloading and installing the old, buggy and outstanding Perl-Script Gimp2CSS.
If you like to get much more flavor you have to download and install my script CSSdev!

Unregistered user # Saturday, May 30, 2009 3:29:10 AM

Gamegoofs2 writes: I'm using your code for CSSdev and it's still not working.

Unregistered user # Wednesday, June 3, 2009 7:28:31 AM

Danilchenko writes: Hi! Good idea - save many time to create web pages. How to recreate existing html and css if my image changed not globally. For example, will changed background color in any blocks or removed old block. This planned? Thanks!

Unregistered user # Wednesday, June 3, 2009 7:32:59 AM

Danilchenko writes: Find mark in text "Background color and forground color are based on ..." - word "forground" replace to "foreground" please.

Unregistered user # Wednesday, June 3, 2009 8:03:25 AM

Аноним writes: I open PSD and AI files (export), but generate empty documnet :-(. Yiou test it? How to wrk eith this files? Support SVG files? I create new document with text string. On generate I see next error message: Traceback (most recent call last): File "/usr/lib/gimp/2.0/python/gimpfu.py", line 692, in response dialog.res = run_script(params) File "/usr/lib/gimp/2.0/python/gimpfu.py", line 353, in run_script return apply(function, params) File "/home/anton/.gimp-2.6/plug-ins/cssdev.py", line 231, in python_cssdev layer_bg = active_image.layers[this_layer].get_pixel(xpos,ypos) error: could not get pixel (30, 30) on drawable (ID 7)