Image question needing a transparent question container

More
1 year 1 month 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
Attachments:

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

LimeSurvey Partners
More
1 year 1 month ago - 1 year 1 month ago #174219 by holch
I think the problem is your code. Because its actually exactly doing what you are telling it to do.
{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'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
Last edit: 1 year 1 month ago by holch.
The following user(s) said Thank You: workloopteam

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

More
1 year 1 month 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 .
An error happen ? Before make a new topic : remind the Debug mode .
The following user(s) said Thank You: workloopteam

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

More
1 year 1 month 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"

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

More
1 year 1 month 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 .
An error happen ? Before make a new topic : remind the Debug mode .

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

More
1 year 1 month ago #174373 by workloopteam
Denis. Is there an override option to re-order so custom.css is ordered last?

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

More
1 year 4 weeks 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 .
An error happen ? Before make a new topic : remind the Debug mode .

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

More
1 year 4 weeks 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.
Official LimeSurvey Partner - partnersurveys.com

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

More
1 year 4 weeks ago - 1 year 4 weeks 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 .
An error happen ? Before make a new topic : remind the Debug mode .
Attachments:
Last edit: 1 year 4 weeks ago by DenisChenu.

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

More
1 year 4 weeks 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.
Official LimeSurvey Partner - partnersurveys.com

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

More
1 year 4 weeks 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 .
An error happen ? Before make a new topic : remind the Debug mode .
The following user(s) said Thank You: LouisGac

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

More
1 year 4 weeks 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.

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

More
1 year 4 weeks ago #174474 by DenisChenu

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 .
An error happen ? Before make a new topic : remind the Debug mode .

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

More
1 year 1 week ago #175420 by workloopteam
Thanks Denis/ Tony. Appreciate the effort.

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!