Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

BACKGROUND-COLOR CHANGE FOR "NAVBAR", "NAVBAR-BRAN" AND "QUESTION.TITLE/VALID"

More
1 year 4 months ago #260085 by MariAngelesCalvo
BACKGROUND-COLOR CHANGE FOR "NAVBAR", "NAVBAR-BRAN" AND "QUESTION.TITLE/VALID" was created by MariAngelesCalvo
Please help us help you and fill where relevant:
Your LimeSurvey version: 6.5.2
Own server or LimeSurvey hosting: LimeSurvey hosting
Survey theme/template: Vanilla, Bootswatch or Fruity
==================
HI! 
I have recently updated LimeSurvey to 6.5.2 version and my theme templates are no longer usable. I need to change the background colour of the "navbar", "navbar-brand", "question.title/valid" elements (the background colour of the question text), but using the codes and actions from previous versions is not working. E.G.:

Theme editor --> Custom.css/Theme.css: ".navbar .navbar-brand { background-color: #FFFFFF }

Do you know what codes I can use to change the background colour of these elements in the "Vanilla", "bootswatch" or "fruity" themes? Where should I insert them?

Thanks for your help!

Best regards,
Mª Ángeles. 

https://drive.google.com/file/d/1--Lvvu43XRnogi7ODCFiELoyeyW8luGO/view?usp=drive_link
[img

Please Log in to join the conversation.

More
1 year 4 months ago #260086 by Joffm
Replied by Joffm on topic BACKGROUND-COLOR CHANGE FOR "NAVBAR", "NAVBAR-BRAN" AND "QUESTION.TITLE/VALID"
Hi,
investigate with the webdevelopmemnt tool of your browser (F12)

To chnage the background color generally you may set the color
Code:
.bg-primary {
   background-color: maroon !important;
}
 

Joffm
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
1 year 4 months ago #260090 by MariAngelesCalvo
Replied by MariAngelesCalvo on topic BACKGROUND-COLOR CHANGE FOR "NAVBAR", "NAVBAR-BRAN" AND "QUESTION.TITLE/VALID"
Dear Joffm,

thank's for your quick reply! But I don't think the solution has worked. I saved the code in both the "custom.css" and "theme.css" screens and it didn't change the colour of the ".navbar" or the ".navbar-brand". With F12 I have not been able to locate the colour either and the most I have been able to do is to "patch" the colour in the bar. What I managed to change was to search for "navbar" and add the code " background-color: #6b8e23; "... Do you think you could help me to know how to change the colour of the whole bar?Other alternatives that I have tried and that worked in previous versions, but in this 6.5.2 are not working:".navbar-default { background-color: #3c3c3c; }".navbar {Background-color: #6b8e23;}.navbar .navbar-brand {Colour: #6b8e23;Background-color: #6b8e23;}.navbar .navbar-brand:hover,.navbar .navbar-brand:focus {Colour: #FFFFFFFF;Background-color: #6b8e23;} "In the Vanilla theme I did manage to change the background-colour of the title of the question. I'm attaching a screenshot of what happened with the ".navbar" and the theme for what it's worth.

Thank's, again!   

File Attachment:

File Name: extends_vanilla.zip
File Size:114.58 KB

File Attachment:

File Name: extends_vanilla.zip
File Size:114.58 KB

Please Log in to join the conversation.

More
1 year 4 months ago - 1 year 4 months ago #260091 by Joffm
Replied by Joffm on topic BACKGROUND-COLOR CHANGE FOR "NAVBAR", "NAVBAR-BRAN" AND "QUESTION.TITLE/VALID"
When I open the webdevelopment tool
I see this (in theme "bootswatch")
 
As you see the background color is set to "maroon.

Now when you investigate the navbar you see that here the class ".bg-light" is affected
 

Adding both to the "custom.css"
 

 

Or you address the navbar and other elements directly like
Code:
.navbar {
  background-color: yellow !important;
}


to get this
 

I do not see a real issue.


And at the beginning you showed "bootswatch". But now you talk about "vanilla".
Ths is different.
As you will find out the "question-title-container" has no added class "bg-primary". So you have to set the container's background color.
Code:
.question-title-container {
  background-color: yellow !important;
}


And fruity might be different as well.
Often you have to specify it, like
.fruity .bg-light {..

So investigate and try.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 year 4 months ago by Joffm.
The following user(s) said Thank You: MariAngelesCalvo

Please Log in to join the conversation.

More
1 year 4 months ago #260092 by MariAngelesCalvo
Replied by MariAngelesCalvo on topic BACKGROUND-COLOR CHANGE FOR "NAVBAR", "NAVBAR-BRAN" AND "QUESTION.TITLE/VALID"
Hello, Joffm!

Now I have been able to adjust the background colours I needed. Thank you very much!

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source