+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / Dynamic template or css id application

Dynamic template or css id application

23 posts, 0 answered
  1. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    24 Jul 2008
    Link to this post
    Is there a way to have the template recognize what section of the site you are in?

    For instance, lets say my page has 3 main categories:  Products, Services, About Us.  What I want to do is make the Products section have a red navigation, the Services page have a Blue navigation, and the About Us page have a green navigation.  Assume that each section has 30-40 pages under it.  So, there might be 40 product pages that need a red nav, and 30 Services pages that need a blue nav.

    Otherwise the layout of the site is the same.

    If there were a way to ID or CLASS the body tag:

    1 <body class="services"

    Then I could make styles in the external CSS that did the coloring for me instead of having to manually select from three different templates.

    Is this possible?  Is there a code snippit that I can put into Default.master that would do this for me?  Or alternately if there were 3 different Templates, is there a way to dynamically apply them to each section?

    Thanks for your time and help!

    d a n f i n n e y
    Dan Finney Design, Inc.
    - - - - - - - - - - - - - - - - - - -
    Indianapolis Web Development
    sitefinity@danfinney.com
    317-816-9353
  2. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    29 Jul 2008
    Link to this post
    Hello Dan,

    Your request can be implemented using ASP.NET Themes and Skins or by placing the this code in your master page code behind:
    protected void Page_Load(object sender, EventArgs e) 
        if (Page.GetType().Name == "Welcome_aspx"
        { 
            //do something with your controls that have RUNAT="SERVER" attribute 
        } 
     

    In this example, we are checking if the page is named Welcome.aspx. Please, note that the underscore is replacing the dot character.

    Don't hesitate to contact us if you have other questions.

    Best wishes,
    Georgi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    01 Aug 2008
    Link to this post
    This is good info to have for reference, but it would require a manual edit of the stylesheet to add the class name for any newly created pages. (thus defeating the purpose)  I posted the same question to support and got an answer that would work for the category, not just the page name.  If anyone is interested I will post it here for others to reap the benefits.
  4. Frank
    Frank avatar
    25 posts
    Registered:
    14 Jul 2008
    19 Aug 2008
    Link to this post
    I am trying to use the code snippet above in my masteer page but for some reason it affects the every page in the site, not just the page I want.
  5. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    20 Aug 2008
    Link to this post
    Hello Frank,

    Did you apply this master page to all your pages? Once you put something in your master page, every page that uses it (also called template in Sitefinity) will also inherit the settings from it. Please refer to the following article to understand more about the masterpages - ASP.NET Master Pages Overview.

    Kind regards,
    Georgi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Frank
    Frank avatar
    25 posts
    Registered:
    14 Jul 2008
    20 Aug 2008
    Link to this post
    I figured out what I did wrong. It ws just a silly error.
  7. Nitesh Rastogi
    Nitesh Rastogi avatar
    15 posts
    Registered:
    24 Aug 2009
    24 Aug 2009
    Link to this post

    Hi Dan,

    I am also trying to implement the same but am not successful,can you please post what ever info you got from the support .

     

    Thanks in advance.

  8. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    24 Aug 2009
    Link to this post
    Nitesh

    I ended up creating a Template for each different category and applying them manually to each section because I was pressed for time. After I did that, I received this from support.  I have not tested it so let me know if it works for you.

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

    Hi Dan,

    Thank you for your interest in Sitefinity.

    The solution I can propose is to apply this logic in the master page (or master pages) which are used by the pages in those three levels (Products, Services, About Us) as well as the pages beneath them. Therefore, you would have to make the body tag "server-available" by adding the runat="server" and id attributes to it.

    Furthermore, in the code you should check whether the current page is the Products, Services or AboutUs and if not start iterating recursively through all its parents until you find the one needed or the parent becomes null. The code bellow can shed more light on the logic:

    <script runat="server">   
           
        protected void Page_Load(object sender, EventArgs e)   
        {   
            Telerik.Cms.Web.ICmsUrlContext urlContext = Telerik.Cms.Web.CmsUrlContext.Current;   
            if (urlContext != null)   
            {   
                Telerik.Cms.CmsManager manager = new Telerik.Cms.CmsManager();   
                Telerik.Cms.IPage page = manager.GetPage(urlContext.PageID);   
                if (page.Name != "Products" && page.Name != "Services" && page.Name != "AboutUs")   
                {   
                    while (urlContext.Parent != null)   
                    {   
                        urlContexturlContexturlContext = urlContext.Parent;   
                        page = manager.GetPage(urlContext.PageID);   
                        if (page.Name == "Products" || page.Name == "Services" || page.Name == "AboutUs")   
                            break;   
                    }   
                }   
      
                switch (page.Name)   
                {   
                    case "Products":   
                        this.SetBodyClass("products");   
                        break;   
                    case "Services":   
                        this.SetBodyClass("services");   
                        break;   
                    case "AboutUs":   
                        this.SetBodyClass("aboutus");   
                        break;   
                }   
            }   
        }   
      
        private void SetBodyClass(string className)   
        {   
            HtmlGenericControl body = FindControl("myBody") as HtmlGenericControl;   
            if (body != null)   
                body.Attributes.Add("class", className);   
        }   
           
    </script>  
      
    <body runat="server" id="myBody">  


    Hope this helps. Let me know if there is something I am missing or for any misunderstanding concerning the implementation.

    Best regards,
    Vassil Daskalov
    the Telerik team
  9. LizzyM
    LizzyM avatar
    14 posts
    Registered:
    05 Oct 2009
    08 Oct 2009
    Link to this post
    Hello,

    I got an error:

     CS0103: The name 'urlContexturlContexturlContext' does not exist in the current context

    do you know if there was an error in the code posted previously?

    sorry, but I'm quite new at asp.net.

    thanks.
  10. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    08 Oct 2009
    Link to this post
    Hello LizzyM,

    Thank you for using our services.

    It seems that the code coloring tool just copied two times the variable name. Try the script like this:
    protected void Page_Load(object sender, EventArgs e)
    {
       Telerik.Cms.Web.ICmsUrlContext urlContext = Telerik.Cms.Web.CmsUrlContext.Current;
       if (urlContext != null)
       {
         Telerik.Cms.CmsManager manager = new Telerik.Cms.CmsManager();
         Telerik.Cms.IPage page = manager.GetPage(urlContext.PageID);
         if (page.Name != "Products" && page.Name != "Services" && page.Name != "AboutUs")
         {
            while (urlContext.Parent != null)
            {
              urlContext = urlContext.Parent;
              page = manager.GetPage(urlContext.PageID);
              if (page.Name == "Products" || page.Name == "Services" || page.Name == "AboutUs")
              break;
             }
          }
          switch (page.Name)
          {
              case "Products":
                        this.SetBodyClass("products");
                        break;
              case "Services":
                        this.SetBodyClass("services");
                        break;
              case "AboutUs":
                        this.SetBodyClass("aboutus");
                        break;
           }
         }
    }
     
    private void SetBodyClass(string className)
    {
       HtmlGenericControl body = FindControl("myBody") as HtmlGenericControl;
       if (body != null)
       body.Attributes.Add("class", className);
    }



    Best wishes,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. LizzyM
    LizzyM avatar
    14 posts
    Registered:
    05 Oct 2009
    08 Oct 2009
    Link to this post
    Thank you Radoslav,

    This time, no error messages. However, when I view the source on the page, I see <body id="ctl00_myBody">
    but no classes have been applied to them.

    Am I missing a trick? Any clues as to why this could be?

    thanks again!

    Liz
  12. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    08 Oct 2009
    Link to this post
    Hello LizzyM,

    This works, but the tricky part is the page name. I have a page called default.aspx, so i have just modified this to look for a page called default and to apply a class default to it. It works OK, see attached images.

    Greetings,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  13. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    08 Oct 2009
    Link to this post
    For the record, I never got this to work either.  I ended up making a different Master Page for each category and in each master page I added something like "body id="services" or "body id="products."


    d a n f i n n e y
    Dan Finney Design, Inc.
    - - - - - - - - - - - - - - - - - - -
    Indianapolis Web Design
    sitefinity@danfinney.com
    317-816-9353
  14. LizzyM
    LizzyM avatar
    14 posts
    Registered:
    05 Oct 2009
    08 Oct 2009
    Link to this post
    Hello again!

    Thanks very much for clearing that up, I made the silly mistake of not checking for case sensitive names.

    As you can see, it's working great now. (picture1.png)

    Dan,

    If you paste the new code in the previous post in your masterpage just above the body tag, it should work a treat.
    (That's from a non-developer too) ;-)

    Although, saying that, there are limitations. The main thing is that you need to modify the masterpage every time you want to add a new class. This could be difficult when handing the pages over to a client or when a new user comes on board. But at least it's easier than maintaining several masterpages at once.

    Perhaps a keen developer could make a control out of this, or even make it an option in the page preferences.
    eg. Body class = classname.

    thanks again Radoslav.

    liz

  15. LizzyM
    LizzyM avatar
    14 posts
    Registered:
    05 Oct 2009
    09 Nov 2009
    Link to this post
    Hello again,

    I was wondering if there was going to be any future development on this topic?
    ====
    As Dan posted :

    If there were a way to ID or CLASS the body tag:

    1 <body class="services"

    Then I could make styles in the external CSS that did the coloring for me instead of having to manually select from three different templates.
    ====
    Now, I got the script fix to work on my masterpage, however as the client is now asking for a lot more flexibility, it would be miles better to be able to add a 'body class' in the properties tab of the page instead of writing code each time to the masterpage. (There are now 30 or so pages and subpages to manage, and this is getting rather clumsy).

    :-(

    Any thoughts?

    kind regards,
    Liz



  16. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    09 Nov 2009
    Link to this post
    Hi LizzyM,

    Thank you for getting back to us. Well this is possible too, however it would require some custom implementation to extend the pages meta data. You can extend it to store an additional property and then be able to add some logic on page load to get that meta data value and assign it to the body class. One of our partners - Habañero Consulting Group have a blog post on how to extend page meta data. You can take a look at the blog post here.

    Greetings,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  17. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    09 Nov 2009
    Link to this post
    LizzyM,

    The way I have been handling the "clumsiness" factor is to create very basic masterpages/templates.  I make insertable areas for all major elements of the page (Navigation, Footer, etc) then I use shared Generic Content items (for the footer say).  For instance lets say I have 10 different masterpages with something like:

    <body id="service-one" class="servicepage"

    Then I build 10 templates using the shared Generic Content footer in each of them.  Later when I need to make a footer change, I am able to change just the one Generic Content item to update the whole site.


    d a n f i n n e y
    Dan Finney Design, Inc.
    - - - - - - - - - - - - - - - - - - -
    Indiana Web Design
    sitefinity@danfinney.com
    317-816-9353
  18. LizzyM
    LizzyM avatar
    14 posts
    Registered:
    05 Oct 2009
    09 Nov 2009
    Link to this post
    Hi Dan

    I'm very grateful for your reply, and I think I will have to try that... unfortunately, the client is asking for about 30 different header images (which is why i'm trying make this work).

    Your solution is much more viable for a non-developer like myself.

    Rad, unfortunately the blog you sent a link to, lost me after about a paragraph ;-)

    but I thank you anyway!

    liz
  19. danfinney
    danfinney avatar
    51 posts
    Registered:
    09 Jul 2008
    09 Nov 2009
    Link to this post
    Liz,

    Personally, I think Telerik should hire us as consultants to expand their reach from programming geeks to design geeks as well.  =)
  20. LizzyM
    LizzyM avatar
    14 posts
    Registered:
    05 Oct 2009
    09 Nov 2009
    Link to this post
    Dan,
    What's that? Another design geek!? I'm relieved and pleased to meet you.
    Yes I completely agree with you, I think a lot of 'design geeks' are asked to make 'templates' for clients who purchased Sitefinity. Needless to say, it is a big learning curve compared to other cms' I've used in the past.

    cheers
    liz


  21. LizzyM
    LizzyM avatar
    14 posts
    Registered:
    05 Oct 2009
    10 Nov 2009
    Link to this post


    <
    script runat="server">    
    protected void Page_Load(object sender, EventArgs e) 
        Telerik.Cms.Web.ICmsUrlContext urlContext = Telerik.Cms.Web.CmsUrlContext.Current; 
        Telerik.Cms.CmsManager manager = new Telerik.Cms.CmsManager(); 
        Telerik.Cms.IPage page = manager.GetPage(urlContext.PageID); 
        this.SetBodyClass(page.Name); 
     
     
    private void SetBodyClass(string className) 
        HtmlGenericControl body = FindControl("myBody") as HtmlGenericControl; 
        if (body != null) 
            body.Attributes.Add("class", className); 
         
    </script>   
     

    Hello All

    I thought I would share the above code as a solution to my nagging problem with page Classes.

    A developer mate of mine, much cleverer than myself resolved this for me, and if you paste it into the head of your masterpage, it will assign a class to the body tag which matches the 'name' of page.

    ie contact-us.aspx = <body class="contact-us">

    this will then allow you to target this page in your css like so:

    body.contact-us    #headerBg { background-image:url(images/headers/04.jpg); }

    this should save you from having to either constantly modify the masterpage or have to make multiple masterpages.

    cheers
    liz

  22. Michael McGovern
    Michael McGovern avatar
    11 posts
    Registered:
    18 Oct 2009
    24 Nov 2009
    Link to this post
    Thanks for that Liz, you gave me the extra code I needed. Im converting my site which used similar code but with a physical sitemap. The only problem with your solution that I found was that you can no longer edit the tempate (I assume you were adding your code to the master) without commenting it out due to the "object reference not set to an instance of an object" error.
    I wanted to add to yours just a bit and share it. The only real difference is I am checking to make sure a page exists first.

    protected void Page_Load(object sender, EventArgs e)  
        {  
            if (Telerik.Cms.Web.CmsUrlContext.Current != null)  
            {  
                Telerik.Cms.Web.ICmsUrlContext urlContext = Telerik.Cms.Web.CmsUrlContext.Current;  
                Telerik.Cms.CmsManager manager = new Telerik.Cms.CmsManager();  
                Telerik.Cms.IPage page = manager.GetPage(urlContext.PageID);  
                this.SetBodyClass(page.Name);  
            }  
        }  
     
        private void SetBodyClass(string className)  
        {  
            HtmlGenericControl objbody = (HtmlGenericControl)FindControl("pageBody");  
            if (objbody != null) objbody.Attributes.Add("class", className.ToLower());  
        } 
  23. jaqkar
    jaqkar avatar
    3 posts
    Registered:
    22 Nov 2009
    14 Jan 2010
    Link to this post
    How can I implement this with my navigation css for the current page item? My current css looks like this:

    #navigation a { 
        color: #EAE6DD; 
        display: block; 
        font-weight: bold; 
        font-size: 1.3em; 
        padding: 7px 12px 5px; 
    #navigation a:hover {color: #FFF;} 
    #navigation li.current_page_item a, #navigation li.current_page_parent a {color: #FFE;} 
    #navigation li.current_page_item a {background: url('../../img/navigation-arrow-2.gif') no-repeat center bottom;} 
    #navigation li.current_page_parent a {background: url('../../img/navigation-arrow.gif') no-repeat center bottom;} 

Register for webinar
23 posts, 0 answered