- Posts: 27
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Survey Title in Navbar... or just below it
- cguest
- Topic Author
- Offline
- Junior Member
Less
More
6 years 1 month ago #164890
by cguest
Thanks,
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
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
Less
More
- Posts: 27
- Thank you received: 0
6 years 1 month ago #164904
by cguest
Thanks,
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!
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:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
6 years 1 month ago - 6 years 1 month ago #164909
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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:
3) In /upload/themes/survey/yourThemeName/config.xml, add two items to the "options" block so it looks like this:
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:
4) Add something like this to /upload/themes/survey/yourThemeName/css/custom.css:
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:
4) Add something like this to /upload/themes/survey/yourThemeName/css/custom.css:
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:
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:
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
Less
More
- Posts: 10109
- Thank you received: 3593
6 years 1 month ago #164957
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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"
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
Less
More
- Posts: 10109
- Thank you received: 3593
6 years 1 month ago #164984
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Survey Title in Navbar... or just below it
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 11 months ago #184823
by Mazi
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
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
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.