- Posts: 1
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Several template editing questions (changing colors and adding a logo to navbar)
- CitroenGroen
- Topic Author
- Offline
- New Member
Less
More
7 years 1 month ago #148842
by CitroenGroen
Several template editing questions (changing colors and adding a logo to navbar) was created by CitroenGroen
Hello all,
I've been trying to make a custom template for my survey, but can't really seem to figure out what the right lines of code are to do everything I want.
I managed to change the navigation bar color by adding the following line of code to template.css:
I was was however, not able to find the correct code to change the color of the question title blocks and the previous/next/submit buttons. Is there an overview somewhere where I can find the names of all the different page elements?
I also tried to change the color of the progress bar by adding this line to template.css:
This did not work for me. Am I missing something here?
I succeded in adding a logo to the navbar by adding the following line under the navbar-header class to startpage.pstpl:
This results in my logo appearing in the upper-left of the navbar. Is it also possible to have the logo appear just left of the survey title, at the same height as the title?
Lastly, I wanted to know if it was possible to make the privacy notice on the startpage appear in a smaller font than the rest of the text.
I hope it's okay to ask so many different questions in one thread. Thanks in advance for your advice!
I've been trying to make a custom template for my survey, but can't really seem to figure out what the right lines of code are to do everything I want.
I managed to change the navigation bar color by adding the following line of code to template.css:
Code:
.navbar-default { background-color: #3c3c3c; }
I also tried to change the color of the progress bar by adding this line to template.css:
Code:
#progress-wrapper .ui-widget-header { background-color: #3300FF; }
I succeded in adding a logo to the navbar by adding the following line under the navbar-header class to startpage.pstpl:
Code:
<img id='page_logo' src='{TEMPLATEURL}/files/logo.png' class="clearfix pull-left" />
Lastly, I wanted to know if it was possible to make the privacy notice on the startpage appear in a smaller font than the rest of the text.
I hope it's okay to ask so many different questions in one thread. Thanks in advance for your advice!
The topic has been locked.
- tpartner
- Away
- LimeSurvey Community Team
Less
More
- Posts: 10613
- Thank you received: 3691
7 years 4 weeks ago #148845
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 Several template editing questions (changing colors and adding a logo to navbar)
Use developer tools in Chrome (F12) or Firebug for Firefox to explore the elements and see what styles need to be changed or added.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- KompetenzZ
- Offline
- Premium Member
Less
More
- Posts: 153
- Thank you received: 8
7 years 4 weeks ago #148846
by KompetenzZ
Cheers kompetenzz
Replied by KompetenzZ on topic Several template editing questions (changing colors and adding a logo to navbar)
I have the same question: Is it possible to have the logo at the same height as the title? See picture.
Cheers kompetenzz
Attachments:
The topic has been locked.
- LouisGac
- Visitor
7 years 4 weeks ago #148870
by LouisGac
Replied by LouisGac on topic Several template editing questions (changing colors and adding a logo to navbar)
It's based on Bootstrap, so just use a Bootstrap CSS Generator, like:
www.lavishbootstrap.com/
bootstrap-live-customizer.com/
there are many other ones.
www.lavishbootstrap.com/
bootstrap-live-customizer.com/
there are many other ones.
The topic has been locked.