all groups > asp.net building controls > august 2007 >
You're in the

asp.net building controls

group:

Custom Control Embedded CSS


Custom Control Embedded CSS Chuck P
8/1/2007 9:40:01 PM
asp.net building controls:
I have a control that has an embedded CSS file.
I override the OnPreRender event and put in the following code:

HtmlLink cssLink = new HtmlLink();
..... get the resource, create the link
Page.Header.Controls.Add(cssLink);
base.OnPreRender(e);

This works fine at runtime.
However at design time the CSS does not get applied.

Whats the best way to get the CSS applied at design time?

RE: Custom Control Embedded CSS Chuck P
8/2/2007 7:30:02 AM
I guess OnPreRender doesn't fire in design mode.

http://www.manuelabadia.com/blog/PermaLink,guid,8cdc7001-bca7-4ea6-a3f8-0fb2861548f6.aspx
RE: Custom Control Embedded CSS wawang NO[at]SPAM online.microsoft.com (
8/2/2007 9:59:23 AM
Hi Chuck,

This is a quick note to let you know that I am performing research on this
issue and will get back to you as soon as possible. I appreciate your
patience.


Regards,
Walter Wang (wawang@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.
RE: Custom Control Embedded CSS wawang NO[at]SPAM online.microsoft.com (
8/3/2007 12:00:00 AM
Hi Chuck,

Yes my test also verified that OnPreRender is not called in design-time.
I'm also tried other approaches but still no luck, I'm currently consulting
this question within our internal discussion list. I'll keep you posted.
Thank you for your patience.

Regards,
Walter Wang (wawang@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.
RE: Custom Control Embedded CSS wawang NO[at]SPAM online.microsoft.com (
8/6/2007 12:00:00 AM
Hi Chuck,

It seems we will have to use a custom control designer to make the
stylesheet work at design-time, and we must use inline style instead:

public override string GetDesignTimeHtml()
{
return "<style> .highlight {background-color: yellow} </style>"
+ base.GetDesignTimeHtml();
}

This is not very elegant but so far this seems the only way to make the
stylesheet works at design-time.

Regards,
Walter Wang (wawang@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.
RE: Custom Control Embedded CSS Chuck P
8/6/2007 7:36:00 AM
Thanks Walter,
I wasn't aware of that event.
I did something similar with checking for Design mode in the render event
and putting in a link to an embedded style sheet.

private string GetCssLink()
{
string strFooterCssLocation = CssLocation; //empty unless user
overrides location from the embedded style sheet

if (string.IsNullOrEmpty(strFooterCssLocation))
strFooterCssLocation =
Page.ClientScript.GetWebResourceUrl(this.GetType(),
@"Util_Controls.LanlFooter.css");

return strFooterCssLocation;
}


protected override void RenderContents(HtmlTextWriter output)
{
if (DesignMode)
{ //at runtime PreRender is fired and we put the link in the head
output.Write(" <link href=\"" + GetCssLink() + "\"
rel=\"stylesheet\" type=\"text/css\" />");
}

RE: Custom Control Embedded CSS wawang NO[at]SPAM online.microsoft.com (
8/7/2007 2:18:20 AM
Hi Chuck,

Thanks for sharing your solution here. I think it's better than having to
write a custom control designer.

Regards,
Walter Wang (wawang@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.
Re: Custom Control Embedded CSS
9/5/2007 8:52:05 PM
On Aug 6, 8:18 pm, waw...@online.microsoft.com ("Walter Wang [MSFT]")
[quoted text, click to view]


I also overcame the problem you guys are describing by including a
link tag for the designer in the RenderContent method. However, I
still have a problem where my background images in the css aren't
appearing (even though the other styles are working). I'm starting to
think that the server tags in it aren't working even though I have the
meta tag PerformSubstitution = true. The control renders Great in the
browser but crappy in the designer. An example of my css is

..tabpanel .bar .tab .center_area
{
background-image: url('<%=
WebResource("SMS.TabPanelControl.skins.vista.normal_centerArea.gif")
%>');
background-repeat: repeat-x;
padding: 0px 6px;
width: auto;
white-space: nowrap;
border: 1px solid #898C95;
}

I'm not quite sure what might be causing the problem. I'm adding the
style sheet right now in the RenderControl method where I have a
statement like

if (DesignMode)
{
writer.Write("<link href=\"" + GetSkinUrl() +
"\" rel=\"stylesheet\" type=\"text/css\" />");
}


I can see several of the styles applied in the designer but not any of
the background images. Just to see if the images would load at all I
appended one of the background images in the RenderContent method for
the designer and it appeared. This is the same background-image that
doesn't appear from the css. I then changed the style attributes of a
div I am using and manually set the background-image there and it
appeared. So, I don't get it. The background-images all appear and
work great in the browser but it looks like crap (since the background-
images don't appear) in vs2005 designer. Anybody have any ideas? I
somehow wonder if the tags that should be interpreted in the css
aren't being interpreted in the designer even though I have a meta tag
with the PerformSubstitution = true for interpreting it.

Any ideas would be much appreciated. I've searched many forums about
the issue and haven't seen anyone write a solution.
AddThis Social Bookmark Button