How to override CellTable css

[manstis]

Hi,

I need to override some CellTable CSS definitions.

I've been able to isolate the classes to some named along the lines
of .GL0PBETBKC, .GL0PBETBEC etc.

The CellTable CSS appears to be injected into my module after my .css
file and the only way I have been able to override the above styles is
by using !important in my css file. Firebug shows the CellTable's CSS
to come from http://127.0.0.1:8888/MyModule.html?gwt.codesvr=127.0.0.1:9997.

Can anybody please advise the best way to override the above styles?
They are not part of standard.css and therefore changing my GWT Module
to inherit from 'com.google.gwt.user.theme.standard.StandardResources'
and linking to standard.css from my HTML page manually does not
provide a solution.

Thanks,

Mike

[savilak]

Hi Manstis,

use the code below to do it.




1) Extend CellTable.Resources
-----------------------------------------------------------------------------------------------------------
public interface CellTableResource extends CellTable.Resources
{
public interface CellTableStyle extends CellTable.Style {};

@Source({"CellTable.css"})
CellTableStyle cellTableStyle();
};
-----------------------------------------------------------------------------------------------------------

2) Link it with your CellTable.css file that contains all your styling


-----------------------------------------------------------------------------------------------------------
@CHARSET "UTF-8";


@def selectionBorderWidth 0px;
.cellTableWidget {

}

.cellTableFirstColumn {

}

.cellTableLastColumn {

}

.cellTableFooter {
border-top: 2px solid #6f7277;
padding: 3px 15px;
text-align: left;
color: #4b4a4a;
text-shadow: #ddf 1px 1px 0;
}

.cellTableHeader {
/*border-bottom: 2px solid #6f7277;*/
border-top: 1px solid #6f7277;
border-bottom: 1px solid #6f7277;
/*padding: 3px 15px;*/
padding: 3px 6px 3px 6px;
text-align: left;
font-size:14px;
color: #4b4a4a;

/*text-shadow: #ddf 1px 1px 0;*/
}

.cellTableCell {
/* padding: 2px 15px; */
padding: 6px 6px 6px 6px;
}

.cellTableFirstColumnFooter {

}

.cellTableFirstColumnHeader {

}

.cellTableLastColumnFooter {

}

.cellTableLastColumnHeader {

}

.cellTableEvenRow {
background: #ffffff;
}

.cellTableEvenRowCell {
border: selectionBorderWidth solid #ffffff;
}

.cellTableOddRow {
background:#f3f7fb;
}

.cellTableOddRowCell {
border: selectionBorderWidth solid #f3f7fb;
}

.cellTableHoveredRow {
background: #ffffcc;
}

.cellTableHoveredRowCell {
border: selectionBorderWidth solid #eee;
}

.cellTableKeyboardSelectedRow {
/*background: #ffc;*/
}

.cellTableKeyboardSelectedRowCell {
border: selectionBorderWidth solid #ffc;
}

.cellTableSelectedRow {
background: #628cd5;
color: white;
height: auto;
overflow: auto;
}

.cellTableSelectedRowCell {
border: selectionBorderWidth solid #628cd5;
}

/**
* The keyboard selected cell is visible over selection.
*/
.cellTableKeyboardSelectedCell {
border: selectionBorderWidth solid #d7dde8;
}

@sprite .cellTableLoading {
gwt-image: 'cellTableLoading';
margin: 30px;
}

-----------------------------------------------------------------------------------------------------------



I hope this helps...

Regards
Savilak

On Nov 27, 11:52 pm, manstis <michael.ans...@gmail.com> wrote:
> Hi,
>
> I need to override some CellTable CSS definitions.
>
> I've been able to isolate the classes to some named along the lines
> of .GL0PBETBKC, .GL0PBETBEC etc.
>
> The CellTable CSS appears to be injected into my module after my .css
> file and the only way I have been able to override the above styles is
> by using !important in my css file. Firebug shows the CellTable's CSS

> to come fromhttp://127.0.0.1:8888/MyModule.html?gwt.codesvr=127.0.0.1:9997.

[Marcin Misiewicz]

I guess, that you are also passing CellTableResource instance to the
constructor of the CellTable.
Othwerwise you will stiil use the default styles.

[Efstathios Kalyvas]

That is correct, you also need the following:

  CellTableResource resource = GWT.create(CellTableResource.class);

  CellTable<PropertyLight> table = new CellTable<PropertyLight>(10,resource);

as Marcin suggests. 

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[manstis]

Thanks to all; it worked a treat - and the resultant reading has led
me to understand ClientBundles a whole lot more too :)

Everyone's a winner.

On Nov 28, 2:35 pm, Efstathios Kalyvas <savi...@gmail.com> wrote:
> That is correct, you also need the following:
>
>   CellTableResource resource = GWT.create(CellTableResource.class);
>   CellTable<PropertyLight> table = new
> CellTable<PropertyLight>(10,resource);
>
> as Marcin suggests.
>

> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com>
> > .

[mike b]

thanks to everyone who posted comments here.  This has really helped me as well as I had problem styling the CellList.  The same pattern works there as well. 

[Thomas Lefort]

Great Thread. Thanks to the contributors. Makes me wonder if there are
(other than Google) templates available out there for GWT?

[Martones]

Hi all, I dig up this thread to ask a question about the CSS overriding.

My problem is that once I create a celltable with my customised CellTable.Resources, all other CellTables in my application use this style (even though I didnt pass the resource to their constructor). This is because the compiled class names in the CSS are the same in both my custom file and the standard.css. 

Is this how it works, or is there something I can do about it ? I tryed changing my css name from CellTable.css but that didnt change the compiled class names :)

Many thanks !

[Thomas Broyer]

On Thursday, June 21, 2012 9:54:39 AM UTC+2, Martones wrote:

Hi all, I dig up this thread to ask a question about the CSS overriding.

My problem is that once I create a celltable with my customised CellTable.Resources, all other CellTables in my application use this style (even though I didnt pass the resource to their constructor). This is because the compiled class names in the CSS are the same in both my custom file and the standard.css. 

Is this how it works, or is there something I can do about it ? I tryed changing my css name from CellTable.css but that didnt change the compiled class names :)

See http://code.google.com/p/google-web-toolkit/issues/detail?id=6144 

[Martones]

Great thanks alot for a quick answer Thomas :)

Extending CellTable.Style did the trick