Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Change of colors

More
7 years 11 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.
More
7 years 11 months ago - 7 years 11 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: 7 years 11 months ago by Joffm.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • New Member
  • New Member
More
7 years 11 months ago - 7 years 11 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: 7 years 11 months ago by LouisGac.
The topic has been locked.
More
7 years 4 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.
More
7 years 4 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
7 years 4 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
  • New Member
  • New Member
More
7 years 4 months ago #167406 by LouisGac
Replied by LouisGac on topic Change of colors
1. Read Bootstrap documentation:
getbootstrap.com/docs/3.3/components/#navbar

2. Read more tutorials/articles about it:
www.quackit.com/bootstrap/bootstrap_3/tu...ootstrap_navbars.cfm
bootstrapious.com/p/bootstrap-navbar

3. Try some generators
bootstrap3-menu.codedorigin.com/#sthash.MdgeXN3z.dpbs
work.smarchal.com/twbscolor/
bootstrapdesigntools.com/tools/bootstrap-menu-builder/
The topic has been locked.
More
7 years 4 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
7 years 4 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.
More
7 years 4 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.
More
7 years 4 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
7 years 4 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.
More
7 years 4 months ago #167669 by Joffm
Replied by Joffm on topic Change of colors
Thank you, krosser, for mentioning this.

Though it is said in the manual

Since LimeSurvey 2.50, the theme engine use Bootstrap 3 as CSS framework. Bootstrap 3 being a standard framework, developers will find a lot of documentation, tutorials and forum threads about it on Internet.

I know that only a few user read it.

So always a good idea to remind people.
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
More
7 years 4 months ago #167685 by krosser
Replied by krosser on topic Change of colors
I see it's in the intro , and I usually skip them. :D

But frankly, a lot of information in manuals is outdated/obsolete (like, for instance, in the above manual it talks about .pstpl files in the editor, while now it's only .twig files). Lots of workarounds don't work anymore in LS 3+. You only start to understand this when you work with the platform for quite a while.
Ideally, there should be separate manuals for different versions, when there are major changes. There's a lot of info that is in one place. This is my IMHO, but I understand that the LS team doesn't have time for it. I actually don't know how big their team is...
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • New Member
  • New Member
More
7 years 4 months ago #167737 by LouisGac
Replied by LouisGac on topic Change of colors
btw: I fixed the auto-refresh of assets when saving in theme editor.
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source