Hi Guillermo,

You could try to set the UseDefaultStyle to False and then add your own CSS file in the LayoutSettings to make a different style for the WebGrid.

Regards,

Lili Khiung

Hi Lili,

Thanks for your answer, the problem though is a little more detailed than that.

See, I'm setting UserDefaultStyle = true and DefaultStyleMode = Elegant. If it turn the default style completely then I have to build it from scratch... if I use the default I'm somehow covered by whatever style you guys have already in there.

The next step is just overriding whatever default definitions you set for the default styles with our colors... something like this:

.WG5-F {
	border-right: #c0c0c0 1px solid;
	border-top: #c0c0c0 1px solid;
	border-left: #c0c0c0 1px solid;
	border-bottom: #c0c0c0 1px solid;
	background-color: #525D8C;
	text-align: left;
}
.WG5-SBC-A {
	border-right: white 1px solid;
	border-top: white 1px solid;
	font-size: 12px;     /* GENOA - overridden */
	border-left: white 1px solid;
	border-bottom: white 1px solid;
	font-family: arial;
	color: white;
	background-color: #3e4464;
}
.WG5-SBC-O {
	border-right: white 1px solid;
	border-top: white 1px solid;
	font-size: 12px;     /* GENOA - overridden */
	border-left: white 1px solid;
	border-bottom: white 1px solid;
	font-family: arial;
	background-color: #3e4464;
	color: white;
}
.WG5-SBC-N {
	padding-right: 1px;
	padding-left: 1px;
	font-size: 11px;
	padding-bottom: 1px;
	padding-top: 1px;
	font-family: arial;
	background-color: #3e4464;
	color: white;
}
.WG5-GBB {
	background-color: #f4f4f4;
	text-align: left;
}
.WG5-GBBL {
	border-right: white 1px solid;
	border-top: white 1px solid;
	font-weight: normal;
	font-size: 11px;
	border-left: white 1px solid;
	border-bottom: white 1px solid;
	color: #1e2a63;
	text-align: left;
    font-family: arial;    
	background-color: #ced1e1;
}

... More

My problem is... I don't know what exactly were those styles originaly, this is something I built using the IE Dev toolbar. And it works... for most of the cases, when the layouts get more complex it gets tricky because padding and borders don't always match.

So... my question is again, would it be possible to get a copy of your css file for the Elegant style to know exactly what I can modify and what I can't?

Hi Guillermo,

There's a way to modify the Elegant CSS file:

- First run the project. In IE, press F12 to show the Developer Tool window.

- Choose the CSS tab, then pick the dropdown list that you can find the style like the above, such as WG5-F, etc.

- Save the style and add the style to your project

- You have to define the style in your ASPX page on the property that you change. See the attach screenshot and sample.

- In the sample I changed the style for WG5-F, which is the property of FrameStyle in the LayoutSettings. Notice that I add this code in the LayoutSettings property.

<FrameStyle CssClass="WG5-F">
</FrameStyle>

This way you can see the result that the frame of the WebGrid will change to red.

Regarding the name of the CSS Class, usually we name it according to the property name in the LayoutSettings. For example:

WG5-F : FrameStyle
WG5-SBC-A : ScrollBarCommandStyle => Active
WG5-SBC-N : ScrollBarCommandStyle => Normal
WG5-SBC-O : ScrollBarCommandStyle => Over
WG5-GBB: GroupByBoxStyle
WG5-GBBL: GroupByBox => LabelStyle

Hope it helps.

Regards,

Lili Khiung