Welcome to the LimeSurvey Community Forum

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

Some additional CSS Question regarding an extended fruity

  • Mordred
  • Mordred's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
1 year 7 months ago - 1 year 7 months ago #231863 by Mordred
Please help us help you and fill where relevant:
Your LimeSurvey version: Version 5.3.32+220817
Own server or LimeSurvey hosting:own server
Survey theme/template:extension of fruity
==================
Hi there,
question in advance: is there a comprehensive guide to coloring fruity anywhere?

Sadly i have a very short deadline and never colored limesurvey i always used default.

So i have to change the following for a custumer:
  • The small green question marks at the upper left of a questions needs to be black (done)
    .fruity .text-info {
      color: #000;
    }
  • The Border arround the question needs to disappear or to be black both would be ok
  • all buttons need to be black (seems done)
    #ls-button-submit{
        background-color: #000;
    }
  • the green shadow/outline of active text boxes needs to disappear (done)
    .fruity .form-control:focus {
        border: 1px solid #000;
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.6);
  • the red asterisk in question boxes needs to be black too (done)
    .fruity .text-danger{
        color:#000;
    }
i am trying to look up the classes in the source but it is a hit and miss so far. Help would be highly appreciated
Last edit: 1 year 7 months ago by Mordred.

Please Log in to join the conversation.

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 7 months ago #231864 by DenisChenu

Sadly i have a very short deadline and never colored limesurvey i always used default.

…  LOL
Updating a theme can not be done in some hour … clearly …

Else Fruity is bootstrap based … a alternative solution is to use developer tool of your briwser

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The following user(s) said Thank You: Mordred

Please Log in to join the conversation.

  • Mordred
  • Mordred's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
1 year 7 months ago - 1 year 7 months ago #231865 by Mordred
sadly not my decision i have been given till tommorow i said that to be "optimistic".

i am using the dev tools but some elements have several classes and i have to try and error.

question mark and asterisk are done

The green outline on active textboxes gives me a headache. It seems to be the class "form-control" but i don't find anything about the green outline in the dev-tools
Last edit: 1 year 7 months ago by Mordred.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 7 months ago #231869 by Joffm

and i have to try and error.

We all do it this way.

Some hints:
1. Buttons
[url] forums.limesurvey.org/forum/dutch-forum/...abloon-fruity#209996 [/url]

2. Red asterik
[url] forums.limesurvey.org/forum/design-issue...tom-css-v3-28#231233 [/url]

3. question mark
Do you talk about the exclamation mark of the tip (which is in the upper left by default) or the question mark of the help text (which is below the question container by default)?
Both are easily to find with the web development tool. ".ls-questionhelp:before" resp. ".fa-exclamation-circle:before"
Add a "color" and set it to your desired color.

4. border
Same. Use the web development tool.
Set the border and the box-shadow of the question container to "none"

5. focussed text box
Same. Use the web development tool.
You will find the "normal" text box.
You may add ":focus" and set the desired values.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: Mordred

Please Log in to join the conversation.

  • Mordred
  • Mordred's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
1 year 7 months ago - 1 year 7 months ago #231870 by Mordred
thx i already got them all except the border of the complete box.

buttons shadow etc are done

i have to admit i had to figure out the dev tools a bit more.

i have added the rules i used in the startpost
Code:
#ls-button-submit{
    background-color: #000;
}
.fruity .text-info {
  color: #000;
}
.fruity .text-danger{
    color:#000;
}
.fruity .form-control:focus {
    border: 1px solid #000;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(0,0,0,0.6);
}  
.fruity .btn-primary {
    color: #fff;
    background-color: #000;
    border: 1px solid #000;
}

Do you spot anything stupid?
Last edit: 1 year 7 months ago by Mordred.

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose