Home > Posts > ASP.net WebPartZone skins and CSS

ASP.net WebPartZone skins and CSS

I was just examining a MonoX portal skin that our designer is authoring for the ClipFlair platform and noticed that in the Default.skin file, there’s a note pointing to http://support.microsoft.com/kb/911717 that speaks of an issue with Microsoft’s implementation of WebPartZone skins:

There it says:

The CssClass property does not affect the following style objects:

•The MenuLabelHoverStyle property
•The MenuPopupStyle property
•The MenuVerbHoverStyle property
•The MenuVerbStyle property
•The MenuCheckImageStyle property

Do not use the following line of code:

<MenuPopupStyle CssClass="wp_menupopup" />

while having a Stylesheet.css file with the following code:

.wp_menupopup
{
  background-color:Red  
}

Instead, use the following line of code:

<MenuPopupStyle backcolor="red" />

In short, at the Default.skin file one can give a CssClass and then define the styles at Stylesheet.css, but for MenuPopupStyle, MenuVerbHoverStyle, MenuVerbStyle and MenuCheckImageStyle this doesn’t work and you have to enter the object properties that correspond to the CSS attributes you want (e.g. background property of ASP.net for the background-color CSS attribute) directly into the Default.skin file for the respective objects.

BTW, the aformentioned Microsoft article speaks of Stylesheet.css, while MonoX template uses Default.css. This is because the ASP.net theming engine applies all .css files it finds in the theme folder (independent of filename), as explained at http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx. That last Microsoft article has lots of useful information regarding Themes and how you can (optionally) combine them with CSS and on issues like scoping, precedence, security etc.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: