Change of colors

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 !!

https://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

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.

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

Hi, krosser,

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




Here as example "cerulean"


Joffm

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.

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/

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

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?

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.

Hi, krosser,

try by emptying your caches.

Worked for me yesterday.

Joffm

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.

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.

I see it's in the intro , and I usually skip them.

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...

btw: I fixed the auto-refresh of assets when saving in theme editor.