DNN Forums

Ask questions about your website to get help learning DNN and help resolve issues.

Applying styles based on parent/grandparent page

 7 Replies
 0 Subscribed to this topic
 12 Subscribed to this forum
Sort:
Author
Messages
New Around Here
Posts: 6
New Around Here

    Hi everyone, 

    I'm struggling with a problem that seems relatively simple, but I'm having trouble getting to an ideal solution. 

    I'd like to style my top-level parent pages with individual css applied to each page, and for those styles to be inherited by subsequent children and grandchildren pages.
    E.g. Using the forums as an example, the parent page "About DNN" would have a yellow navbar, "How To" would have a green navbar, "Extensions" has an orange navbar, etc. and their children would have the same styling as the parent. Grandchildren would have the same as well. 

    Part of the kicker: the parent pages all utilize the same skin but their layouts/.ascx vary on a page by page basis, and we'd like to use the same layouts across the board.

    I know how to include a css file for an individual layout, but we don't necessarily want to create different layouts (duplicated layouts really) for each top-level parent page and its children to use. I.e. I want to be able to use the same "BasicPage.ascx" layout on About DNN, How to, Extensions, or any other page for that matter and have the individual styling be based on the top-level page's tab id.

    Is there a recommendation or best practice for applying styles programatically based on a page's parent/grandparent page? I think scripting this out would be simple in theory, but I have no idea how to implement that in a DNN environment. 

    Any information or help is greatly appreciated. 

    Veteran Member
    Posts: 342
    Veteran Member

      There are many ways to go about something like this, but one of my favorite ways is to leverage page "tags".  You can use the DNN API within your layout to check for a certain tag (or tags) and apply styles dynamically following a model you determine.  Does that make sense?  Here is an example where an alternate logo is being used based on the presence of an "altlogo" tag.

      <% if (PortalSettings.ActiveTab.GetTags().Contains("altlogo")) { %>
      
         
               
      <% } %>

       

      David Poindexter


      Creator:


      Veteran Member
      Posts: 1157
      Veteran Member

        You could use our (free) style helper for this. https://www.40fingers.net...ucts/DNN-Stylehelper

        When you add this attribute; BodyClass ="[BcNr]" it will render the level and order of the page as a class of the Body element.
        Example: L0_Nr4 L1_Nr2

        So you can use:

        .L0_Nr1{
        
        }
        
        .L0_Nr2{
        
        }

         

        etc.

        Senior Member
        Posts: 1393
        Senior Member

          Hello:  

          As the responses from David and Timo may suggest, there are a ton of creative ways to achieve this.  We've recently used the Tag feature in page settings to do something similar, and I know others have used the icon settings in the past for other similar (and even more dynamic purposes, such as highly stylized and programmatic mega menus).  

          The most important part of this isn't really how or whether or not it's done.  It's really about how you want or need to manage it.  How are you planning to maintain and configure this feature now and in the future?  For example, one of our clients has a backend system that manages this outside of DNN.  When DNN loads the page, if anything has changed about the configuration from the backend system, it's reflected the next time the page loads.  

          So, the short of it is this...  

          You can do this, and you have pretty much any way to do it that you can think of.  It's up to you how to do it, but it will involve a bit of code by someone.  😉 

          New Around Here
          Posts: 6
          New Around Here

            Thank you for the insight David! This is great to know. 

            I think I might be having a separate issue that's getting in the way of solving my styling question. I'm getting a 500 error on pages when I try to add logic in a code block in my skins .ascx layout. For example, copy & pasting your example into my .ascx layout results in the 500 error as well. I've even tried reducing it to the following:

            <% if (PortalSettings.ActiveTab.GetTags().Contains("altlogo")) { %>
            
            <% } %>

            There may be something that I'm missing or not quite understanding in regards to how the .ascx controls operate in my skin. 

            Veteran Member
            Posts: 342
            Veteran Member

              Do you have something like the following at the top of your layout control?

              <%@ Control Language="C#" AutoEventWireup="true" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>

              David Poindexter


              Creator:


              Advanced Member
              Posts: 230
              Advanced Member

                nnguyen, another thing you can do it's duplicate the skin layout files you're using and have a version for each different color or category you need to assign specific style on and manually assign the correct skin layout to each page.

                For example, if I've a skin layout called "Default-Standard" I can duplicate the files related to this layout and apply different styles to each version and label them something like this: "Default-Standard-Red", "Default-Standard-Blue", "Default-Standard-White", etc; at last, assign the skin layout correct to each page.

                Regards.

                Senior Member
                Posts: 1393
                Senior Member
                  Posted By Marco Alvarado on 5/9/2024 3:15 PM

                  nnguyen, another thing you can do it's duplicate the skin layout files you're using and have a version for each different color or category you need to assign specific style on and manually assign the correct skin layout to each page.

                  For example, if I've a skin layout called "Default-Standard" I can duplicate the files related to this layout and apply different styles to each version and label them something like this: "Default-Standard-Red", "Default-Standard-Blue", "Default-Standard-White", etc; at last, assign the skin layout correct to each page.

                  Regards.

                  Another creative way we've been doing stuff like this recently is by using the Tags feature in the page settings. Then, in your theme, you can look for an expected tag, and then dynamically change anything about the way the theme renders dynamically.  This could include alternative logos, removing panes, forcing containers... All kinds of cool stuff - with one layout file.  

                   

                  These Forums are dedicated to the discussion of DNN Platform.

                  For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

                  1. If you have (suspected) security issues, please DO NOT post them in the forums but instead follow the official DNN security policy
                  2. No Advertising. This includes the promotion of commercial and non-commercial products or services which are not directly related to DNN.
                  3. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
                  4. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
                  5. No Flaming or Trolling.
                  6. No Profanity, Racism, or Prejudice.
                  7. Site Moderators have the final word on approving / removing a thread or post or comment.
                  8. English language posting only, please.

                  Would you like to help us?

                  Awesome! Simply post in the forums using the link below and we'll get you started.

                  Get Involved