1. #1
    Ext JS Premium Member syscobra's Avatar
    Join Date
    Nov 2007
    Location
    Venezuela
    Posts
    140
    Vote Rating
    0
    syscobra is on a distinguished road

      0  

    Thumbs up [UPDATED v0.3][3.X] tool, Themes (Original and Human) Color Changer

    [UPDATED v0.3][3.X] tool, Themes (Original and Human) Color Changer


    Hi all.
    I would like to share my Color Theme Changer for ExtJS 3.0.

    This is the version v0.3
    http://playground.ideashs.com/themescolor/

    With this tool you can now change the Hue(colors), Saturation(intensity of colors) and Lighting(brightness of colors) of the current xtheme-blue.css for ExtJS 3.0.3 version.

    The ranges are for hue -360 to 360 Saturation -100 to 100 and lightness -100 to 100.

    Take care with the lightness because more than +10 looks awful, i just added the posibility because is what the color charts says

    Just change the hue saturation and lightness to whatever you want then press "Preview Colors". You will see a palette of colors to compare with the original blue from Ext.
    [Update v0.3] I added the Human (Ubuntu) theme from momarf (http://www.extjs.com/forum/showthread.php?t=81805) i asked him permission with a private message but i have not received the reply yet, but as it is free i used it, if he has any problem with it then i will have to change this.

    [Update v0.2] Now you can view an not exact change of an image from window to preview colors.

    If you like the colors then put the name (according to the colors you change) of the theme and click "Generate Theme". It will generate the xtheme-"yourtheme".css file change the gif's and png's from the original blue ones, make the ZIP file to download and then Change the theme of the tool to watch your newly generated theme.

    For example if i put a hue of -59 and click preview i then see that the colors has changed to green ones. then i put the theme name "green" and click on "Generate Theme" and voala i got the zip with green theme.

    If you ask how it is done, i use a lot of preg_matches and string replacements to get the colors from the file, then preg_matches to get the images and i made a Color changer with a conversion utility called color.php from PHP classes. (Just make the other functions to adapt to this tool, image changer from gif etc)

    Its made in PHP with ExtJS 3.0 RC1

    Any feedback about the tool is welcome.

    Have Fun

    ToDo:
    -Include an editor of the Titles and all Fonts colors used by the theme.

    LOG:
    v0.3
    - Now we are using the 3.0.3 version of the theme.
    - I added the hability to use as source the Human (Ubuntu) Theme from momarf (http://www.extjs.com/forum/showthread.php?t=81805)
    v0.2
    - Fixed the examples panels and windows. Thanks Shea!
    - Use of a preview image of a window to see better what it will look like, Its slow but better than generating all the theme.
    v0.1
    - Created the Color Theme Changer
    - Added to the xtheme-blue.css the normal link colors for anchors (a)
    - Zip file download of the generated theme
    Javier Rincón aka SysCobra

  2. #2
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    I messed around with the controls and it messed up, making the page look like this:

    (no, I didn't ramp all the controls all the way)
    Attached Images

  3. #3
    Ext JS Premium Member syscobra's Avatar
    Join Date
    Nov 2007
    Location
    Venezuela
    Posts
    140
    Vote Rating
    0
    syscobra is on a distinguished road

      0  

    Default


    yes the examples controls looks awful, i dont know why, i just took from the examples and i am looking into getting this fixed, don't know if its a viewport thing about getting the align to the left, or that the viewport have a fixed width. But the generated theme is always good, just that the examples looks awful. You can download the theme you made and try it yourself in your projects.
    My server is not that good so maybe the images of the new generated theme comes slowly.
    Try some of it and you will see if its ok.

    I see the theme you made its almost white. Try not to use a lot of lightness. start changing only the hue to look what it make.

    You can review the colors first with the "Preview Colors" if a lot of them are #ffffff then you get a white theme.
    Javier Rincón aka SysCobra

  4. #4
    Ext User
    Join Date
    Jun 2007
    Posts
    51
    Vote Rating
    0
    pcrombach is on a distinguished road

      0  

    Default


    Great work!!

    I played with this theme generator. By playing with the sliders I can generate good looking theme's. However a second time is always bad. A second theme is only useable after refreshing the page and generate from a fresh page. I just wonder can I use these themes in Ext 2.2.1??
    What I want is themes not only by 1 color. 2 or more colors would be nice. Example: 1 color for the frames and 1 color for the tabes, windows, grids, etc... Maybe in the future..

  5. #5
    Ext JS Premium Member syscobra's Avatar
    Join Date
    Nov 2007
    Location
    Venezuela
    Posts
    140
    Vote Rating
    0
    syscobra is on a distinguished road

      0  

    Default


    Quote Originally Posted by pcrombach View Post
    Great work!!

    I played with this theme generator. By playing with the sliders I can generate good looking theme's. However a second time is always bad. A second theme is only useable after refreshing the page and generate from a fresh page. I just wonder can I use these themes in Ext 2.2.1??
    What I want is themes not only by 1 color. 2 or more colors would be nice. Example: 1 color for the frames and 1 color for the tabes, windows, grids, etc... Maybe in the future..
    Thanks,

    It doesn't work with Ext 2.2.1 because it use another button aproach. and some other components from 2.2.1 that were really changed in this new css version. As is automated i can make any css i want, but then i have to separate the colors and all the images from main theme on 2.2.1 and thats some work. Maybe i will change it in next version.

    About the 2 colors yes, i like too that aproach, but i have to make the theme (i am making some others) then i can use this tool to select what type of theme you want and generate it with the color you want. I just posted this now because i finish this work and want to share until i make the other stuff. But it takes time.

    Thanks for your feedback
    Javier Rincón aka SysCobra

  6. #6
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Javier,

    This has serious potential. Obviously, you have a lot of bugs to work through. going to watch this progress.

  7. #7
    Ext JS Premium Member syscobra's Avatar
    Join Date
    Nov 2007
    Location
    Venezuela
    Posts
    140
    Vote Rating
    0
    syscobra is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    Javier,

    This has serious potential. Obviously, you have a lot of bugs to work through. going to watch this progress.
    Thanks

    Share any bugs you encounter. I am only working in the examples page, its all messed up. and i now look into IE and the slider bars goes more to the right.
    About the generated theme file its ok because the script only change the colors tags to the new hue saturation and lighting, and the images/default path to the images/theme path, it doesn't mess with any, absolutely any other stuff, only the colors and the paths. Some of the generated images are bad, but if you don't like that image you can replace with the original one, or just repair it yourself. I looked when i make this and found that shadow was bad, and eliminated the generation of those images. also the loading gif are animated so i cant change the colors from the script. So if someone make a theme here, he only needs to check the images and change what they want, but the colors of borders and all backgrounds etc are OK.

    Thanks for the feedback.
    I am just waiting for more time to finish reading your book and found this horrible awful examples fault.
    Javier Rincón aka SysCobra

  8. #8
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Awesome!!

    May be in future can we create in-pallete based themes.

    Good work!!!

  9. #9
    Ext JS Premium Member syscobra's Avatar
    Join Date
    Nov 2007
    Location
    Venezuela
    Posts
    140
    Vote Rating
    0
    syscobra is on a distinguished road

      0  

    Default


    Quote Originally Posted by galdaka View Post
    Awesome!!

    May be in future can we create in-pallete based themes.

    Good work!!!
    Yes i was thinking about that, but its too much of a work to have a theme editor, lol.

    For next version i am planing to put a "Color Text Editor" too, because if you put for example a very dark blue on the theme the title font and other titles looks bad cause you cant read them. So first i will do that.

    But in other version i will have some other themes from start, and i am thinking about using, inside and outside controls to change the colors. For example the borders of windows are outside but the grids are inside. I just have to clasify what is what.

    Then, if i have time i will move to per component editor. And let people put their own images, but thats too far away. So i just share what we can do now.

    Maybe i will add theme editor for 2.2.1 too because a lot of people still uses it. I am just waiting for more feedback on what people would like, so thanks for your feedback.
    Javier Rincón aka SysCobra

  10. #10
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    You can use my theme if you want: http://extjs.com/forum/showthread.php?t=65694

    There are some excellent color controls in forums:

    http://extjs.com/forum/showthread.php?t=65538

    http://extjs.com/forum/showthread.php?t=65537

    Greetings,