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
  • CitroenGroen's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 2 months ago #148842 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:
Code:
.navbar-default {
    background-color:  #3c3c3c;
}
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:
Code:
#progress-wrapper .ui-widget-header {
 background-color: #3300FF;
}
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:
Code:
<img id='page_logo' src='{TEMPLATEURL}/files/logo.png' class="clearfix pull-left" />
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!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago #148845 by tpartner
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.
More
7 years 2 months ago #148846 by KompetenzZ
I have the same question: Is it possible to have the logo at the same height as the title? See picture.


Cheers kompetenzz
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
7 years 2 months ago #148870 by LouisGac
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.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose