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
  • workloopteam's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 6 months ago #174206 by workloopteam
Hi Team,

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
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 6 months ago - 5 years 6 months ago #174219 by holch
I think the problem is your code. Because its actually exactly doing what you are telling it to do.
Code:
{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.

Last edit: 5 years 6 months ago by holch.
The following user(s) said Thank You: workloopteam
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 6 months ago #174259 by DenisChenu

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;}

opacity is applied to all content inside block. If you want only at background : use rgba on all background.

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: workloopteam
The topic has been locked.
  • workloopteam
  • workloopteam's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 6 months ago #174361 by workloopteam
Thanks Holsch/ Denis. My first post and impressed with the community response.

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"
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 6 months ago #174364 by DenisChenu

workloopteam wrote: …

Answer was to use the global advanced theme options and then made the following updates:


"questionbackgroundcolor":"transparent","questionborder":"off","questioncontainershadow":"off"

Ah yes, you're right … i think it's an issue in the template system.

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.
The topic has been locked.
  • workloopteam
  • workloopteam's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 6 months ago #174373 by workloopteam
Denis. Is there an override option to re-order so custom.css is ordered last?
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 6 months ago #174381 by DenisChenu
Not really , but you can add a class name : i don't take time to test,

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.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 6 months ago #174416 by tpartner

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

Isn't the order set in the config.xml file?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 6 months ago - 5 years 6 months ago #174423 by DenisChenu

tpartner wrote: Isn't the order set in the config.xml file?

I don't think there are an order for template option : css added inlined …

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.
Last edit: 5 years 6 months ago by DenisChenu.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 6 months ago #174429 by tpartner
Then maybe that would be the feature request.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 6 months ago #174431 by DenisChenu

tpartner wrote: Then maybe that would be the feature request.

A bug ? No ?

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.
The topic has been locked.
  • LouisGac
  • LouisGac's Avatar
  • Visitor
  • Visitor
5 years 6 months ago #174470 by LouisGac

DenisChenu wrote:

tpartner wrote: Then maybe that would be the feature request.

A bug ? No ?

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.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose