- Posts: 14
- Thank you received: 3
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Image question needing a transparent question container
- workloopteam
- Topic Author
- Offline
- New Member
I'm trying to create a multi-select image question with a transparent question container (using LS 3.x).
I've managed to isolate the relevant classes (refer to image: "Original") but when applying transparency or opacity, the text and image also adopt the change (refer to image: "Opacity Applied"). Is there a way to apply the transparency without impacting the text and image?
Code I've been trying to adapt in custom.css is:
.group-container { background-color: rgb(255,0,0);opacity:0.2;}
.imageselect-container { background-color: rgb(255,0,0);opacity:0.2;}
.answer-container { background-color: rgb(255,0,0);opacity:0.2;}
.question-title-container {background-color: rgba(255,0,0,0.2); font-weight: bold; color: #0743a9; }
.question-valid-container { background-color: rgb(255,0,0);opacity:0.2;}
Many thanks
- holch
- Offline
- LimeSurvey Community Team
- Posts: 11758
- Thank you received: 2753
{background-color: rgb(255,0,0); opacity:0.2;}
As you have a ";" between background-color and opacity, opacity is applied to the whole classe you defined before the "{".
You will probably need to use rgba: stackoverflow.com/questions/5135019/css-...r-not-the-text-on-it
OK< I see that further down you use rgba already. My guess would be that at one point the opacity is applied to everything further down the line.
Try to remove all the opacity and background colors that you have added and then start from scratch. I guess you should only apply background color to one of those boxes. The others probably don't have any as default.
I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.
- DenisChenu
- Offline
- LimeSurvey Community Team
- Posts: 13935
- Thank you received: 2551
opacity is applied to all content inside block. If you want only at background : use rgba on all background.workloopteam wrote: Hi Team,
.group-container { background-color: rgb(255,0,0);opacity:0.2;}
.imageselect-container { background-color: rgb(255,0,0);opacity:0.2;}
.answer-container { background-color: rgb(255,0,0);opacity:0.2;}
.question-title-container {background-color: rgba(255,0,0,0.2); font-weight: bold; color: #0743a9; }
.question-valid-container { background-color: rgb(255,0,0);opacity:0.2;}
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.
- workloopteam
- Topic Author
- Offline
- New Member
- Posts: 14
- Thank you received: 3
I'd tried to apply custom.css changes to individual/ collective classes using both opacity, RGBA and "transparant". For info, the only specific class which needs to be updated is question-container. However, for some reason, custom.css wasn't overriding the default theme when rendering the page so it still didn't work.
Answer was to use the global advanced theme options and then made the following updates:
"questionbackgroundcolor":"transparent","questionborder":"off","questioncontainershadow":"off"
- DenisChenu
- Offline
- LimeSurvey Community Team
- Posts: 13935
- Thank you received: 2551
Ah yes, you're right … i think it's an issue in the template system.workloopteam wrote: …
Answer was to use the global advanced theme options and then made the following updates:
"questionbackgroundcolor":"transparent","questionborder":"off","questioncontainershadow":"off"
Css order are really important, and here i think we have
1. template.css
2. custome.css : your system
3. css inline by options : this was read at end, then replace YOUR css.
I try and make a bug report about this
I think we must have such system :
1. template.css
2. index.php/template/optiongenerate/survey/sid : a css file generated by PHP (and put in a asset/cache file if we can)
3. custom.css
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.
- workloopteam
- Topic Author
- Offline
- New Member
- Posts: 14
- Thank you received: 3
- DenisChenu
- Offline
- LimeSurvey Community Team
- Posts: 13935
- Thank you received: 2551
But in css if you have
.class1 {color:red}
.class1 {color:green}
.class1 {color:blue}
=> class1 are blue
You can do
.class1 {color:red}
body .class1 {color:green}
.class1 {color:blue}
=> class1 are green
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.
- tpartner
- Offline
- LimeSurvey Community Team
- Posts: 10634
- Thank you received: 3698
Isn't the order set in the config.xml file?DenisChenu wrote: Css order are really important, and here i think we have
1. template.css
2. custome.css : your system
3. css inline by options : this was read at end, then replace YOUR css.
I try and make a bug report about this
I think we must have such system :
1. template.css
2. index.php/template/optiongenerate/survey/sid : a css file generated by PHP (and put in a asset/cache file if we can)
3. custom.css
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
- DenisChenu
- Offline
- LimeSurvey Community Team
- Posts: 13935
- Thank you received: 2551
I don't think there are an order for template option : css added inlined …tpartner wrote: Isn't the order set in the config.xml file?
master.sondages.pro/182575?newtest=Y&lang=en
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.
- tpartner
- Offline
- LimeSurvey Community Team
- Posts: 10634
- Thank you received: 3698
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
- DenisChenu
- Offline
- LimeSurvey Community Team
- Posts: 13935
- Thank you received: 2551
A bug ? No ?tpartner wrote: Then maybe that would be the feature request.
In my opinion : option must generate a option.css file, updated when option of survey or global are updated. After we can register like all other css files.
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.
- LouisGac
- Visitor
DenisChenu wrote:
A bug ? No ?tpartner wrote: Then maybe that would be the feature request.
In my opinion : option must generate a option.css file, updated when option of survey or global are updated. After we can register like all other css files.
that would be the best way to do.