Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Search Results (Searched for: background)
- Joffm
25 Jan 2024 21:48
Replied by Joffm on topic Implicit association test
Hi,
1. there is a question theme
[url] github.com/tpartner/LimeSurvey-Implicit-Association-Test-3x [/url]
You did not answer the question about hosting. Therefore I do not know if you are allowed to install it.
Also I do not know if it works in LS 6.x.
You may try.
2. There is a script (nearly the same), developped before it was programmed as question theme.
This works in 6.x
First the javascript code
And some styling:
Here in "fruity_twentythree" to show that it is really 6.x
And you may read this
[url] forums.limesurvey.org/forum/can-i-do-thi...tion-task-workaround [/url]
Joffm
1. there is a question theme
[url] github.com/tpartner/LimeSurvey-Implicit-Association-Test-3x [/url]
You did not answer the question about hosting. Therefore I do not know if you are allowed to install it.
Also I do not know if it works in LS 6.x.
You may try.
2. There is a script (nearly the same), developped before it was programmed as question theme.
This works in 6.x
First the javascript code
Code:
<script> // A plugin to insert an IAT interface function implicitAssociation(el, showAnswers) { $(el).each(function() { var thisQuestion = $(this); var thisQuestionHelp = $('div.ls-questionhelp', thisQuestion); var thisQuestionAnswers = $('table.subquestion-list', thisQuestion).parent(); var startTime = ''; var endTime = ''; var agent = navigator.userAgent.toLowerCase(); var mobile = false; if( /android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent) ) { // Mobile devices mobile = true; } // Some classes $(thisQuestion).addClass('iat-question'); $('tr.subquestion-list', thisQuestion).addClass('unanswered'); // Hide the question help element $(thisQuestionHelp).hide(); $(thisQuestionHelp).closest('.question-help-container').hide(); // Hide the answers if(showAnswers != true) { $('table.subquestion-list', thisQuestion).hide(); } // Insert IAT display var iatTexts = $(thisQuestionHelp).html().split('||'); var iatDisplayHTML = '<div class="iatWrapper">\ <div class="iatLeftLabel">'+iatTexts[0]+'</div>\ <div class="iatRightLabel">'+iatTexts[1]+'</div>\ <div class="iatWord"></div>\ <div class="iatInstructions">'+iatTexts[2]+'</div>\ </div>\ <div class="iatMobileButtonWrapper">\ <div class="iatButton iatLeftButton">E</div>\ <div class="iatButton iatRightButton">I</div>\ <div style="width:100%; clear:both;"></div>\ </div>'; $(thisQuestionAnswers).prepend(iatDisplayHTML); // Show a word function iatShowWord() { $('div.iatWord', thisQuestion).html($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).html()); startTime = new Date(); $(document).bind('keypress.iatKeypress', function(e) { if(e.which == 101 || e.which == 105) { var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion); $(thisRow).removeClass('unanswered'); endTime = new Date(); $('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf()); if(e.which == 101) { $('input[type="text"]:eq(0)', thisRow).val('E'); } else { $('input[type="text"]:eq(0)', thisRow).val('I'); } $(document).unbind('keypress.iatKeypress'); if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) { iatShowWord(); } else { $('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions', thisQuestion).fadeOut('slow', function() { $('div.iatWord', thisQuestion).text('done'); $('.iatWord', thisQuestion).addClass('done').fadeIn('slow'); }); } } }); } function iatShowWordMobile() { $('div.iatWord', thisQuestion).html($('tr.subquestion-list.unanswered:first .answertext', thisQuestion).text()); startTime = new Date(); $('.iatButton', thisQuestion).bind('click.iatButtonClick', function(e) { var thisRow = $('tr.subquestion-list.unanswered:eq(0)', thisQuestion); $(thisRow).removeClass('unanswered'); endTime = new Date(); $('input[type="text"]:eq(1)', thisRow).val(endTime.valueOf() - startTime.valueOf()); $('input[type="text"]:eq(0)', thisRow).val($(this).text()); $('.iatButton', thisQuestion).unbind('click.iatButtonClick'); if($('tr.subquestion-list.unanswered', thisQuestion).length > 0) { iatShowWordMobile(); } else { $('.iatLeftLabel, .iatWord, .iatRightLabel, .iatInstructions, .iatMobileButtonWrapper', thisQuestion).fadeOut('slow', function() { $('div.iatWord', thisQuestion).text(iatTexts[3]); $('.iatWord', thisQuestion).addClass('done').fadeIn('slow'); }); } }); } // Start the IAT display if(mobile == true) { // Mobile devices $('.iatMobileButtonWrapper', thisQuestion).show(); $('.iatButton', thisQuestion).bind('click.iatStartMobile', function(e) { $('.iatButton', thisQuestion).unbind('click.iatStartMobile'); iatShowWordMobile(); }); } else { $(document).bind('keypress.iatStart', function(e) { // Non-mobile devices if(e.which == 101 || e.which == 105) { $(document).unbind('keypress.iatStart'); iatShowWord(); } }); } }); } $(document).ready(function() { // Apply the IAT plugin to this question implicitAssociation('#question{QID}'); }); </script>
And some styling:
Code:
<style type="text/css"> /* IAT questions */ .iatWrapper { position: relative; width: 100%; max-width: 600px; height: 300px; margin: 0 auto; color: #D0DBE5; background-color: #2C3E50; font-size: 21px; } .iatLeftLabel { float: left; padding: 10px; } .iatRightLabel { float: right; padding: 10px; } .iatWord { position: absolute; width: 100%; top: 35%; text-align: center; font-size: 36px; color: #C4D1DE; } .iatWord.done { color: #C4D1DE; } .iatInstructions { position: absolute; width: 100%; bottom: 0px; padding-bottom: 10px; text-align: center; } .iatMobileButtonWrapper { display: none; position: relative; width: 100%; max-width: 600px; margin: 0 auto; font-size: 36px; } .iatButton { float: left; margin: 20px; width: 100px; padding: 2px 0 5px 0; border: 5px solid #233140; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; text-align: center; line-height: normal; cursor: pointer; } .iatLeftButton { float: left; } .iatRightButton { float: right; } </style>
Here in "fruity_twentythree" to show that it is really 6.x
And you may read this
[url] forums.limesurvey.org/forum/can-i-do-thi...tion-task-workaround [/url]
Joffm
- bubbagump210
19 Jan 2024 20:13 - 19 Jan 2024 20:15
- alpaalpa
15 Jan 2024 04:21
How to change the text color of the Language Picker was created by alpaalpa
Please help us help you and fill where relevant:
Your LimeSurvey version: Community Edition Version 6.4.1+240108
Own server or LimeSurvey hosting: Own server
Survey theme/template: LS_lens/Fruity
==================
I have a multi-lingual survey.
I have a survey with a dark blue background. I am trying to change the text color of the menu bar (nav-bar) to white.
However, I have not been able to change the text color of the language picker drop-down list.
I have tried many many CSS class (using 'inspect element' from developer tools in a web browser).
Below please see screen shot.
Has anyone seen same problem?
Your LimeSurvey version: Community Edition Version 6.4.1+240108
Own server or LimeSurvey hosting: Own server
Survey theme/template: LS_lens/Fruity
==================
I have a multi-lingual survey.
I have a survey with a dark blue background. I am trying to change the text color of the menu bar (nav-bar) to white.
However, I have not been able to change the text color of the language picker drop-down list.
I have tried many many CSS class (using 'inspect element' from developer tools in a web browser).
Below please see screen shot.
Has anyone seen same problem?
- Joffm
14 Dec 2023 09:15
Replied by Joffm on topic Transport & Moving-services
Again I checked, this time in "vanilla".
The same result. Everything's fine.
With these scripts
HTML:
JS to initialize the popover
And some css to align and color the header
Waiting for your lss export.
Joffm
The same result. Everything's fine.
With these scripts
HTML:
Code:
<button class="btn btn-lg btn-danger" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-toggle="popover" title="Popover title" type="button"> Click to toggle popover </button> <a class="btn btn-lg btn-danger" data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-toggle="popover" data-bs-trigger="focus" role="button" tabindex="0" title="Dismissible popover"> Dismissible popover </a> <a data-bs-content="And here's some amazing content. It's very engaging. Right?" data-bs-toggle="popover" data-bs-trigger="hover focus" role="button" tabindex="0" title="A text with popover"> Hover shows it </a>
JS to initialize the popover
Code:
<script> $(function () { $('[data-bs-toggle="popover"]').popover(); }); </script>
And some css to align and color the header
Code:
<style type="text/css"> .popover-header { margin-top:0; color:maroon; background-color: yellow; } </style>
Waiting for your lss export.
Joffm
- MaxBix
24 Nov 2023 15:50
- Joffm
24 Nov 2023 15:34
- MaxBix
24 Nov 2023 12:43
- holch
23 Nov 2023 13:46
- Joffm
18 Nov 2023 20:28 - 19 Nov 2023 12:36
Replied by Joffm on topic Einblendung von Erklärung über Antwortmöglichkeit möglich?
Könnte also so aussehen.
Jetzt kreiere einmal etwas und schicke Deine Umfrage (diese relevanten Fragen) als lss Export.
Bis dann
Joffm
Übrigens:
Hierzu habe ich einfach in der "Dual Matrix" den Tooltip code in den Text der Kopfzeilen geschrieben.
Zum Beispiel:
Und dann kann man ihn natürlich noch mit css stylen. Kannst Du ja nach Belieben anpassen
Hier so:
Zusätzlich noch die Initialisierung des Tooltips mit einer Zeile javascript
Jetzt kreiere einmal etwas und schicke Deine Umfrage (diese relevanten Fragen) als lss Export.
Bis dann
Joffm
Übrigens:
Hierzu habe ich einfach in der "Dual Matrix" den Tooltip code in den Text der Kopfzeilen geschrieben.
Zum Beispiel:
Code:
<a href="#" data-container="body" data-toggle="tooltip" data-placement="top" title="Hier kommt die tolle Erläuterung">Level of measurability</a>
Und dann kann man ihn natürlich noch mit css stylen. Kannst Du ja nach Belieben anpassen
Hier so:
Code:
<style type="text/css"> .tooltip{ position:absolute; z-index:1020; display:block; visibility:visible; padding:5px; font-size:11px; } .tooltip-inner{ width:350px; height:auto; padding:3px 8px; color:maroon; text-align:center; font-weight:700; border-radius:4x; border: 1px solid #314A5B; background-color:white; } .tooltip-arrow{ position:absolute; width:0; height:0 } </style>
Zusätzlich noch die Initialisierung des Tooltips mit einer Zeile javascript
Code:
<script> $('[data-bs-toggle="tooltip"]').tooltip(); </script>
- bhavik
17 Nov 2023 22:52
Replied by bhavik on topic Custom javascript Question Data not being populated in exported CSV file
Here is the script:
<script type="text/javascript" src=" code.jquery.com/jquery-3.6.0.min.js ">
<script type="text/javascript">
$(document).ready(function() {
var checkClosest = function(event) {
event.target.firstElementChild.click();
};
var thisQuestion = $('#question{QID}');
// Insert dropdowns
if (!thisQuestion.find(".inserted-dropdown").length) {
var dropdownTemplate = '<div style="text-align: left" class="list-question-select">\
<span class="clickable-span">\
<select class="inserted-dropdown" name="dropdown_{QID}">\
<option value="">Please choose</option>\
<option value="rare, not severe">rare, not severe</option>\
<option value="rare, severe">rare, severe</option>\
<option value="occasional, not severe">occasional, not severe</option>\
<option value="occasional, severe">occasional, severe</option>\
<option value="frequent, not severe">frequent, not severe</option>\
<option value="frequent, severe">frequent, severe</option>\
<option value="No">Not Applicable</option>\
</select>\
</span>\
</div>';
$('.answer-item', thisQuestion).addClass('with-select').each(function() {
var dropdownHtml = dropdownTemplate.replace(/{QID}/g, $(this).data('qid'));
$(this).append(dropdownHtml);
});
}
// Insert date fields with "Know" and "Don't know" options
if (!thisQuestion.find(".date-fields").length) {
var dateFieldsTemplate = '<div class="date-fields" style="display: none;">\
<div class="date-field-container">\
<label>Approx date of onset (if known):</label><br>\
<label class="know-label">Know:</label>\
<input type="date" class="date-field large-date" id="onset-date_{QID}">\
<br>\
<label class="dont-know-label">Don\'t know:</label>\
<input type="checkbox" class="dont-know-checkbox" id="dont-know-onset-date_{QID}">\
</div>\
<div class="date-field-container">\
<label>Approx end date (if at all):</label><br>\
<label class="know-label">Know:</label>\
<input type="date" class="date-field large-date" id="end-date_{QID}">\
<br>\
<label class="dont-know-label">Don\'t know:</label>\
<input type="checkbox" class="dont-know-checkbox" id="dont-know-end-date_{QID}">\
</div>\
<div class="inline-fields">\
<textarea class="comment-box" rows="3" cols="40" style="width: 100%;" placeholder="Comments"></textarea>\
</div>\
</div>';
$('.answer-item', thisQuestion).each(function() {
var dateFieldsHtml = dateFieldsTemplate.replace(/{QID}/g, $(this).data('qid'));
$(this).append(dateFieldsHtml);
});
}
thisQuestion.find("select[name^='dropdown']").each(function() {
var currName = $(this).attr('name').substr(
;
var listQuestionSelect = $(this).closest(".answer-item").find(".list-question-select");
var dateFields = $(this).closest(".answer-item").find(".date-fields");
listQuestionSelect.find('select').each(function() {
$(this).attr('name', 'dropdown' + currName);
});
listQuestionSelect.find('select.inserted-dropdown').on("change", function(event) {
var answerItem = $(this).closest('.answer-item');
var selectedValue = $(this).val();
var dateFields = answerItem.find('.date-fields');
if (selectedValue !== '' && selectedValue !== 'No') {
dateFields.show();
} else {
dateFields.hide();
}
});
listQuestionSelect.find('.comment-box').on('click', function(event) {
event.stopPropagation();
});
});
// Clean-up styles
$('select.inserted-dropdown').addClass('big-dropdown');
$('.list-question-select span').addClass('clickable-span');
$('.with-select input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});
// Hide all rows in the array text question initially
$('[id^="javatbd128651X28X6425SQ"]').hide();
//$('.ls-heading.ls-header .answertext.control-label[role="columnheader"]').hide(); // Hides the headers
//$('.ls-heading.ls-heading-repeat').hide();
$('#question6425').hide();
$('[id^="answer128651X28X6347SQ"]').change(function() {
// Extract the subquestion code from the checkbox ID
var row = this.id.match(/SQ\d+$/)[0];
console.log('row:', row);
});
var checkedQuestionCodes = []; // Initialize an empty array to store checked question codes
// Event handler for radio button changes
$('input.inserted-radio[type=radio]').change(function() {
// Extract the last part of the name attribute which is the subQuestionCode
var subQuestionCode = $(this).attr('name').split('_').pop();
console.log('SubQuestionCode:', subQuestionCode);
var name = $(this).attr('name');
var sqIndex = name.indexOf('SQ'); // Find the index of 'SQ' in the string
var questionCode = sqIndex !== -1 ? name.substring(sqIndex, sqIndex + 5) : null; // Extract 'SQ' and the following three characters
// Check if the selected radio button's value is "1"
if ($(this).val() === "1") {
if (checkedQuestionCodes.indexOf(questionCode) === -1) {
checkedQuestionCodes.push('#javatbd128651X28X6425' + questionCode);
}
$('#javatbd128651X28X6425' + questionCode).show();
$('.ls-heading.ls-header .answertext.control-label[role="columnheader"]').show();
$('#question6425').show();
} else {
var index = checkedQuestionCodes.indexOf('#javatbd128651X28X6425' + questionCode);
if (index !== -1) {
checkedQuestionCodes.splice(index, 1);
}
$('#javatbd128651X28X6425' + questionCode).hide();
}
console.log('Checked Question Codes:', checkedQuestionCodes);
});
$('input.inserted-radio[type=radio][value="1"]:checked').each(function() {
$(this).trigger('change');
});
});
</script>
<style>
.know-label,
.dont-know-label {
text-indent: 10px;
}
.ls-heading.ls-header .answertext.control-label[role="columnheader"] {
background-color: #add8e6; /* Light blue color */
}
</style>
<script type="text/javascript" src=" code.jquery.com/jquery-3.6.0.min.js ">
<script type="text/javascript">
$(document).ready(function() {
var checkClosest = function(event) {
event.target.firstElementChild.click();
};
var thisQuestion = $('#question{QID}');
// Insert dropdowns
if (!thisQuestion.find(".inserted-dropdown").length) {
var dropdownTemplate = '<div style="text-align: left" class="list-question-select">\
<span class="clickable-span">\
<select class="inserted-dropdown" name="dropdown_{QID}">\
<option value="">Please choose</option>\
<option value="rare, not severe">rare, not severe</option>\
<option value="rare, severe">rare, severe</option>\
<option value="occasional, not severe">occasional, not severe</option>\
<option value="occasional, severe">occasional, severe</option>\
<option value="frequent, not severe">frequent, not severe</option>\
<option value="frequent, severe">frequent, severe</option>\
<option value="No">Not Applicable</option>\
</select>\
</span>\
</div>';
$('.answer-item', thisQuestion).addClass('with-select').each(function() {
var dropdownHtml = dropdownTemplate.replace(/{QID}/g, $(this).data('qid'));
$(this).append(dropdownHtml);
});
}
// Insert date fields with "Know" and "Don't know" options
if (!thisQuestion.find(".date-fields").length) {
var dateFieldsTemplate = '<div class="date-fields" style="display: none;">\
<div class="date-field-container">\
<label>Approx date of onset (if known):</label><br>\
<label class="know-label">Know:</label>\
<input type="date" class="date-field large-date" id="onset-date_{QID}">\
<br>\
<label class="dont-know-label">Don\'t know:</label>\
<input type="checkbox" class="dont-know-checkbox" id="dont-know-onset-date_{QID}">\
</div>\
<div class="date-field-container">\
<label>Approx end date (if at all):</label><br>\
<label class="know-label">Know:</label>\
<input type="date" class="date-field large-date" id="end-date_{QID}">\
<br>\
<label class="dont-know-label">Don\'t know:</label>\
<input type="checkbox" class="dont-know-checkbox" id="dont-know-end-date_{QID}">\
</div>\
<div class="inline-fields">\
<textarea class="comment-box" rows="3" cols="40" style="width: 100%;" placeholder="Comments"></textarea>\
</div>\
</div>';
$('.answer-item', thisQuestion).each(function() {
var dateFieldsHtml = dateFieldsTemplate.replace(/{QID}/g, $(this).data('qid'));
$(this).append(dateFieldsHtml);
});
}
thisQuestion.find("select[name^='dropdown']").each(function() {
var currName = $(this).attr('name').substr(
;var listQuestionSelect = $(this).closest(".answer-item").find(".list-question-select");
var dateFields = $(this).closest(".answer-item").find(".date-fields");
listQuestionSelect.find('select').each(function() {
$(this).attr('name', 'dropdown' + currName);
});
listQuestionSelect.find('select.inserted-dropdown').on("change", function(event) {
var answerItem = $(this).closest('.answer-item');
var selectedValue = $(this).val();
var dateFields = answerItem.find('.date-fields');
if (selectedValue !== '' && selectedValue !== 'No') {
dateFields.show();
} else {
dateFields.hide();
}
});
listQuestionSelect.find('.comment-box').on('click', function(event) {
event.stopPropagation();
});
});
// Clean-up styles
$('select.inserted-dropdown').addClass('big-dropdown');
$('.list-question-select span').addClass('clickable-span');
$('.with-select input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});
// Hide all rows in the array text question initially
$('[id^="javatbd128651X28X6425SQ"]').hide();
//$('.ls-heading.ls-header .answertext.control-label[role="columnheader"]').hide(); // Hides the headers
//$('.ls-heading.ls-heading-repeat').hide();
$('#question6425').hide();
$('[id^="answer128651X28X6347SQ"]').change(function() {
// Extract the subquestion code from the checkbox ID
var row = this.id.match(/SQ\d+$/)[0];
console.log('row:', row);
});
var checkedQuestionCodes = []; // Initialize an empty array to store checked question codes
// Event handler for radio button changes
$('input.inserted-radio[type=radio]').change(function() {
// Extract the last part of the name attribute which is the subQuestionCode
var subQuestionCode = $(this).attr('name').split('_').pop();
console.log('SubQuestionCode:', subQuestionCode);
var name = $(this).attr('name');
var sqIndex = name.indexOf('SQ'); // Find the index of 'SQ' in the string
var questionCode = sqIndex !== -1 ? name.substring(sqIndex, sqIndex + 5) : null; // Extract 'SQ' and the following three characters
// Check if the selected radio button's value is "1"
if ($(this).val() === "1") {
if (checkedQuestionCodes.indexOf(questionCode) === -1) {
checkedQuestionCodes.push('#javatbd128651X28X6425' + questionCode);
}
$('#javatbd128651X28X6425' + questionCode).show();
$('.ls-heading.ls-header .answertext.control-label[role="columnheader"]').show();
$('#question6425').show();
} else {
var index = checkedQuestionCodes.indexOf('#javatbd128651X28X6425' + questionCode);
if (index !== -1) {
checkedQuestionCodes.splice(index, 1);
}
$('#javatbd128651X28X6425' + questionCode).hide();
}
console.log('Checked Question Codes:', checkedQuestionCodes);
});
$('input.inserted-radio[type=radio][value="1"]:checked').each(function() {
$(this).trigger('change');
});
});
</script>
<style>
.know-label,
.dont-know-label {
text-indent: 10px;
}
.ls-heading.ls-header .answertext.control-label[role="columnheader"] {
background-color: #add8e6; /* Light blue color */
}
</style>
- Joffm
09 Nov 2023 14:54
- rajesh.mca134
08 Nov 2023 11:43
- StefanXZ
05 Nov 2023 22:18 - 05 Nov 2023 22:26
- Joffm
05 Nov 2023 14:03 - 05 Nov 2023 14:04
Replied by Joffm on topic Farbe der Bootstrap-Buttons ändern
Hallo,
Dein Thema ist ja etwas ganz anderes. Di willst ja nicht einfach den Hintergrund einer Zelle färben, sondern einen Button.
Eine erste Lösung findest Du hier
[url] forums.limesurvey.org/forum/dutch-forum/...leur-sjabloon-fruity [/url]
Jetzt willst Du aber jeden Button individuell färben.
Da die Buttons ja die SGQA-Id als Unterscheidungsmerkmal haben,
kannst Du sie zum Beispiel darüber ansprechen
Klar, "1" und "2", ... sind die Codes der Antwortoption.
Du kannst aber auch einfach die "bootstrap-button-div" durchzählen und sie mittels "nth-child(x)" ansprechen.
Hier sind noch ein paar "border-colors" dabei, da diese ja im Code des niederländischen Threads schon enthalten waren.
Bei beiden Lösungen musst Du natürlich die Farben für "hover", "active" und "active hover" zufügen; wie im verlinkten Thread.
Leider hast Du weder angegeben, mit welcher Version von LimeSurvey Du arbeitest noch welches Theme Du benutzt.
Daher kann ich auch keine Beispielstudie mitschicken.
Joffm
Dein Thema ist ja etwas ganz anderes. Di willst ja nicht einfach den Hintergrund einer Zelle färben, sondern einen Button.
Eine erste Lösung findest Du hier
[url] forums.limesurvey.org/forum/dutch-forum/...leur-sjabloon-fruity [/url]
Jetzt willst Du aber jeden Button individuell färben.
Da die Buttons ja die SGQA-Id als Unterscheidungsmerkmal haben,
kannst Du sie zum Beispiel darüber ansprechen
Code:
div#javatbd{SGQ}1 .btn-primary { background-color: #b3d1ff; } div#javatbd{SGQ}2 .btn-primary { background-color: #66a3ff; }
Klar, "1" und "2", ... sind die Codes der Antwortoption.
Du kannst aber auch einfach die "bootstrap-button-div" durchzählen und sie mittels "nth-child(x)" ansprechen.
Hier sind noch ein paar "border-colors" dabei, da diese ja im Code des niederländischen Threads schon enthalten waren.
Code:
.bootstrap-buttons-div:nth-child(1) .button-item.btn-primary { background-color: #00A800; border-color: #95A5A6; } .bootstrap-buttons-div:nth-child(2) .button-item.btn-primary { background-color: #9CE400; border-color: #95A5A6; }
Bei beiden Lösungen musst Du natürlich die Farben für "hover", "active" und "active hover" zufügen; wie im verlinkten Thread.
Leider hast Du weder angegeben, mit welcher Version von LimeSurvey Du arbeitest noch welches Theme Du benutzt.
Daher kann ich auch keine Beispielstudie mitschicken.
Joffm
- Malte
31 Oct 2023 10:03 - 31 Oct 2023 10:05