Custom Control Embedded CSS

Discussion in 'ASP .Net Building Controls' started by Chuck P, Aug 2, 2007.

  1. Chuck P

    Chuck P Guest

    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,
     
    Chuck P, Aug 2, 2007
    #1
    1. Advertising

  2. 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 (, 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], Aug 2, 2007
    #2
    1. Advertising

  3. Chuck P

    Chuck P Guest

    Chuck P, Aug 2, 2007
    #3
  4. 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 (, 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], Aug 3, 2007
    #4
  5. 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 (, 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], Aug 6, 2007
    #5
  6. Chuck P

    Chuck P Guest

    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\" />");
    }
     
    Chuck P, Aug 6, 2007
    #6
  7. Hi Chuck,

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

    Regards,
    Walter Wang (, 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], Aug 7, 2007
    #7
  8. Chuck P

    Guest

    On Aug 6, 8:18 pm, ("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 (, 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.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.
     
    , Sep 6, 2007
    #8
  9. Chuck P

    Tim Jarvis Guest

    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)]



    "" wrote:

    > On Aug 6, 8:18 pm, ("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 (, 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.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.
    >
    >
     
    Tim Jarvis, Feb 11, 2009
    #9
  10. Chuck P

    Sam Guest

    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.TabPanelControl.skins.blue.tabpanelskin.css", "text/css", PerformSubstitution = true)]
    [assembly:
    WebResourceAttribute("SMS.WebControls.TabPanelControl.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.
     
    Sam, Feb 20, 2009
    #10
  11. Chuck P

    Sam Guest

    Found the answer!! see http://forums.asp.net/p/1234887/2531259.aspx .
    Basically you have to read in the css (open up a stream to the resource,
    etc...). After you do this you have to search through the css yourself and
    do the substitution yourself.

    The post explains it all. Also, transparencies in the images don't work (or
    so they say). I'm ecstatic to try it out, just thought I'd share back here
    since this post became "live" again.
     
    Sam, Feb 20, 2009
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Colin Paul Gloster
    Replies:
    48
    Views:
    1,972
    Colin Paul Gloster
    Apr 10, 2007
  2. Matt Sokol
    Replies:
    2
    Views:
    437
    Theo Tillotson
    Aug 7, 2003
  3. Thomas Ekegren

    Page Load fired 3 times Web user control is embedded in a custom control

    Thomas Ekegren, Sep 3, 2003, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    239
    Thomas Ekegren
    Sep 3, 2003
  4. Thomas Dodds

    Databind an embedded control in an embedded datagrid

    Thomas Dodds, Jul 26, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    431
    Thomas Dodds
    Jul 26, 2004
  5. Trans
    Replies:
    11
    Views:
    336
    micathom
    Sep 5, 2007
Loading...

Share This Page