Intersoft Community - WebGrid Enterprise - CSS styles in webgrid

CSS styles in webgrid

lili — Fri, 06 May 2011 04:09:30 GMT

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

CSS styles in webgrid

Gmontes — Thu, 05 May 2011 10:24:07 GMT

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?

CSS styles in webgrid

lili — Thu, 05 May 2011 02:00:55 GMT

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

CSS styles in webgrid

Gmontes — Wed, 04 May 2011 11:11:15 GMT

Would it be possible to get a full definition any ANY css style to override? It's much simpler to just add a css files that rewrites a native definition that webgrid uses, than going behind scenes wiring custom styles to specific grid needs that don't always fit.

I've reversed engineered some of them but when it comes to borders and padding it gets tricky. I think you know what I mean: What would the official definition for the WG5-F, WG5-AR, W5G-RH (and so on) be for say... the Elegant style (Black or Standard or any other for that matter)?

That would be make customization much simpler.