Question

This is default layout of the panes in dnn 5.5.

Is it possible to change that into 3×3 grid with equal sized squares ?

Answer 1

All the panes are defined by the skin you are using. There are many free skins, skins for sale, or you can create your own skin to meet just about any layout you can imagine.

Edit

You can edit the skin files directly on the disk, but when an upgrade is applied you will lose your changes. The easiest way around that is to copy the skin directory to one with your own name. It should then be available in the skin drop down on the Admin | Skins page. Because it was not “installed” from a package it will be marked as a legacy skin, you can ignore that.

The default skin is located in Portals\_default\Skins\MinimalExtropy (MinimalExtropyPro if you are using Pro). Copy the whole folder to your own folder e.g. Portals\_default\Skins\MySkin. The default skin has many minor variations to choose from (e.g. 1024, 1280, full width etc.). Be sure you know which one you are using, and then edit the applicable .ascx file.

In it you will find a section that looks like:

<div class="content_width">
  <div runat="server" id="TopPane"  class="TopPane" ></div>
<table width="99%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top" id="LeftPane" class="LeftPane" runat="server">
    </td>
    <td valign="top" id="ContentPane" class="ContentPane" runat="server">
    </td>
    <td valign="top" id="RightPane" class="RightPane" runat="server">
    </td>
  </tr>
</table>
  <div runat="server" id="BottomPane"  class="BottomPane" ></div>
</div>

Edit this section to get the layout that you want. Pretty much any HTML tag that acts like a container, or any asp.net control that acts like a container can be used as a pane by applying the runat=”server” attribute, and giving it an ID that ends with “Pane”. Every layout MUST have a ContentPane, other than that you are free to name/style/organize the panes pretty much any way that you see fit.