Change of colors

More
11 months 2 weeks ago #158156 by oumaimaf
oumaimaf created the topic: 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 !!
Attachments:

Please Log in or Create an account to join the conversation.

More
11 months 2 weeks ago - 11 months 2 weeks ago #158199 by Joffm
Joffm replied the topic: Change of colors
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


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last Edit: 11 months 2 weeks ago by Joffm.

Please Log in or Create an account to join the conversation.

More
11 months 2 weeks ago - 11 months 2 weeks ago #158219 by LouisGac
LouisGac replied the 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: 11 months 2 weeks ago by LouisGac.

Please Log in or Create an account to join the conversation.

More
3 months 4 weeks ago #167397 by krosser
krosser replied the 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.14 hosted by LS team, not installed locally.

Please Log in or Create an account to join the conversation.

More
3 months 4 weeks ago #167400 by Joffm
Joffm replied the 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
Attachments:
The following user(s) said Thank You: krosser

Please Log in or Create an account to join the conversation.

More
3 months 4 weeks ago #167403 by krosser
krosser replied the 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.14 hosted by LS team, not installed locally.

Please Log in or Create an account to join the conversation.

More
3 months 4 weeks ago #167406 by LouisGac
The following user(s) said Thank You: krosser

Please Log in or Create an account to join the conversation.

More
3 months 4 weeks ago #167444 by Joffm
Joffm replied the 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

Please Log in or Create an account to join the conversation.

More
3 months 4 weeks ago #167497 by krosser
krosser replied the 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.14 hosted by LS team, not installed locally.

Please Log in or Create an account to join the conversation.

More
3 months 4 weeks ago #167499 by tpartner
tpartner replied the 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.
Attachments:
The following user(s) said Thank You: krosser

Please Log in or Create an account to join the conversation.

More
3 months 4 weeks ago #167507 by Joffm
Joffm replied the 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

Please Log in or Create an account to join the conversation.

More
3 months 3 weeks ago #167666 by krosser
krosser replied the 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.14 hosted by LS team, not installed locally.
Attachments:

Please Log in or Create an account to join the conversation.

More
3 months 3 weeks ago #167669 by Joffm
Joffm replied the 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

Please Log in or Create an account to join the conversation.

More
3 months 3 weeks ago #167685 by krosser
krosser replied the 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.14 hosted by LS team, not installed locally.

Please Log in or Create an account to join the conversation.

More
3 months 3 weeks ago #167737 by LouisGac
LouisGac replied the topic: Change of colors
btw: I fixed the auto-refresh of assets when saving in theme editor.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!