Survey Title in Navbar... or just below it

Plus d'informations
il y a 1 an 7 mois #164890 par 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

Connexion ou Créer un compte pour participer à la conversation.

LimeSurvey Partners
Plus d'informations
il y a 1 an 7 mois #164904 par cguest
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
Pièces jointes :

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 an 7 mois - il y a 1 an 7 mois #164909 par tpartner
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:
            {# 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:
    <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:
         {# 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:



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




Attached is a custom theme with these modifications:

Fichier attaché :

Nom du fichier : test_survey_names.zip
Taille du ficher :209 ko

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Pièces jointes :
Dernière édition: il y a 1 an 7 mois par tpartner.
Les utilisateur(s) suivant ont remercié: LouisGac, cguest, tassoman

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 an 7 mois #164940 par LouisGac
this could be a mini tutorial in the wiki

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 an 7 mois #164957 par tpartner
@LouisGac, where?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 an 7 mois #164958 par LouisGac
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"

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 an 7 mois #164984 par tpartner

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Les utilisateur(s) suivant ont remercié: DenisChenu

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 4 mois 3 semaines #184823 par Mazi
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
Contact: marcel.minke(at)survey-consulting.com
Want to use your survey offline -> www.offlinesurveys.com

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!