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")) { %>
<header class="sticky-top secondary-menu d-none d-lg-block">
    <div class="container">
      <div class="row no-gutters navbar-header">
        <dnn:LOGO id="dnnLOGOalt" runat="server" />
        <nav>
          <dnn:MENU id="menualt" MenuStyle="menus/razor" runat="server" NodeSelector="RootOnly"></dnn:MENU>
        </nav>
      </div>
    </div>
</header>
<% } %>

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.

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.  😉 

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")) { %>
<header class="sticky-top secondary-menu d-none d-lg-block">
</header>
<% } %>

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

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" %>

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.

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.