DNN Forums

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

Modify the existing template

Sort:
You are not authorized to post a reply.





New Around Here





    I created a new page. This page has a one row with two columns, one row with 3 column, etc. Click to see my screenshot. https://snipboard.io/bRxeLc.jpghttps://snipboard.io/bRxeLc.jpghttps://snipboard.io/bRxeLc.jpg
    https://snipboard.io/bRxeLc.jpg

      How do I modify the rest of the rows with two columns?  Please provide me a detailed instruction to solve my problem. Thank you.

     






    Veteran Member





      Your screenshot appears to display a page with the theme applied and two modules in two content panes that are about 50% in width.  If you need other content panes to be the same width, you'll have to consult with your theme developer/designer to do that.  Otherwise, why not just keep putting modules in the same two 50% content panes.  You're allowed to have more than one module in every pane that your theme displays to you.  






      New Around Here





        I know I have that option, but there is a better way. I looked into a skin template but that didn't solve it.

        The orginal developer is no longer working for the company. 






        Veteran Member





          All of the areas where you can "drop" or place a module are defined by the theme.  If you want more areas to add modules, the theme most likely will need to be modified to include those new content panes.  This is usually not a big change, by the way, depending on how well-built the existing theme is. 






          New Around Here





            Posted By Will Strohl on 1/16/2024 2:45 PM

            All of the areas where you can "drop" or place a module are defined by the theme.  If you want more areas to add modules, the theme most likely will need to be modified to include those new content panes.  This is usually not a big change, by the way, depending on how well-built the existing theme is. 

            I don't know to modify the "content pane" of one row 3 columns to one row two column. Can you teach this newbie?

            '

             

             






            Veteran Member





              Hello again!  It's actually far easier than you might think.  Essentially, when you're looking at the source code for the theme, you will most likely want to create a copy of the layout that is currently working as you'd expect.  Let's call it InnerContent.ascx.  If this is the name, then the layout in the UI will simply be InnerContent, for example. 

              This is probably in the /Portals/_default/Skins/NAME/ folder in your file system.  (NAME is the name of your theme package.)  

              Open the layout copy you've just made and find the 50% panes you're already happy with.  They most likely look something like the example below.  

              <div id="LeftPane50" class="someClasses" runat="server"></div>  
              <div id="RightPane50" class="someClasses" runat="server"></div>  

              These are probably wrapped by another DIV tag too, so try to be aware of what you may need.  

              Once you copy and paste the new 50% panes you want into the intended position in the layout, be sure to change the IDs to be unique and then test the layout.  You may need to make some additional CSS adjustments.  Usually, those updates should go into the Skin.css file in the same folder.  

              When you test, just create a new page on that site.  Then, apply the layout you're editing to that page and begin adding modules to it the way you're trying already.  

              Using the example above, your resulting new content panes might look something like the new example below. 

              <div id="Row2LeftPane50" class="someClasses newClasses" runat="server"></div>
              <div id="Row2RightPane50" class="someClasses newClasses" runat="server"></div>






              Advanced Member





                Maybe this is basic stuff but make sure you use some sort of html application that helps you edit this type of file (such as Visual Studio Code) so you get familiarize with the <div> hierachy you're going to find in the files Will mentioned in his post. 

                Ing. Marco Alvarado Gómez MSc | Globalode
                Phone. +506 6049-1880 | WhatsApp. +506 6049-1880 | Email. [email protected]
                Address. Costa Rica (A Pura Vida place!).
                You are not authorized to post a reply.

                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