- Posts: 166
- Thank you received: 26
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Help with moving the progress bar
- davebostockgmail
- Topic Author
- Offline
- Elite Member
Less
More
3 years 1 month ago #212965
by davebostockgmail
Help with moving the progress bar was created by davebostockgmail
I was wondering if someone could tell me how to move the progress bar into the top container.
The current template is the fruity one and I have attached an image of where I would like it to go.
This would hopefully then move the question up on the page as well.
I am not up to speed with TWIG templating so any help is appreciated.
Version Version 3.25.1+201124
Theme : LimeSurvey Fruity Theme with some CSS customisation for question appearance
The current template is the fruity one and I have attached an image of where I would like it to go.
This would hopefully then move the question up on the page as well.
I am not up to speed with TWIG templating so any help is appreciated.
Version Version 3.25.1+201124
Theme : LimeSurvey Fruity Theme with some CSS customisation for question appearance
Attachments:
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12908
- Thank you received: 3975
3 years 1 month ago #213350
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Help with moving the progress bar
Hi,
I moved the content of "progress_bar.twig" to "nav_bar.twig" with one change betweemn the logo and the "save", "clearall", etc. links.
I changed "container-fluid" to "container"
I know there is a bit more styling necessary.
But it's something to begin with.
Joffm
I moved the content of "progress_bar.twig" to "nav_bar.twig" with one change betweemn the logo and the "save", "clearall", etc. links.
I changed "container-fluid" to "container"
Code:
{# do not show on "completed/thank you page" page #} {% if not aSurveyInfo.aCompleted %} <!-- Top container --> <div class="{{ aSurveyInfo.class.topcontainer }} space-col" {{ aSurveyInfo.attr.topcontainer }} > <div class="{{ aSurveyInfo.class.topcontent }} container" {{ aSurveyInfo.attr.topcontent }} > {% if aSurveyInfo.format != 'A' and aSurveyInfo.showprogress is defined and aSurveyInfo.showprogress == 'Y' %} {{ registerPublicCssFile('lime-progress.css') }} {% set progressValue = ( aSurveyInfo.progress.total > 0 ) ? intval( (aSurveyInfo.progress.currentstep - 1) / aSurveyInfo.progress.total * 100 ) : 0 %} <div class="{{ aSurveyInfo.class.progress }}" {{ aSurveyInfo.attr.progress }}> <div class="{{ aSurveyInfo.class.progressbar }}" {{ aSurveyInfo.attr.progressbar }} role="progressbar" aria-valuenow="{{ progressValue }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ progressValue }}%;"> {{ progressValue }}% </div> </div> {% endif %} </div> <!-- must hide it without javascript --> </div> {% endif %}
I know there is a bit more styling necessary.
But it's something to begin with.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: davebostockgmail
The topic has been locked.
- davebostockgmail
- Topic Author
- Offline
- Elite Member
Less
More
- Posts: 166
- Thank you received: 26
3 years 1 month ago #213381
by davebostockgmail
Replied by davebostockgmail on topic Help with moving the progress bar
Thank you so much Joffm ... this has done the trick.
I can work with the CSS from here.
I can work with the CSS from here.
The topic has been locked.