Changing header background with CSS

More
5 months 2 weeks ago #166709 by krosser
krosser created the topic: Changing header background with CSS
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
.navbar-default {
    background-color:  #0080FF;
}

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



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.14 hosted on LS servers, not installed locally.
Attachments:

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

More
5 months 2 weeks ago #166711 by tpartner
tpartner replied the 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.

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

More
5 months 2 weeks ago #166717 by krosser
krosser replied the topic: Changing header background with CSS
LimeSurvey 3.6

Theme - vanilla

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

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

More
5 months 2 weeks ago - 5 months 2 weeks ago #166718 by krosser
krosser replied the 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.14 hosted on LS servers, not installed locally.
Last Edit: 5 months 2 weeks ago by krosser.

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

More
5 months 2 weeks ago #166741 by tpartner
tpartner replied the 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.

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

More
5 months 2 weeks ago - 5 months 2 weeks ago #166782 by LouisGac
LouisGac replied the 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: 5 months 2 weeks ago by LouisGac.
The following user(s) said Thank You: krosser

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

More
5 months 2 weeks ago #166843 by krosser
krosser replied the 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.14 hosted on LS servers, not installed locally.
The following user(s) said Thank You: LouisGac

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

More
5 months 5 days ago - 5 months 5 days ago #167395 by krosser
krosser replied the 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:
.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.14 hosted on LS servers, not installed locally.
Attachments:
Last Edit: 5 months 5 days ago by krosser. Reason: added version number

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

More
5 months 5 days ago #167402 by LouisGac
LouisGac replied the topic: Changing header background with CSS

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

More
5 months 5 days ago #167405 by krosser
krosser replied the topic: Changing header background with CSS

LouisGac wrote: manual.limesurvey.org/New_Template_Syste...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.14 hosted on LS servers, not installed locally.

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

More
5 months 5 days ago - 5 months 5 days ago #167409 by LouisGac
LouisGac replied the 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: 5 months 5 days ago by LouisGac.

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

More
5 months 5 days ago #167413 by krosser
krosser replied the 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.






I'm using the latest LS 3.14 hosted on LS servers, not installed locally.
Attachments:

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

More
5 months 5 days ago #167415 by LouisGac
LouisGac replied the topic: Changing header background with CSS
check if your themes is really loaded.
Its name should appear in the CSS classes of the body element:

<body class=" vanilla extends_vanilla_01 font-noto lang-en " >

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

More
5 months 5 days ago #167420 by tpartner
tpartner replied the topic: Changing header background with CSS
You can use browser developer tools (F12) to see exactly what CSS rules are driving the appearance.

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

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

More
5 months 5 days ago - 5 months 5 days ago #167422 by krosser
krosser replied the topic: Changing header background with CSS
Well, it looks like it loads from the extended..







If you guys can help me figure this out, it would be awesome... I'm battling several days with this..

I'm using the latest LS 3.14 hosted on LS servers, not installed locally.
Attachments:
Last Edit: 5 months 5 days ago by krosser.

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!