Welcome to the LimeSurvey Community Forum

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

Extending the Fruity theme doesn't work

  • holch
  • holch's Avatar Topic Author
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 months ago #223605 by holch
Extending the Fruity theme doesn't work was created by holch
Please help us help you and fill where relevant:
Your LimeSurvey version: 5.2.9+220110
Own server or LimeSurvey hosting: Own Server
Theme: Copy of Fruity
==================
Not sure what I am doing wrong, but my efforts to adapt a copy of the Fruity theme just doesn't "give fruits".
My very first attempt is changing the color of the Bootstrap buttons and my changes to the custom.css just don't have any effect. I searched and found this code, but it does literally nothing.
Code:
.btn-primary  { 
  border-color :  #fff;
  color :  #FFF; 
  background-color :  #fff; 
}
 
/* Active */
 
.btn-primary .active ,  .btn-primary : active { 
  background-color :  #1eaae6; 
  color :  #FFF; 
  border-color :  #1eaae6; 
}
 
/* Normal and mouse over */
 
.btn-primary : hover { 
  background-color :  #1eaae6; 
  color :  #FFF; 
  border-color :  #1eaae6; 
}
 
/* Active and move the mouse over it */
 
.btn-primary .active : hover { 
  background-color :  #1eaae6; 
  color :  #FFF; 
  border-color :  ##1eaae6; 
}

So just to make sure that the effect is clear, I gave the buttons a white border, a white background and a white font (.btn-primary  {  border-color :  #fff; color :  #FFF; background-color :  #fff;}. This is not what I am trying to do, it is just for testing. Placed in the custom.css, shouldn't this overwrite any styling in the template.css?

I also cleaned the assets twice already. No effect on the layout. 

I haven't played with the templates for a long time, because I didn't need to and I felt it was getting more and more complicated, while I was less and less CSS / HTML savvy. But now I would like to create a nice template that matches the CI, etc. But I am already struggling with the easiest of things. What am I doing wrong??
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
  • holch
  • holch's Avatar Topic Author
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 months ago #223606 by holch
Replied by holch on topic Extending the Fruity theme doesn't work
OK, so I went even more basic and changed the color, font-weight and font-size of the question text via .question-text and that worked just fine.

So it is not a general thing for my copy of the Fruity theme, but rather a issue with the bootstrap buttons or how I address them. I might just switch to normal radio buttons for now, because the contrast between the normal state, the active state and hover are so small, that it is very hard to notice.

And then will come back to address this issue with more time. ;-)
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
  • holch
  • holch's Avatar Topic Author
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 months ago #223607 by holch
Replied by holch on topic Extending the Fruity theme doesn't work
Seems like I am really rusty, but why does this code work to change the radio button from green to red when clicked,
Code:
body .answer-item label::after {
    background-color: #ff0000;
}

while this doesn't?
Code:
.answer-item label::after {
    background-color: #ff0000;
}

I mean, what does the "body" part do here specifically? In my opinion .answer-item label::after should address the radio button just as well. Oh man, I will have to learn a lot.

;-)
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
  • holch
  • holch's Avatar Topic Author
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 months ago #223608 by holch
Replied by holch on topic Extending the Fruity theme doesn't work
OK, after a lot of testing and playing around I managed even the boot strap buttons (more or less, still can't get the font get bold, but that isn't a big deal).

So there were a lot of spaces which shouldn't have been there (copied here from the forum!), and the !important part was important as well:
Code:
/* Change bootstrap buttons */
/* Normal */
 
.btn-primary  { 
  border-color: rgb(30,170,230) !important;
  color: #FFF !important;
  background-color: rgb(30,170,230) !important;
  font-weight: bold !important;
}
 
/* Active */
 
.btn-primary.active, .btn-primary:active { 
  background-color: rgb(150,190,55) !important; 
  color: #FFF !important;
  border-color: rgb(150,190,55) !important;
}
 
/* Normal and mouse over */
 
.btn-primary:hover { 
  background-color: rgb(150,190,55) !important; 
  color: #FFF !important;
  border-color: rgb(150,190,55) !important;
}
 
/* Active and move the mouse over it */
 
.btn-primary.active:hover { 
  background-color: rgb(150,190,55) !important; 
  color: #FFF !important;
  border-color: rgb(150,190,55) !important;
}

This is what did the trick at the end.
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 3 months ago #223653 by tpartner
Replied by tpartner on topic Extending the Fruity theme doesn't work

what does the "body" part do here

This increases the specificity (strength) of the rule. Making the selector more specific allows you to override previous rules without using the !important property. The !important property should only be used as a last resort, for example to override inline styles.

- developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: holch
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source