Jump to content
Boost up your community
  • CSS and JavaScript

    We have already included some CSS classes in the templates. And now we can add the CSS styles to the page. 

    Create and assign CSS file

    In your AdminCP go to Pages -> Page management -> Templates and click on New. Choose Add CSS file. Name it docs and add it to the existing group CSS. If we had more than one CSS file, it might be useful to create a new group at this point. 

    Add the following CSS to docs.css:

    Spoiler
    
    #ipsLayout_mainArea {
      padding-right: 0;
    }
    
    .ipsType_sectionTitle,
    .ipsWidget.ipsWidget_vertical .ipsWidget_title {
      background: #b63848;
    }
    
    /* Docs */
    .cDocs {
      padding-top: 30px;
    }
    
    .cDocs h2 {
      font-size: 18px;
      font-weight: 600;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      padding: 6px 10px 6px 0;
      margin-left: 10px;
      margin-bottom: 8px;
      line-height: 1.3;
    }
    
    .cDocs > li {
      padding-left: 10px;
    }
    
    .cDocs li {
      line-height: 1.6;
      padding-left: 10px;
      margin-bottom: 2px;
    }
    
    .cDocs ul ul {
      margin-left: -13px;
      padding-left: 15px;
      border-left: 1px solid rgba(0,0,0,0.075);
    }
      
      .ipsJS_has .cDocs .cDocs_closed ul {
        display: none;
      }
      .ipsJS_has .cDocs .cDocs_open ul,
      .ipsJS_none .cDocs .cDocs_closed ul {
        display: block;
      }
    
    .cDocs h3 {
      font-weight: 400;
      margin: 0;
      padding-left: 0;
      position: relative;
      cursor: pointer;
    }
    
      .cDocs .cDocs_closed h3:before,
      .cDocs .cDocs_open h3:before {
        font-family: 'FontAwesome';
        font-size: 15px;
        position: absolute;
        left: -15px;
        top: 0;
      }
      .ipsJS_has .cDocs .cDocs_closed h3:before {
        content: '\f105';
      }
      .ipsJS_has .cDocs .cDocs_open h3:before,
      .ipsJS_none .cDocs .cDocs_closed h3:before {
        content: '\f107';
        left: -17px;
      }
    
    a.cDocs_active {
      color: #3d6594;
      font-weight: bold;
    }
    
    /* ROWS */
    .cDocs_row {
      border-bottom: 1px solid rgba(0,0,0,0.1);
      padding: 20px 0;
    }
    
    .cDocs_row .ipsType_sectionHead {
      margin-bottom: 5px;
    }
    
    #elDocs_columns .ipsPageHeader {
      margin-top: 0;
    }

     

    To include this CSS in the page for the database, go to Pages -> Page Management -> Pagein your AdminCP and open the page with the documentation for editing. Switch to the tab Page Includes tab and select CSS/Docs.css.

    Include CSS into page

    Click on Save and view the result in the frontend. You will notice that the categories are now collapsed so that the pages insdie are no longer visible in the navigation. To add the interaction here, you have to create a JavaScript file as a last step.

    Create and embed Javascript

    In AdminCP go to Pages -> Page management -> Templates again and click on New. Select Add JavaScript file and enter the name docs. Use the group JS. If you need more files you can create an extra group for them to keep them separate from other files.

    Open the file and add the following content:

    Spoiler
    
    
    /**
     * IPS Social Suite 4
     * (c) 2013 Invision Power Services - http://www.invisionpower.com
     *
     * ips.devDocs.js - Dev docs JS controller
     *
     * Author: Rikki Tissier
     */
    ;
    (function($, _, undefined) {
        "use strict";
    
        ips.controller.register('docs.front.docs.main', {
    
            initialize: function() {
                this.on('click', '[data-action="expandSection"]', this.toggleSection);
                this.setup();
            },
    
            setup: function() {
                // Do we have an active item?
                var active = this.scope.find('.cDocs_active');
    
                if (active.length) {
                    var section = active.closest('.cDocs_closed');
                    section.toggleClass('cDocs_closed', false).toggleClass('cDocs_open', true);
                }
            },
    
            toggleSection: function(e) {
                var h3 = $(e.currentTarget);
                var li = h3.closest('li');
                var expanded = li.is('.cDocs_open');
    
                li.toggleClass('cDocs_open', !expanded).toggleClass('cDocs_closed', expanded);
            }
        });
    }(jQuery, _));

     

    As you can see, we use the code here already used in IPS own documentation. This is another advantage of Pages, by the way. If something doesn't work, you can get support directly from IPS and don't have to rely on the third party providers.

    The last step is to embed JavaScript into the documentation page. This is done in the same way as CSS above. In AdminCP go to Pages -> Page management -> Page and open the page with the documentation for editing. Go to the tab Page Includes and click on JS/Docs.js.

    Done. Now only the active category in the menu block is expanded and the others are expanded by clicking on them. 

    You can see that a lot of HTML, CSS, JavaScript and some PHP was put together here. This is a simple version that you can customize, extend and develop further.

    Have fun!




  • Sign In and Stay Uptodate

    New articles and tutorials on how to monetize your community are on the way. To stay update sign in and subscribe to our newsletter. 

×
×
  • Create New...