5 Replies Latest reply on Oct 22, 2012 11:50 AM by aperrotte

    Customizing UI Page Structure

    nasim_zoubeiri

      Hello,

       

      My question is concerning how to make changes to the UI page structure, using "Advanced Theme Topics" type of modifications referenced in the Documentation (on Themes Overview).

       

      In the article: Customizing UI Page Structure it states to:

      "1. Identify the part of the UI that you want to customize, then identify the FTL file that corresponds to it."


      I'm wondering, of the large list of SOY and FTL files in the Admin Console, how do you pin point which file to modify?


      For example: if I want to make changes to the sidebar, how do I find that corresponding file?


      Additional Information:

      -I'm working in Jive 6.0

      -I have Full Access admin permissions


      Thanks!

      Nasim

        • Re: Customizing UI Page Structure
          aperrotte

          Hey Nasim,

           

          I ran into a similar issue when I was undergoing template rework. My suggestion would be to reference the elements through firebug and adapt the UI through CSS as a first choice in ...

           

          /template/global/custom-css.ftl

           

          However sometimes you have to dig into the templates themselves. Right now there's a medley of .ftl and .soy files that house your main components. Elements such as the footer, nav bar, place templates are all soy and can be found in the corresponding locations below.

           

          /soy/nav/navbar.soy

          /soy/places/place.soy

           

          Your javascript additions, main template design templates are going to be found under the decorator spaces as seen below

           

          /template/decorator/default/header-javascript.ftl

          /template/decorator/default/template.ftl

           

          Elements such as the login page will be found under the global templates.

           

          /template/global/login.ftl


          I know this is a only a sliver of the templates available. But in my UI work, these are my most frequented. I hope this helps

           

          Sincerely,

          Aaron J. Perrotte

            • Re: Customizing UI Page Structure
              nasim_zoubeiri

              Thanks for the help!!

              I'm slowly making progress. I've made most of my edits using the Global CSS file and am starting to add static HTML content to pages.

              I understand that FTL files are responsible for the placement of UI elements, and that they pull in content from SOY files. What I'm still unsure of though is where the SOY files pull in parameters from.

              For instance, in the navbar.soy file I've noticed the nav elements are pulled in from a '$links' parameter. Do you know where/how to access this '$links' parameter? Is it possible to directly edit the contents of the parameter?

               

              Thanks,

              Nasim