Welcome to the LimeSurvey Community Forum

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

Changing header background with CSS

krosser
Topic Author
Offline
Elite Member

More

6 years 7 months ago #166709 by krosser

Changing header background with CSS was created by krosser

Hi guys,

I know it's fairly simple but for some reason the background color is messed up when I try to edit it.

I want to change it to blue instead of grey by default.

When I add

Code:

.navbar-default {
    background-color:  #0080FF;
}

into custom.css, I get this pinkish color (see attached pic).

Screenshot-2018-4-4LimeSurveyProfessional-Youronlinesurveyservice.png

When I delete the CSS code, it stays the same.
I dunno, maybe I add the code in the wrong place. But I don't get it why it doesn't revert when I delete it...
Any ideas?

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.

Attachments:

...veyservice.png

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

6 years 7 months ago #166711 by tpartner

Replied by tpartner on topic Changing header background with CSS

LimeSurvey version?

Template?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

krosser
Topic Author
Offline
Elite Member

More

6 years 7 months ago #166717 by krosser

Replied by krosser on topic Changing header background with CSS

LimeSurvey 3.6

Theme - vanilla

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.

The topic has been locked.

krosser
Topic Author
Offline
Elite Member

More

6 years 7 months ago - 6 years 7 months ago #166718 by krosser

Replied by krosser on topic Changing header background with CSS

I've tried to do it in Fruity theme and that CSS code didn't have any effect. So, I guess it's either the wrong place to add it or it's the wrong one..

Actually, any CSS code I add to custom.css has no impact on the theme. It stays the same in the preview.

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.

Last edit: 6 years 7 months ago by krosser.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

6 years 7 months ago #166741 by tpartner

Replied by tpartner on topic Changing header background with CSS

Well, now I have two answers to the question "Template?".

Did you extend a core theme? If so, which one?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

LouisGac
Visitor

6 years 7 months ago - 6 years 7 months ago #166782 by LouisGac

Replied by LouisGac on topic Changing header background with CSS

If you're modifying the file directly into the source code you must turn on debug mode to turn off the asset manager. Else, the system is not using the file you're editing, but rather a copy of it in the tmp/ directory.

Last edit: 6 years 7 months ago by LouisGac.

The topic has been locked.

krosser
Topic Author
Offline
Elite Member

More

6 years 7 months ago #166843 by krosser

Replied by krosser on topic Changing header background with CSS

Theme is a template

We got it.

It was Vanilla that got this crazy color. But I've found out that my css code wasn't right for LimeSurvey.

It needs to be

.navbar.navbar-default instead of just .navbar-default

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.

The following user(s) said Thank You: LouisGac

The topic has been locked.

krosser
Topic Author
Offline
Elite Member

More

6 years 7 months ago - 6 years 7 months ago #167395 by krosser

Replied by krosser on topic Changing header background with CSS

Hi guys,

Has anyone experienced this issue with adding your CSS code to custom.css?
I added a CSS code to change colours of navbar and hyperlinks. At first, it worked (with overriding), but then it just switched back to default colours and even extra overriding doesn't help...

For example, I have had blue navbar and white hyperlinks, highlighted in orange. I'm using Vanilla theme.
The codes:

Code:

.navbar .navbar .navbar-default {
    background-color: #008dc9;
}
 
.navbar .navbar-default .navbar-nav > li > a {
    color: #ffffff;
}
 
.navbar .navbar-default .navbar-nav > li > a:hover {
    text-decoration: underline;
    color: #D86422;
}

Today it's switched back to grey and doesn't change...

LimeSurvey version 3.6.2

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.

Attachments:

Capture.PNG

Last edit: 6 years 7 months ago by krosser. Reason: added version number

The topic has been locked.

LouisGac
Visitor

6 years 7 months ago #167402 by LouisGac

Replied by LouisGac on topic Changing header background with CSS

www.limesurvey.org/manual/New_Template_S...not_applied.3F.22.29

The topic has been locked.

krosser
Topic Author
Offline
Elite Member

More

6 years 7 months ago #167405 by krosser

Replied by krosser on topic Changing header background with CSS

LouisGac wrote: www.limesurvey.org/manual/New_Template_S...not_applied.3F.22.29

Alright, but I actually use the LS Theme Editor. I haven't used anything else, since I didn't install LS on external servers.
And I've just tried to clear assets cache now, but it didn't work for applying the CSS code to extended Vanilla theme, in my case.

What can be the reason?

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.

The topic has been locked.

LouisGac
Visitor

6 years 7 months ago - 6 years 7 months ago #167409 by LouisGac

Replied by LouisGac on topic Changing header background with CSS

you can use the name of your extended theme to raise the specificity of your css selector:

.extended_vanilla .navbar .navbar .navbar-default ...

Last edit: 6 years 7 months ago by LouisGac.

The topic has been locked.

krosser
Topic Author
Offline
Elite Member

More

6 years 7 months ago #167413 by krosser

Replied by krosser on topic Changing header background with CSS

LouisGac wrote: you can use the name of your extended theme to raise the specificity of your css selector:

.extended_vanilla .navbar .navbar .navbar-default ...

So, the name of my extended Vanilla theme is extends_vanilla_01.
When I've added it, it didn't make a difference. I've also cleared cache just to make sure.