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

I think the problem is your code. Because its actually exactly doing what you are telling it to do.

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.

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.

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"

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

Denis. Is there an override option to re-order so custom.css is ordered last?

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

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?

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

Then maybe that would be the feature request.

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.

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.