Re: How to override CellTable css

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.
>
> 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

--
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-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.