Translations:New Template System in LS3.x/78/en

Modifed view for Survey Title in the navbar

1. Create a new directory /upload/themes/survey/yourThemeName/views/subviews/header/.
2. Copy /themes/survey/vanilla/views/subviews/header/nav_bar.twig to that new directory.
3. Open /themes/survey/vanilla/views/subviews/header/nav_bar.twig and find "{# Logo option #}". Under that, modify the IF statement for the logo/survey-name, so it looks like this:

   		{# Logo option #}
           {% if( aSurveyInfo.options.brandlogo == "on") %}
               <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container"  {{ aSurveyInfo.attr.navbarbrand }}  >
                   {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
               </div>
           {% endif %}
           {% if( aSurveyInfo.options.surveyname1 == "on") %}
               <div class="{{ aSurveyInfo.class.navbarbrand }}"  {{ aSurveyInfo.attr.navbarbrand }} >
                   {{ aSurveyInfo.name }}
               </div>
           {% endif %}
   

4. Add something like this to /upload/themes/survey/yourThemeName/css/custom.css:

   .navbar-brand {
       line-height: 60px;
       font-size: 32px;
   }
   

5. Toggle the "Survey name in navbar" theme option to "Yes"
6. You should see this:
   

Modifed view for Survey Title under progress bar

1. Create a new directory /upload/themes/survey/yourThemeName/views/subviews/survey/group_subviews.
2. Copy /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig to that new directory.
3. Open /themes/survey/vanilla/views/subviews/survey/group_subviews/group_container.twig and add an <h1> element for the survey name. So it looks like this:

   <div class="{{ aSurveyInfo.class.groupcontainer }} space-col" {{ aSurveyInfo.attr.groupcontainer }}>
    
       {# Custom survey name #}
       {% if( aSurveyInfo.options.surveyname2 == "on") %}
       	<h1 class="custom-survey-name">{{ aSurveyInfo.name }}</h1>
       {% endif %}
    
       {# Group Name #}
       {{ include('./subviews/survey/group_subviews/group_name.twig') }}
    
       {# Group Description #}
       {{ include('./subviews/survey/group_subviews/group_desc.twig') }}
    
       {#
           PRESENT THE QUESTIONS
    
           This is the main part. It will render each question for this group
        #}
    
       <!-- PRESENT THE QUESTIONS -->
       {% for  aQuestion in aGroup.aQuestions %}
            {{ include('./subviews/survey/question_container.twig') }}
       {% endfor %}
    
       <!-- Hidden inputs -->
       {% if aGroup.show_last_group == true %}
           <input type='hidden' name='lastgroup' value='{{ aGroup.lastgroup }}' id='lastgroup' />
       {% endif %}
    
       {% if aGroup.show_last_answer == true %}
           <input type='hidden' name='lastanswer' value='{{ aGroup.lastanswer }}' id='lastanswer' />
       {% endif %}
   </div>
   

4. Add something like this to /upload/themes/survey/yourThemeName/css/custom.css:

   .navbar-brand {
       line-height: 60ph1.custom-survey-name {
   	margin: 0;
   	text-align: center;
   }
   

5. Toggle the "Survey name below progress bar" theme option to "Yes"
6. You should see this: