Sunday, May 26, 2019
A Showcase Unisols Simple Articles Configuration BACK  ALL DNN TIPS
by Alan Amin

The current DNN TIPS page uses our own Unisols Simple Articles module. We are showing the list of all tips and details of each tip on the DNN TIPS page, while showing a list of the latest 5 tips on the front page.

Since the module supports template-driven content, there is no limit in how many ways you can  list your "articles". We are using a custom template for this instance that is using HTML tables to list the tips. This is how the module on the page is configured:

  1. Upload one of the following images to /Images folder of your website:
    orangish background bluish background (if bluish is used, change the file name from bg2.png to bg1.png)
  2. Add a new Unisols Simple Articles module to your "All Articles" page (DNN TIPS in our case) (We will refer to this page as LISTPAGE). This page will list all the articles. Let's call this copy of the module as COPY1
  3. Add the same instance of the module to your home page (we'll refer to this page as HOMEPAGE). Use "Add Existing Module" functionality of DNN. Let's call this one COPY2
    Now, there are 2 copies of the exact same module, both will show the same articles.
  4. Go to the settings of COPY1 and select "Template" from the "List Type" drop-down menu. Now the module will fetch the settings for the "Template" list type.
  5. For the "Content Length" field, put 450. This will show only the first 450 characters of each article.
  6. For the "Article Template" field, paste the following HTML snippet:

    <div class="saListTemplate" style="background: url('/images/bg1.png') repeat-x"><table><tr><td style="vertical-align:top;padding-right:20px">[ARTICLEDATE]</td><td style="vertical-align:top"><div><span class="saListTitle">[TITLELINK]</span></div><div class="saListContent">[CONTENT] <span class="saListReadMore">[READMORE]</span></div></td></tr></table></div>

    Delete the content of the "Separator Template". This will remove the horizontal line among articles list.
  7. Delete the content of "Alternate Article Template" field.
  8. Check the "Display Date as Calendar Icon" checkbox
  9. For the "Details Template" field (in Details Settings), put the following HTML snippet:

    <table style="border-width:0;width:100%">


    <td style="width:10px">



    <td style="padding-left:12px">

    <div><span class="saDetailsTitle">[TITLE]</span> <span class="saDetailsBackAndAll"><span class="saDetailsBack orange">[BACK]</span>&nbsp;&nbsp;<span class="saDetailsAll dark-blue">[ALLARTICLES]</span></span></div>

    <div style="color:gray">by [CREATEDBY]</div>




    <div class="saDetailsContent">[CONTENT]</div>

    <div><span class="saDetailsModifiedDate">Last Update: </span><span class="saDetailsDate">[MODIFIEDDATE]</span></div>

    <div class="saAddThis">[ADDTHIS]</div>


    Update the module settings.
  10. Check the "Display Date as Calendar Icon" checkbox
  11. From the "Calendar Icon Size" dropdown menu select "small"
  12. Go the settings of COPY2, in List Settings, for "Article Count" put 5. This will make the module to show only 5 articles.
  13. For the "Details Page" drop-down menu, select the LISTPAGE. Then click on "Refresh Details Module". Now you should see COPY1 in the "Details Module" field.
    This way COPY2 (which is on HOMEPAGE) will show its article details on COPY1 (which is on LISTPAGE page).
  14. For "Content Length", put 200. This will show only 200 characters from each article on the HOMEPAGE.
  15. Update the module settings.>
Now the configuration is done.
Last Update: 2013/11/24

© 2019 Unisols.NET