I have an issue where the CSS universal selector is overriding settings in a theme skin & css files. My understanding is that the universal selector applies to everything except where specifically overridden. I am trying to get GridView header text color=White.
The universal selector has color=black.
Here's the layout:
Master page includes a link to a css file containing * { color: black; font-size: 11px; }
Default page with GridView uses theme 'Standard', and contains a reference to the Master page.
App_Themes/Standard contains GridView.skin with a generic <asp:GridView> definition, including HeaderStyle-CssClass="table_title".
Obviously I don't understand the precedence here. Even though I have the color & font sizes defined in the Grid's css, they are not being applied. If I comment out the universal selector, they are applied. Can someone help me here? Thanks in advance!
The real trouble with themes and css is that you have no control over the ordering of the css files, therefore precedence becomes tricky when you have multiple files. Personally, if you've only got a single theme, it's almost better to move the css out of
the theme and load it manually.
For working out the precedence you can use the IE Developer Tools (just press F12 in IE), or FireBug in FireFox, or both Chrome and Opera have built in tools to view the DOM and CSS. I prefer Firebug.
I appreciate your willingness to look at this issue. I've stripped the project to the bare essentials. As a demo, it displays a grid using data from a SQLite database. Here is a link to the entire solution (compressed into .zip) from our ShareFile location: https://timecentre.sharefile.com/d/sc232e318b914547b
The root of the file contains the solution folder, so can be unzipped in your Projects folder or wherever else you want. It is a VS2005 solution but should still work in VS2008 or VS2010. As mentioned above, I use theme 'Standard' which includes definitions
for a generic GridView control (used on the default page). Part of the theme uses CSS classes, but the grid doesn't seem to use them. The universal selector in the css\newModel.css is overriding everything, it seems. If I delete it, the grid looks fine, but
then the other elements on the page (labels and a button) lose these universal properties (color, for instance).
Thanks for the tips. I have supplied a link to the project if you want to take a look at it (in reply to Catherine in this thread). The project has only one theme, so I will look into moving the css out of the theme. I'm not very strong in css/themes so
I need to research how to do it: I don't know how to convert GridView skin properties into the equivalent css code. Here's the contents of the GridView.skin file in the theme folder:
It's using two CSS classes to define GridView properties. Any suggestions on how to convert this to its CSS equivalent (or how to fix the CSS precedence issue) are appreciated!
OK, this is officially weird; other properties override but not the color. Frankly I'd have been lost with this one, but a bit of googling came up with http://stackoverflow.com/questions/2649196/how-to-override-universal-selector-font-size-in-ie6, which
works. So just change the selector in table.css from
.table_title {
to
.table_title * {
Yeah, freaky. No idea why that works, but it does.
Edit: Eric Meyer's
post on universal selectors is a worthwhile read. Essentially the universal selector is outside of the inheritance chain, which explains why the standard rule doesn't work.
It worked here too. I don't know enough about this stuff to know why. I inherited this project. Any books you recommend on learning CSS, page design, and moving forward to the new HTML version? I've seen comments that using the universal selector is a bad
idea - is that so?
gmorris
Member
31 Points
23 Posts
Overriding CSS universal selector in skin pointing to another CSS
Apr 17, 2012 05:05 PM|LINK
I have an issue where the CSS universal selector is overriding settings in a theme skin & css files. My understanding is that the universal selector applies to everything except where specifically overridden. I am trying to get GridView header text color=White. The universal selector has color=black.
Here's the layout:
Master page includes a link to a css file containing * { color: black; font-size: 11px; }
Default page with GridView uses theme 'Standard', and contains a reference to the Master page.
App_Themes/Standard contains GridView.skin with a generic <asp:GridView> definition, including HeaderStyle-CssClass="table_title".
App_Themes/Standard contains Table.css containing:
.table_title {
FONT: bold 14px Tahoma, Verdana;
COLOR:White;
BACKGROUND-COLOR: #7898A8;
height:30px;
PADDING-LEFT: 5px;
PADDING-RIGHT:5px;
}
.table_title A {COLOR:White;}
Obviously I don't understand the precedence here. Even though I have the color & font sizes defined in the Grid's css, they are not being applied. If I comment out the universal selector, they are applied. Can someone help me here? Thanks in advance!
robwscott
Star
8079 Points
1491 Posts
Re: Overriding CSS universal selector in skin pointing to another CSS
Apr 17, 2012 05:17 PM|LINK
throw "!important"
.table_title { FONT: bold 14px Tahoma, Verdana !important; COLOR:White !important; BACKGROUND-COLOR: #7898A8; height:30px; PADDING-LEFT: 5px; PADDING-RIGHT:5px; } .table_title A { COLOR:White !important; }Mark Answered if it helps - Good luck!
Cheers!
Design And Align
- Rob
gmorris
Member
31 Points
23 Posts
Re: Overriding CSS universal selector in skin pointing to another CSS
Apr 17, 2012 07:17 PM|LINK
!important had no effect. I am testing with IE8.
robwscott
Star
8079 Points
1491 Posts
Re: Overriding CSS universal selector in skin pointing to another CSS
Apr 17, 2012 07:26 PM|LINK
why use themes. just throw the css in a file and ref it in the masterpage
Mark Answered if it helps - Good luck!
Cheers!
Design And Align
- Rob
Catherine Sh...
All-Star
23382 Points
2490 Posts
Microsoft
Re: Overriding CSS universal selector in skin pointing to another CSS
Apr 19, 2012 06:27 AM|LINK
Hi gmorris,
Could you simply your project and upload it to skydrive? Then give a link. I want to test it locally.
Best wishes,
Feedback to us
Develop and promote your apps in Windows Store
Dave Sussman
All-Star
37716 Points
5005 Posts
ASPInsiders
MVP
Re: Overriding CSS universal selector in skin pointing to another CSS
Apr 19, 2012 07:59 AM|LINK
The real trouble with themes and css is that you have no control over the ordering of the css files, therefore precedence becomes tricky when you have multiple files. Personally, if you've only got a single theme, it's almost better to move the css out of the theme and load it manually.
For working out the precedence you can use the IE Developer Tools (just press F12 in IE), or FireBug in FireFox, or both Chrome and Opera have built in tools to view the DOM and CSS. I prefer Firebug.
gmorris
Member
31 Points
23 Posts
Re: Overriding CSS universal selector in skin pointing to another CSS
Apr 19, 2012 05:18 PM|LINK
Hi Catherine,
I appreciate your willingness to look at this issue. I've stripped the project to the bare essentials. As a demo, it displays a grid using data from a SQLite database. Here is a link to the entire solution (compressed into .zip) from our ShareFile location: https://timecentre.sharefile.com/d/sc232e318b914547b
The root of the file contains the solution folder, so can be unzipped in your Projects folder or wherever else you want. It is a VS2005 solution but should still work in VS2008 or VS2010. As mentioned above, I use theme 'Standard' which includes definitions for a generic GridView control (used on the default page). Part of the theme uses CSS classes, but the grid doesn't seem to use them. The universal selector in the css\newModel.css is overriding everything, it seems. If I delete it, the grid looks fine, but then the other elements on the page (labels and a button) lose these universal properties (color, for instance).
Thanks
gmorris
Member
31 Points
23 Posts
Re: Overriding CSS universal selector in skin pointing to another CSS
Apr 19, 2012 05:26 PM|LINK
Dave,
Thanks for the tips. I have supplied a link to the project if you want to take a look at it (in reply to Catherine in this thread). The project has only one theme, so I will look into moving the css out of the theme. I'm not very strong in css/themes so I need to research how to do it: I don't know how to convert GridView skin properties into the equivalent css code. Here's the contents of the GridView.skin file in the theme folder:
<asp:GridView runat="server" AutoGenerateColumns="false" HeaderStyle-CssClass="table_title" CssClass="table-box" HeaderStyle-HorizontalAlign="Center" ShowFooter="false" cellspacing="1" border="0" AllowSorting="True" RowStyle-HorizontalAlign="Center" RowStyle-Height="28px" > <RowStyle CssClass="row" /> </asp:GridView>It's using two CSS classes to define GridView properties. Any suggestions on how to convert this to its CSS equivalent (or how to fix the CSS precedence issue) are appreciated!
Greg
Dave Sussman
All-Star
37716 Points
5005 Posts
ASPInsiders
MVP
Re: Overriding CSS universal selector in skin pointing to another CSS
Apr 20, 2012 07:26 AM|LINK
OK, this is officially weird; other properties override but not the color. Frankly I'd have been lost with this one, but a bit of googling came up with http://stackoverflow.com/questions/2649196/how-to-override-universal-selector-font-size-in-ie6, which works. So just change the selector in table.css from
.table_title {
to
.table_title * {
Yeah, freaky. No idea why that works, but it does.
Edit: Eric Meyer's post on universal selectors is a worthwhile read. Essentially the universal selector is outside of the inheritance chain, which explains why the standard rule doesn't work.
gmorris
Member
31 Points
23 Posts
Re: Overriding CSS universal selector in skin pointing to another CSS
Apr 20, 2012 11:13 PM|LINK
Dave,
It worked here too. I don't know enough about this stuff to know why. I inherited this project. Any books you recommend on learning CSS, page design, and moving forward to the new HTML version? I've seen comments that using the universal selector is a bad idea - is that so?
Thanks,
Greg