How to use one layout for multiple pages with css for each page in DNN?

Question

I want to use one layout file in DNN for three pages. Each of the page has unique style(css). And most of the divs/section in those pages use class instead of id. Problem: In some cases the classes are applied to parent divs/section and their child are made editable. eg:

<div class="special-row">
<div id="div1" class="special-col" runat="server"/>
<div id="div2" class="special-col" runat="server"/>
</div>

As you can see there are containers inside special-row. Now say I have another page using the same layout and I need to add anothe class besides special-row, how should i do that. If i create another div eg:,

<div class="special-row">
<div id="div1" class="special-col" runat="server"/>
<div id="div2" class="special-col" runat="server"/>
</div>
<div class="special-row very-special-row">
<div id="div1" class="special-col" runat="server"/>
<div id="div2" class="special-col" runat="server"/>
</div>

I am hardcoding the layout, which is not how a template/layout should be used originally. Since i cannot add css class (and dont want to), the only way that i can think of is, create css file for each page, copy the code of all required class(s) and paste it inside an id selector eg:

Page1:

<div id="specialDiv" class="special-row">
    <div id="div1" class="special-col" runat="server"/>
    <div id="div2" class="special-col" runat="server"/>
 </div>

page1.css:

#specialDiv{
// code of special-row
}

Page2:

<div id="specialDiv" class="special-row very-special-row">
    <div id="div1" class="special-col" runat="server"/>
    <div id="div2" class="special-col" runat="server"/>
 </div>

page2.css:

#specialDiv{
// code of special-row
// code of very-special-row
}

Also note, i cannot make special-row a dnn container. Is there a way such that I can apply css to parent div/section ?

Are you talking about creating a Skin, SkinObject, Container or Module? If you want custom content on a page you usually use a module for that. You can place that on any page and maybe in the settings of that module specify the css... — VDWWD

Joe Craig Joe Craig · Accepted Answer · 2018-10-27T15:05:28

You can use a css file specific to the page. You can specify a page css files under page settings for each page.

Use skin.css (in your skin folder) for styles that apply to any page using that skin.

You can use css files for containers, with special containers getting special css files.

And, as mentioned above, you can apply a special css file to each page.

How to use one layout for multiple pages with css for each page in DNN?

1 Answers