PDA

View Full Version : Changing the CSS



MikeSteffler
27 Jul 2009, 11:11 AM
Hi, I'm a graphic designer, just got pulled into a project that uses Ext GWT. I'm supposed to go through the CSS and make a few sets of changes, saving several CSS files as 'skins'.

I have found that the CSS they're using is very long and complicated, and I have used Firebug to alter it on the fly, but I have not been able to have any real effect on the look of it...

I don't even know what all this GXT-GWT-mumbo-jumob even is. I'm just charged with altering a CSS.

Is there some sort of guide out there, some documentation that will guide me to the proper path to change?

Please help, I don't know where else I could go...

romero83
4 Aug 2009, 4:05 AM
Hi!

I'm a graphic designer too.
Find your project main html, jsp, ... and find for css definitions.

If you don't have any, than link into the project main html, jsp, ... : gxt-all.css and gxt-gray.css
Make sure that the Document Type Definition is HTML 4.01 Transitional, otherwise you may find some strange behaviour.


<link id="gxtAll" rel="stylesheet" type="text/css" href="css/gxt-all.css" />
<link id="xthemeGray" rel="stylesheet" type="text/css" href="css/gxt-gray.css" />For this point, you linked the main, original framework CSS files.
To create custom design, you have to link your own CSS files as well.
For example:


<link id="Project_CSS" rel="stylesheet" type="text/css" href="Project_CSS.css" />
<!--[if IE 7]>
<link id="Project_CSS_IE7" rel="stylesheet" type="text/css" href="Project_CSS_ie7.css"/>
<![endif]-->
<!--[if IE 6]>
<link id="Project_CSS_IE7" rel="stylesheet" type="text/css" href="Project_CSS_ie7.css"/>
<link id="Project_CSS_IE6" rel="stylesheet" type="text/css" href="Project_CSS_ie6.css"/>
<![endif]-->Etc.

But if you don't have a clear layout system on your project, than the CSS hack will be more difficult or maybe almost impossible.
So, if you want to style the design with CSS, than first you have to create a clear and well defined JAVA layout code.
In our project we use extended ContentPanel and LayoutContainer for base field widgets.
The LayoutContainer is very good, because it just create a simple <div>.
The ContentPanel has header, content and toolbar.

Hope it helps something.

Arno.Nyhm
6 Aug 2009, 6:24 AM
In our project we use extended ContentPanel and LayoutContainer for base field widgets.

can you post your extended ContentPanel and your extended LayoutContainer if possible?