Survey Title in Navbar... or just below it

cguest
Topic Author
Offline
Junior Member

6 years 1 month ago #164890 by cguest

Survey Title in Navbar... or just below it was created by cguest

Hi,
In the previous versions of LS... my survey title was displayed in the navbar. Since upgrading to the 3.x versions... I no longer see it there. I would appreciate any help in getting this to display.

Would be great if I could have the code for both the navbar and for placing it at the top of the survey page above the first question box.

Just to be clear... I do not want it in both places for a single template. I would like the option of putting it in either place depending on where I need it for the particular template I'm using.

Template: custom bootswatch
LS Version: Version 3.4.3+180227

Thanks,
CGuest

The topic has been locked.

cguest
Topic Author
Offline
Junior Member

6 years 1 month ago #164904 by cguest

Replied by cguest on topic Survey Title in Navbar... or just below it

I have attached a screenshot from my 2.7x version template as an example of the navbar option that I am looking for.

I would also like to add the survey title between the progress bar and the question box on the Question page.

Any help would be greatly appreciated!

Thanks,
CGuest

Attachments:

Capture.PNG

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

6 years 1 month ago - 6 years 1 month ago #164909 by tpartner

Replied by tpartner on topic Survey Title in Navbar... or just below it

Here is how you can add a couple of options to your custom theme to show the survey name in those locations.

Create new template options:

1) Copy the contents of /themes/survey/bootswatch/options/ to /upload/themes/survey/yourThemeName/options/.

2) In /upload/themes/survey/yourThemeName/options/options.twig, find "{# Bootstrap Bootswatch theme #}" and directly before its parent <div class='row'> element, add this:

Code:

            {# Custom survey name in navbar #}
            <div class='row'>
                <div class='col-sm-12 col-md-6'>
 
                    <div class='form-group row'>
                        <label for='simple_edit_options_surveyname1' class='control-label'>Survey name in navbar</label>
                        <div class='col-sm-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input name='surveyname1' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
                                    Yes
                                </label>
                                <label class="btn btn-default">
                                    <input name='surveyname1' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname1'/>
                                    No
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='row'>
                <hr/>
            </div>
 
            {# Custom survey name below progress bar #}
            <div class='row'>
                <div class='col-sm-12 col-md-6'>
 
                    <div class='form-group row'>
                        <label for='simple_edit_options_surveyname2' class='control-label'>Survey name below progress bar</label>
                        <div class='col-sm-12'>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input name='surveyname2' type='radio' value='on' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
                                    Yes
                                </label>
                                <label class="btn btn-default">
                                    <input name='surveyname2' type='radio' value='off' class='selector_option_radio_field ' data-id='simple_edit_options_surveyname2'/>
                                    No
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='row'>
                <hr/>
            </div>

3) In /upload/themes/survey/yourThemeName/config.xml, add two items to the "options" block so it looks like this:

Code:

    <options>
        <ajaxmode>on</ajaxmode>
        <brandlogo>on</brandlogo>
        <brandlogofile>./files/logo.png</brandlogofile>
        <container>on</container>
        <surveyname1>on</surveyname1>
        <surveyname2>on</surveyname2>
    </options>

4) This should give you two new options in the Theme Options screen.

Survey Name 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) In the local copy of nav_bar.twig, find "{# Logo option #}" and under that, modify the IF statement for the logo/survey-name, so it looks like this:

Code:

         {# 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:

Code:

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

5) Toggle the "Survey name in navbar" theme option to "Yes"

6) You should see this:

Survey Name 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) In the local copy of group_container.twig, add an <h1> element for the survey name. So, it looks like this:

Code:

<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:

Code:

.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:

Attached is a custom theme with these modifications:

File Attachment:

File Name: test_survey_names.zip
File Size:209 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Attachments:

Last edit: 6 years 1 month ago by tpartner.

The following user(s) said Thank You: cguest, tassoman

The topic has been locked.

LouisGac
Visitor

6 years 1 month ago #164940 by LouisGac

Replied by LouisGac on topic Survey Title in Navbar... or just below it

this could be a mini tutorial in the wiki

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

6 years 1 month ago #164957 by tpartner

Replied by tpartner on topic Survey Title in Navbar... or just below it

@LouisGac, where?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

LouisGac
Visitor

6 years 1 month ago #164958 by LouisGac

Replied by LouisGac on topic Survey Title in Navbar... or just below it

Here maybe for now?

manual.limesurvey.org/index.php?title=Ne..._theme_customization

I already added a quick tuto for "Adding custom fonts to my theme"

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

6 years 1 month ago #164984 by tpartner

Replied by tpartner on topic Survey Title in Navbar... or just below it

Done - manual.limesurvey.org/New_Template_Syste...y_of_survey_elements

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The following user(s) said Thank You: DenisChenu

The topic has been locked.

Mazi
Offline
Official LimeSurvey Partner

4 years 10 months ago #184823 by Mazi

Replied by Mazi on topic Survey Title in Navbar... or just below it

Great and really helpful instructions, thanks a lot, Tony!

Let me just add a screenshot of theme options we added at our latest Limesurvey theme to show what is possible:

And this is how the theme looks like with:
- logo added top left
- background image enabled
- transparency set for the main question container
- custom footer text

More theme options are listed at survey-consulting.com/product/limesurvey-template-backy

Best regards/Beste Grüße,
Dr. Marcel Minke
Need Help? We offer professional Limesurvey support: survey-consulting.com
Contact: marcel.minke(at)survey-consulting.com

The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Survey Title in Navbar... or just below it

File Attachment:

Lime-years ahead

Legal

About Us

Open Source