Possibly.
When I started work on my current project, there were some nasty bits of code. One of them was a banner used on the page. It was decided to replace it with something more in keeping with style of the RadControls and something that was, ideally, skinnable.
I decided to have a bit of a go at cheating. I liked the layout of the title bar of the RadWindow and it fitted our requirements very nicely. So, I recreated the RadWindow title bar from the rendered HTML and came up with my PageBanner control. Clipboard1.gif shows what it looks like (using the Hay skin).
The code looks like this ...
I have to say that I'm rather pleased with it in all but one regard; It looks pants in IE7 and IE8 Compatibility Mode. Clipboard2.gif shows it using the same skin in IE8 Compatibility Mode.
Clearly there is something different about how IE7 works and I've tried to figure out what exactly is going on, but to no avail. I did think that there might be an IE7 hack in the CSS but if there is, I can't find it.
Can anyone offer any suggestions?
--
Stuart
When I started work on my current project, there were some nasty bits of code. One of them was a banner used on the page. It was decided to replace it with something more in keeping with style of the RadControls and something that was, ideally, skinnable.
I decided to have a bit of a go at cheating. I liked the layout of the title bar of the RadWindow and it fitted our requirements very nicely. So, I recreated the RadWindow title bar from the rendered HTML and came up with my PageBanner control. Clipboard1.gif shows what it looks like (using the Hay skin).
The code looks like this ...
<
asp:Panel
ID
=
"Panel1"
runat
=
"server"
CssClass
=
"RadWindow"
>
<
asp:Table
ID
=
"Table1"
runat
=
"server"
Width
=
"100%"
CellPadding
=
"0"
CellSpacing
=
"0"
>
<
asp:TableRow
runat
=
"server"
CssClass
=
"rwTitleRow"
>
<
asp:TableCell
runat
=
"server"
ID
=
"Cell1"
CssClass
=
"rwTitlebar"
Width
=
"10px"
>
</
asp:TableCell
>
<
asp:TableCell
runat
=
"server"
ID
=
"Cell2"
CssClass
=
"rwTitlebar"
>
<
asp:Panel
ID
=
"Panel2"
runat
=
"server"
CssClass
=
"rwTopResize"
>
</
asp:Panel
>
<
asp:Table
ID
=
"Table2"
runat
=
"server"
CssClass
=
"rwTitlebarControls"
CellPadding
=
"0"
CellSpacing
=
"0"
HorizontalAlign
=
"Left"
>
<
asp:TableRow
runat
=
"server"
ID
=
"InnerRow1"
>
<
asp:TableCell
runat
=
"server"
ID
=
"InnerCell1"
Width
=
"16px"
Style
=
"vertical-align: top !important;"
>
<
asp:HyperLink
ID
=
"HyperLink1"
runat
=
"server"
CssClass
=
"rwIcon"
></
asp:HyperLink
>
</
asp:TableCell
>
<
asp:TableCell
runat
=
"server"
VerticalAlign
=
"Bottom"
>
<
asp:Label
ID
=
"UEAPLBannerTitleText"
runat
=
"server"
></
asp:Label
>
</
asp:TableCell
>
<
asp:TableCell
runat
=
"server"
ID
=
"SkinPickerContainer"
Style
=
"width: 40px;"
>
</
asp:TableCell
>
<
asp:TableCell
Style
=
"width: 100px;"
>
<
telerik:RadSkinManager
ID
=
"RadSkinManager1"
runat
=
"server"
OnPreRender
=
"RadSkinManager1_PreRender"
>
</
telerik:RadSkinManager
>
</
asp:TableCell
>
<
asp:TableCell
runat
=
"server"
ID
=
"InnerCell3"
>
<
ul
class
=
"rwControlButtons"
></
ul
>
</
asp:TableCell
>
</
asp:TableRow
>
</
asp:Table
>
</
asp:TableCell
>
<
asp:TableCell
runat
=
"server"
ID
=
"TableCell1"
CssClass
=
"rwTitlebar"
Width
=
"10px"
>
</
asp:TableCell
>
</
asp:TableRow
>
</
asp:Table
>
</
asp:Panel
>
public
partial
class
PageBannerBanner : System.Web.UI.UserControl
{
/// <summary>
///
/// </summary>
/// <remarks></remarks>
string
iconUrl;
/// <summary>
///
/// </summary>
/// <remarks></remarks>
string
message;
/// <summary>
///
/// </summary>
/// <remarks></remarks>
string
skin;
/// <summary>
///
/// </summary>
/// <remarks></remarks>
string
title;
/// <summary>
///
/// </summary>
/// <remarks></remarks>
Unit width;
/// <summary>
/// Gets or sets the icon URL.
/// </summary>
/// <value>The icon URL.</value>
/// <remarks></remarks>
public
string
IconUrl
{
get
{
return
iconUrl;
}
set
{
iconUrl = value;
HyperLink1.Style.Add(HtmlTextWriterStyle.BackgroundImage, Page.ResolveClientUrl(value));
HyperLink1.Style.Add(
"background-position"
,
"0px 0px"
);
}
}
/// <summary>
/// Gets or sets the message.
/// </summary>
/// <value>The message.</value>
/// <remarks></remarks>
public
string
Message
{
get
{
return
message;
}
set
{
message = value;
}
}
/// <summary>
/// Gets or sets the skin.
/// </summary>
/// <value>The skin.</value>
/// <remarks></remarks>
public
string
Skin
{
get
{
return
skin;
}
set
{
skin = value;
Panel1.CssClass = String.Format(
"RadWindow RadWindow_{0} rwNormalWindow rwTransparentWindow"
, value);
}
}
public
RadSkinManager SkinManager
{
get
{
return
RadSkinManager1;
}
}
/// <summary>
/// Gets or sets the title.
/// </summary>
/// <value>The title.</value>
/// <remarks></remarks>
public
string
Title
{
get
{
return
title;
}
set
{
title = value;
}
}
/// <summary>
/// Gets or sets the width.
/// </summary>
/// <value>The width.</value>
/// <remarks></remarks>
public
Unit Width
{
get
{
return
width;
}
set
{
width = value;
Panel1.Width = value;
}
}
bool
allowDefaultSkinOverride
{
get
{
object
o = ViewState[GlobalConstants.ViewState.ALLOWDEFAULTSKINUSEROVERRIDE];
if
(o ==
null
)
{
string
s = System.Configuration.ConfigurationManager.AppSettings[GlobalConstants.Controls.SkinManger.WEBCONFIGKEY];
if
(String.IsNullOrEmpty(s))
{
o =
false
;
}
else
{
o = s.ToLower().StartsWith(
"t"
);
}
ViewState[GlobalConstants.ViewState.ALLOWDEFAULTSKINUSEROVERRIDE] = o;
}
return
(
bool
)o;
}
}
/// <summary>
/// Raises the <see cref="E:Load" /> event.
/// </summary>
/// <param name="e">The <see cref="EventArgs" /> instance containing the event data.</param>
/// <remarks></remarks>
protected
override
void
OnLoad(EventArgs e)
{
if
(!allowDefaultSkinOverride)
{
RadSkinManager1.Skin = GlobalFunctions.GetDefaultSkin();
}
SetSkinChooser(allowDefaultSkinOverride);
base
.OnLoad(e);
}
/// <summary>
/// Raises the <see cref="E:PreRender" /> event.
/// </summary>
/// <param name="e">The <see cref="EventArgs" /> instance containing the event data.</param>
/// <remarks></remarks>
protected
override
void
OnPreRender(EventArgs e)
{
base
.OnPreRender(e);
PageBannerTitleText.Text = String.Format(
"<em>{0} {1}<em>"
, title, message);
LoadLocalSkinStylesheets(RadSkinManager1.Skin);
Panel1.CssClass = String.Format(
"RadWindow RadWindow_{0}"
, RadSkinManager1.Skin);
}
protected
void
RadSkinManager1_PreRender(
object
sender, EventArgs e)
{
if
(RadSkinManager1.ShowChooser)
{
RadComboBox skinChooser = RadSkinManager1.FindControl(
"SkinChooser"
)
as
RadComboBox;
AvailableSkinCollection skins = GlobalFunctions.GetSkins();
int
i = 0;
while
(i < skinChooser.Items.Count)
{
if
(!skins.Contains(skinChooser.Items[i].Text))
{
skinChooser.Items.Remove(skinChooser.Items[i]);
}
i++;
}
foreach
(AvailableSkin skin
in
skins.Where(s => !s.IsEmbedded))
{
skinChooser.Items.Add(
new
RadComboBoxItem(skin.Name));
}
}
}
void
LoadLocalSkinStylesheets(
string
SkinName)
{
string
cssFileName = String.Format(
"~/StyleSheets/Local/Local_{0}.css"
, SkinName);
HtmlLink css =
new
HtmlLink();
css.Href = Page.ResolveUrl(cssFileName);
css.Attributes[
"rel"
] =
"stylesheet"
;
css.Attributes[
"type"
] =
"text/css"
;
css.Attributes[
"media"
] =
"all"
;
Page.Header.Controls.Add(css);
}
void
SetSkinChooser(
bool
Value)
{
SkinPickerContainer.Text = String.Format(
"<em>{0}<em>"
,
"Style:"
);
SkinPickerContainer.Visible = Value;
RadSkinManager1.ShowChooser = Value;
RadSkinManager1.PersistenceMode = RadSkinManager1.ShowChooser ? RadSkinManagerPersistenceMode.Cookie : RadSkinManagerPersistenceMode.Session;
}
}
I have to say that I'm rather pleased with it in all but one regard; It looks pants in IE7 and IE8 Compatibility Mode. Clipboard2.gif shows it using the same skin in IE8 Compatibility Mode.
Clearly there is something different about how IE7 works and I've tried to figure out what exactly is going on, but to no avail. I did think that there might be an IE7 hack in the CSS but if there is, I can't find it.
Can anyone offer any suggestions?
--
Stuart