Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Change of colors

  • oumaimaf
  • oumaimaf's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
6 years 6 months ago #158156 by oumaimaf
Change of colors was created by oumaimaf
Hello all,

could someone please tell me how I can change the color of this header in the survey page?



I would also like to change the following:

- I'm editing the default template and would like the background of the survey to be white instead of light grey
- Where can I find the code to each color? I'm looking for the code for dark orange.

Thank you !!
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 years 6 months ago - 6 years 6 months ago #158199 by Joffm
Replied by Joffm on topic Change of colors
www.computerhope.com/htmcolor.htm

To find the classes of the parts you want to change you best use a web development tool which is mostly included in your browser and look for the classes.

E.g. to change the color of the question header you have to change
.question-title-container
and
.questionvalidcontainer

Then overwrite the background-color in template.css

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 6 years 6 months ago by Joffm.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
6 years 6 months ago - 6 years 6 months ago #158219 by LouisGac
Replied by LouisGac on topic Change of colors
LimeSurvey templates are using Bootstrap.

The best way to change color is then to regenerate a Bootstrap CSS file with the generator:
getbootstrap.com/docs/3.3/customize/

(you can set the color variables)

An easier way to do is to choose one of the Bootswatch templates:
bootswatch.com/

In both cases, just add the CSS file to your CSS template directory, and update the template manifest.
Last edit: 6 years 6 months ago by LouisGac.
The topic has been locked.
More
5 years 11 months ago #167397 by krosser
Replied by krosser on topic Change of colors

LouisGac wrote: LimeSurvey templates are using Bootstrap.

The best way to change color is then to regenerate a Bootstrap CSS file with the generator:
getbootstrap.com/docs/3.3/customize/

(you can set the color variables)

An easier way to do is to choose one of the Bootswatch templates:
bootswatch.com/

In both cases, just add the CSS file to your CSS template directory, and update the template manifest.


Hi Louis,

Found your reply here...
I'm having trouble changing the default Bootswatch theme using CSS.
In my case, I use LimeSurvey on your servers. Can I also use templates from bootswatch.com to change the default one?
Copy/paste into custom.css doesn't do anything.

My version is 3.6.2

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 11 months ago #167400 by Joffm
Replied by Joffm on topic Change of colors
Hi, krosser,

the bootswatch themes are included.
You can select them in "options"




Here as example "cerulean"


Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: krosser
The topic has been locked.
More
5 years 11 months ago #167403 by krosser
Replied by krosser on topic Change of colors
Oh, so they are the same. Alright.

But Joffm, do you by any chance know the syntax for CSS for this theme? I've been asking around and trying to find out why I cannot change the theme.. This should be simple, I know, but for some reason the Bootstarp syntax doesn't work here.

Here is what I use: stackoverflow.com/questions/18529274/cha...in-twitter-bootstrap

I guess you've seen my other post regarding colour change in Vanilla. It's the same issue with Bootstrap.

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 11 months ago #167444 by Joffm
Replied by Joffm on topic Change of colors
Hi, krosser,

in my opinion there are only very few of us - the forum volunteers - who are familiar with the new theme concept.
And to be honest, at the moment I personally am not willing to invest some time in it.

Do I remember right, you are using the pro version?
So what does the LS support say about it?

Hopefully afterwards you can share this with us.

Sorry
Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
More
5 years 11 months ago #167497 by krosser
Replied by krosser on topic Change of colors
Yes, I use the pro expert license. I've asked the support team before to help out with JS coding and they don't provide such guidance.

But regarding the CSS code use, it should be the same regardless of LS version. Don't you think?

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 11 months ago #167499 by tpartner
Replied by tpartner on topic Change of colors

Copy/paste into custom.css doesn't do anything.

It should work.

As a test, I pasted the default CSS from one of Louis' suggested generators (work.smarchal.com/twbscolor/) into custom.css of an extension of the vanilla theme and got this result.




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: krosser
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 11 months ago #167507 by Joffm
Replied by Joffm on topic Change of colors
Hi, krosser,

try by emptying your caches.

Worked for me yesterday.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: krosser
The topic has been locked.
More
5 years 11 months ago #167666 by krosser
Replied by krosser on topic Change of colors
I've tried to add the CSS code from this generator - work.smarchal.com/twbscolor/

And I'd like to comment here (for others who might be dealing with this) that you should only use Bootstrap 3.3.2 and/or 3.3.7 to get the fully working CSS styling for the LS Vanilla and Bootswatch. Because the version 4.0.0 doesn't work for all elements in the navbar. The hyperlinks and menus won't be changed.

Here is a screenshot with the code for 4.0.0


Here is 3.3.2


The color is different because I changed several times.

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose