Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   ASP .Net Building Controls (http://www.velocityreviews.com/forums/f59-asp-net-building-controls.html)
-   -   Custom Control Embedded CSS (http://www.velocityreviews.com/forums/t758856-custom-control-embedded-css.html)

Chuck P 08-02-2007 04:40 AM

Custom Control Embedded CSS
 
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?

thanks,

Walter Wang [MSFT] 08-02-2007 09:59 AM

RE: Custom Control Embedded CSS
 
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.


Chuck P 08-02-2007 02:30 PM

RE: Custom Control Embedded CSS
 
I guess OnPreRender doesn't fire in design mode.

http://www.manuelabadia.com/blog/Per...2861548f6.aspx


Walter Wang [MSFT] 08-03-2007 07:23 AM

RE: Custom Control Embedded CSS
 
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.


Walter Wang [MSFT] 08-06-2007 09:11 AM

RE: Custom Control Embedded CSS
 
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.


Chuck P 08-06-2007 02:36 PM

RE: Custom Control Embedded CSS
 
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\" />");
}



Walter Wang [MSFT] 08-07-2007 02:18 AM

RE: Custom Control Embedded CSS
 
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.


samuel.m.smith@gmail.com 09-06-2007 03:52 AM

Re: Custom Control Embedded CSS
 
On Aug 6, 8:18 pm, waw...@online.microsoft.com ("Walter Wang [MSFT]")
wrote:
> Hi Chuck,
>
> Thanks for sharing your solution here. I think it's better than having to
> write a custom control designer.
>
> Regards,
> Walter Wang (waw...@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.



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.norma l_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.


Tim Jarvis 02-11-2009 11:57 AM

Re: Custom Control Embedded CSS
 
I know this is an old post but I had the same problem and found a soltuion

You need to add an attribute to the end of the declaration of the CSS
resource.

[assembly: WebResource("Resources.CSS.stylesheet.css", "text/css",
PerformSubstitution = true)]



"samuel.m.smith@gmail.com" wrote:

> On Aug 6, 8:18 pm, waw...@online.microsoft.com ("Walter Wang [MSFT]")
> wrote:
> > Hi Chuck,
> >
> > Thanks for sharing your solution here. I think it's better than having to
> > write a custom control designer.
> >
> > Regards,
> > Walter Wang (waw...@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.

>
>
> 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.norma l_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.
>
>


Sam 02-20-2009 03:04 AM

Re: Custom Control Embedded CSS
 
Tim,

I appreciate the reply. That was quite a while ago. I'm actually still
trying to figure this out (recently started working on an old project).

My previous code had

[assembly:
WebResourceAttribute("SMS.WebControls.TabPanelCont rol.skins.blue.tabpanelskin.css", "text/css", PerformSubstitution = true)]
[assembly:
WebResourceAttribute("SMS.WebControls.TabPanelCont rol.skins.blue.normal_centerArea.gif", "image/gif")]

So it had the PerformSubstitution = true part like you had mentioned.
Inside my css I have a class that looks like:

..tabpanel .bar .tab .center_area
{
background-image: url('<%=
WebResource("SMS.WebControls.TabPanelControl.skins .blue.normal_centerArea.gif") %>');
background-repeat: repeat-x;
padding: 3px 9px;
width: auto;
}

The part thats interesting is that this code displays fine in the browser
(background-image using that css class is correctly change at runtime).
However, if you view this control in the designer then the background-image
will not appear.

At first you might think it wouldn't appear because the css wasn't loaded.
This isn't true, however, since other styles from the css are present (and I
include the <link> tag like the previous posts talk about).

So.. ya, stuck.


All times are GMT. The time now is 01:19 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.