- Posts: 23
- Thank you received: 6
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Asset Manager loads css in different order with debug=1
- aellison9
- Topic Author
- Offline
- Junior Member
$config = '3.9.0';
$config = 349;
$config = '180604';
$config = true;
$config = '30036';
I have extended the Fruity theme and added some CSS into the custom.css file. I also have a custom question theme with CSS that is intended to override some settings within custom.css. I know I can accomplish my intent by manipulating the specificity on some of the directives but that is not the intent of this question.
My question is why is the CSS loaded in a different order when debug is on or off? With debug = 1, I do not have to for specificity using the !important directive. With debug = 0, the CSS loads in a different order requiring specificity using the !important directive.
I have attached two screen shots from the chrome dev tools showing the different CSS load order for the same question within the same survey.
I appreciate any insight as to why this might be occurring.
- DenisChenu
- Offline
- LimeSurvey Community Team
- Posts: 13597
- Thank you received: 2487
I think it's an issue and must be reported.
And i think the good order must be
- All LimeSurvey core css
- Question template css
- Survey theme css
Survey theme must be the last, always (and more for custom.css)
If you can : update to last version and report the issue www.limesurvey.org/community/bug-tracker
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: 10098
- Thank you received: 3589
- Core styles CSS
- Custom survey themes CSS
- Custom question theme 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: 13597
- Thank you received: 2487
But then : admin GUI don't have a clean solution to update css of question template.tpartner wrote: the questions are more granular and can be placed in any theme so should override theme styles.
I really think question template mus be before for this reason
Question template can easily add own class, not in «default» theme.
For example :
<input class="form-control my-form-control">
And the question css have .my-form-control.form-control{background:red}
Or use .myquestion-template .form-control{background:red}
then Survey theme css can set .myquestion-template .form-control{background:orange}
Really more easily
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.
- DenisChenu
- Offline
- LimeSurvey Community Team
- Posts: 13597
- Thank you received: 2487
If you set 2 radio question, one with your template one without : your css apply to the 2 question.
You must restrict the css to your template … something like
.questionRadio .label-placement{…}
@tparner : i think css class of question for Question template have automatically set to question template name. Don't seem to be. can you confirm ?
I think it's the solution : here : github.com/LimeSurvey/LimeSurvey/blob/50...ntimeHelper.php#L387
Set the question class to : "core-class question-template-class"
No ?
PS : adding the template name to question class here : github.com/LimeSurvey/LimeSurvey/blob/50...timeHelper.php#L1703
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: 10098
- Thank you received: 3589
Yes, you can enforce rules by making them more specific but that works both ways.
Regarding your comment about the GUI, I assume that at some point it will be possible to edit custom question themes as we now can with survey themes.
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: 13597
- Thank you received: 2487
Maybe in one survey you want : green color, and in another red color for same question template. Then : if question template is loaded after Survey template : only solution for such situation is to use !important;
Related feature request : bugs.limesurvey.org/view.php?id=13883
PS :
For css : i'm always to more global to more specific, then here it's
- Question type (core class and css)
- Question (question class and css)
- Question in THIS survey (Survey theme class and css)
- THIS Question in THIS survey (Survey theme class and css + Question setting class)
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.
- aellison9
- Topic Author
- Offline
- Junior Member
- Posts: 23
- Thank you received: 6
@tpartner - using your cardSort custom question theme as an example and assuming the Survey Theme custom.css loads before cardSort.css: if I have different survey themes and want to manipulate the colors of the "cards", then I have to include the class in my custom.css, change the color, and flag the specificity as !important. If the custom question themes loaded before the Survey Themes, I would still need to include the class in my custom.css but it would not encumber me with specificity requirements and in my opinion, be the cleaner option.
On the flip side, my custom question theme incorporates several question types (list-radio, array, multiple-choice, etc) which essentially leverage the same CSS (and classes) so it made more sense to incorporate it into the Survey Theme custom.css and use the Question Theme .css file for anything that might be slightly different in the implementation.
At the end of the day, we just need a consistent load order between debug and non-debug. At least then we can work around any nuances without being overly convoluted. I will upgrade to the latest to see if the issue persists. More to come.
@denischenu - I am not sure this makes sense to me.
@aellison9 : there are an issue with your system.
If you set 2 radio question, one with your template one without : your css apply to the 2 question.
You must restrict the css to your template … something like
.questionRadio .label-placement{…}
.label-placement is a class specific to my custom question theme and assigned to the label element within the .twig for the view. Unless I make both questions to use my custom question theme, then only 1 question would be impacted by the css. If an element doesn't have the class, then the styling will not apply. This is the reason I essentially extended some of the base question types with my custom question theme.
- LouisGac
- Visitor
- jelo
- Offline
- Platinum Member
- Posts: 5033
- Thank you received: 1257
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
- tpartner
- Offline
- LimeSurvey Community Team
- Posts: 10098
- Thank you received: 3589
@aellison9, that's not true. Yes, you need to add a rule to the survey theme CSS file (as you would anyway), but simply specify the survey theme class. The <body> element is assigned a theme-specific class for situations like this.using your cardSort custom question theme as an example and assuming the Survey Theme custom.css loads before cardSort.css: if I have different survey themes and want to manipulate the colors of the "cards", then I have to include the class in my custom.css, change the color, and flag the specificity as !important.
.your_theme_name .card-sort-question .card { background-color: purple; }
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: 13597
- Thank you received: 2487
OK,aellison9 wrote: …
@denischenu - I am not sure this makes sense to me.
@aellison9 : there are an issue with your system.
If you set 2 radio question, one with your template one without : your css apply to the 2 question.
You must restrict the css to your template … something like
.questionRadio .label-placement{…}
.label-placement is a class specific to my custom question theme and assigned to the label element within the .twig for the view. Unless I make both questions to use my custom question theme, then only 1 question would be impacted by the css. If an element doesn't have the class, then the styling will not apply. This is the reason I essentially extended some of the base question types with my custom question theme.
Then you need survey theme replace Question theme .label-placement . Sorry for missunderstanding , i dond't have your theme for testing
Oh tight , it fix the issue . Question : did this apply to child themes ? vanilla3 extend vanilla2 extend vanilla : have 3 Survey theme class ?tparner wrote: The <body> element is assigned a theme-specific class for situations like this.
But i still think less is better . In general : i think Question theme dev create new specific class for new Question and set a "default style" in class. LimeSurvey admin can set another style more easily (and in future : have css for each survey ).
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.