PDA

View Full Version : How to override gxt-all.css



doyley3
9 Sep 2009, 1:31 AM
Hi, I'm a total newbie.. so be gentle...

I'm trying to override gxt-all.css with my own stylesheet, Layout.css in /css

I've added <link rel="stylesheet" type="text/css" href="/css/Layout.css"> to my *.html file (located /war)

But the layout.css is not picked up,

what am I doing wrong?

Thank you in advance

romero83
9 Sep 2009, 11:56 PM
Hi!

First put the links tag in the html like this:
<link rel="stylesheet" type="text/css" href="css/gxt-all.css"/>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>

Second, you create the layout.css file in the css directory.

Third: when you would like to override an existing style in the layout.css, use:
.[style-name] {
.... : .... !important;
}

doyley3
10 Sep 2009, 12:08 AM
Thanks so much, that's really helpful.

Is it important to still use the original gxt-all.css as well as my Layout.css? Or can I combine the 2?

How do I override the elements which are not styled using css? For example the height of certain headings etc?

Thanks again!

nks14
10 Sep 2009, 1:13 AM
you can combine your layout and gxt-all, but i do not recommend. the best way is to keep your stylesheet in a different file. plus, i recommend that you apply a custom style name to each of your components ( component.setStyleName("custom-style") ). this way, you apply the style only to that component. let's take an example:

you want a button with no background and a button with a gray background. if you customize .x-btn-mc, the stylesheet will be applied to both buttons. but if you set a style name to each button and write a .button-style .x-btn-mc {}, the settings will be applied to that button only.

you get my point :)

doyley3
10 Sep 2009, 1:56 AM
Thanks! I think I'm starting to understand...:s

But where would I set a style name for individual components?

There are also some divs visible in the code (via firebug) that have their own styling elements outside the css, where do they live?

nks14
10 Sep 2009, 2:17 AM
example:
LayoutContainer lc = new LayoutContainer();
lc.setStyleName("layout");



and the css should be something like this
.layout {
property: value !important;
}

or if you want to customize only a child of your widget:
.layout .name-of-child {
}

doyley3
10 Sep 2009, 2:21 AM
Ok, so where would your example:

LayoutContainer lc = new LayoutContainer();
lc.setStyleName("layout");

be set? What I mean is, is there an overall .xml file that it would need to be added to? or does it have a specific related file?:(

nks14
12 Sep 2009, 11:06 AM
LayoutContainer lc = new LayoutContainer();
lc.setStyleName("layout");


this should be added in your mainEntryPoint.java
and the css file containing the .layout {} should be added in the html like this:
<link rel="stylesheet" type="text/css" href="css/layout.css"/>

Arno.Nyhm
14 Sep 2009, 8:16 AM
not everytime you need the "!important"

and the order of loading the css files is important at first load the gxt-all and later the layout.css as shown in the second posting in this thread.

you can add the style on every component: layoutcontainer, fields, buttons etc. if you adding the style on a higher component then you can style all your subitems (for example all fields in one form) with the new style.

but i would suggest, that you only ADD a stylename and not SET the stylename. otherwise the layout of your components can be destroyed. and with the addStyleName you need only to define the changing style attributes and not all attributes.

bak2006
8 Dec 2009, 10:00 PM
How to do this for "Over" or "Click" ??

Arno.Nyhm
10 Dec 2009, 5:43 AM
please explain more what you need?

i guess you talk about over = :hover and click = :visited

pls see this pseudo classes:
http://www.css4you.de/hover.html

bak2006
12 Dec 2009, 1:32 PM
Thanks Arno for you reply,

I have some toggle buttons and I want to override all CSS of unpressed, hover and pressed state. I've created class "my-button" in myApp.css file


.my-button .x-btn-tl,.my-button .x-btn-tr,.my-button .x-btn-tc,.my-button .x-btn-mr,.my-button .x-btn-ml,.my-button .x-btn-mc,.my-button .x-btn-bl,.my-button .x-btn-br,.my-button .x-btn-bc {
background:none;
text-align: center;
vertical-align: middle;
white-space: nowrap;
background-color: Green;
cursor: pointer;
}
Note: This code is for testing only :)


And I've set the style of this toggle button

toggleButton.setStyleName("my-button");

The previous code worked for unpressed state.
My question: How to do the same for pressed and hover state?

Thanks

Arno.Nyhm
15 Dec 2009, 5:30 AM
the way is:

istall firebug
http://getfirebug.com/

open this page in firefox
http://www.extjs.com/examples/explorer.html#buttons

right click on a toggle button and choose "inspect element" (or similar i dont know exactly the english translation - in german it is "Element untersuchen")

then you see the html view of the generated source.


hover over the button or click on the toggle button and the changes are highlighted and you see what you need to change for the css.

ps:
my hint: it should be something with -over and -focus and -pressed ;-)

bak2006
18 Dec 2009, 10:31 PM
Thanks Arno and sorry for late reply,

the problem was because the next function is not working:

setStylePrimaryName(String styleName)

I read that it's not implemented!, is this right? :-/

The only way was to extend "ToggleButton" and set "baseStyle" to my style: "my-button", then I was able to use all classes "my-button-over", "my-button-focus" :)

BUT, the pressed state didn't work. I discovered that it's HARD CODED in "ToggleButton" class as you can see in red:


protected void toggle(boolean state, boolean silent) {
this.pressed = state;
if (rendered) {
ButtonEvent be = new ButtonEvent(this);

el().setStyleName("x-btn-pressed", state);

if (state) {
onBlur(null);
removeStyleName(baseStyle + "-over");
} else {
onFocus(null);
}
if (state && toggleGroup != null && toggleGroup.length() > 0) {
List<ToggleButton> list = ComponentManager.get().get(ToggleButton.class);
for (ToggleButton tb : list) {
if (tb != this && tb.getToggleGroup() != null && tb.getToggleGroup().equals(toggleGroup)) {
tb.toggle(false, silent);
}
}
}
Accessibility.setState(buttonEl.dom, "aria-pressed", "" + state);
if (!silent) {
fireEvent(Events.Toggle, be);
}
}
}

So I have to override this method to change that line to:

el().setStyleName(baseStyle + "-pressed", state);

I wonder why it's hard coded this way ?!!!:-/

Regards,