- Posts: 3
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Align bootstrap buttons to center of page and change color after click
- HellaThielen
- Topic Author
- Offline
- New Member
Less
More
1 week 3 days ago #263494
by HellaThielen
Align bootstrap buttons to center of page and change color after click was created by HellaThielen
Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Cloud Versie 6.5.5
Survey theme/template: Vanilla
==================
I have two questions:
1) I have a question with 5 bootstrap buttons that are presented horizontally. The 5 buttons are now aligned to the left of the page, I would like to align them to the center of the page. I have looked at these topics ( forums.limesurvey.org/forum/design-issue...pe-questions-yes-not ,
forums.limesurvey.org/forum/design-issue...uttons-to-the-center ) but have not succesfully been able to adapt the code. Can you offer me help? (see screenshot of an example question below)
2) I tried to change the color of the bootstrap buttons. I want them to color grey when clicked off when somebody hovers over the button.
I have changed the code below to the custom.css file. My buttons now are grey when clicked and when the mouse hovers above the button but when the mouse moves away from the button after it is clicked, the background color of the button changes to blue. How can I change this?
Thank you so much for the help!
.btn-primary {
background-color: white;
border-color: black;
color: black;
}
.btn-primary:active, .btn-primary.active {
background-color: grey !important ;
border-color: black !important;
}
.btn-primary:hover {
background-color: grey !important;
border-color: black !important;
}
.btn-primary.active:hover {
background-color: grey !important;
border-color: black !important;
}
Your LimeSurvey version: LimeSurvey Cloud Versie 6.5.5
Survey theme/template: Vanilla
==================
I have two questions:
1) I have a question with 5 bootstrap buttons that are presented horizontally. The 5 buttons are now aligned to the left of the page, I would like to align them to the center of the page. I have looked at these topics ( forums.limesurvey.org/forum/design-issue...pe-questions-yes-not ,
forums.limesurvey.org/forum/design-issue...uttons-to-the-center ) but have not succesfully been able to adapt the code. Can you offer me help? (see screenshot of an example question below)
2) I tried to change the color of the bootstrap buttons. I want them to color grey when clicked off when somebody hovers over the button.
I have changed the code below to the custom.css file. My buttons now are grey when clicked and when the mouse hovers above the button but when the mouse moves away from the button after it is clicked, the background color of the button changes to blue. How can I change this?
Thank you so much for the help!
.btn-primary {
background-color: white;
border-color: black;
color: black;
}
.btn-primary:active, .btn-primary.active {
background-color: grey !important ;
border-color: black !important;
}
.btn-primary:hover {
background-color: grey !important;
border-color: black !important;
}
.btn-primary.active:hover {
background-color: grey !important;
border-color: black !important;
}
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13063
- Thank you received: 4023
1 week 3 days ago - 1 week 3 days ago #263513
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Align bootstrap buttons to center of page and change color after click
Hi,
yes, it is a bit different as LimeSurvey 6.x. is based on bootstrap 5.
To get your colors you may read this
[url] forums.limesurvey.org/forum/design-issue...strap-buttons#263175 [/url]
And additionally I set
Joffm
yes, it is a bit different as LimeSurvey 6.x. is based on bootstrap 5.
To get your colors you may read this
[url] forums.limesurvey.org/forum/design-issue...strap-buttons#263175 [/url]
And additionally I set
Code:
.w-100 { width: 24% !important; margin-left: 38%; }
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 week 3 days ago by Joffm.
Please Log in to join the conversation.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10122
- Thank you received: 3600
1 week 3 days ago - 1 week 3 days ago #263545
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Align bootstrap buttons to center of page and change color after click
You may want to put media queries on that. 24% on a phone will be quite small.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 1 week 3 days ago by tpartner.
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13063
- Thank you received: 4023
1 week 2 days ago #263654
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Align bootstrap buttons to center of page and change color after click
And I misunderstood / didn't read exactly / didn't see
I thought these were the buttons
Well, you know bootstrap divides each row into twelve parts
12 because you can divide 12 by 1, 2, 3, 4, 6, 12, but not by 5 or 7.
Meaning you can't put 5 elements into one row, you have to use 6, with the last element empty.
So you have to move the entire row a bit.
You can do this by adding a left margin to the class "ls-answers"
You may adapt the 10% to your needs.
Joffm
I thought these were the buttons
Well, you know bootstrap divides each row into twelve parts
12 because you can divide 12 by 1, 2, 3, 4, 6, 12, but not by 5 or 7.
Meaning you can't put 5 elements into one row, you have to use 6, with the last element empty.
So you have to move the entire row a bit.
You can do this by adding a left margin to the class "ls-answers"
Code:
.ls-answers { margin-left: 10%; }
You may adapt the 10% to your needs.
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- HellaThielen
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
3 days 2 hours ago #264622
by HellaThielen
Replied by HellaThielen on topic Align bootstrap buttons to center of page and change color after click
Thank you so much for the help. I was able to move all the buttons more to the center.
I was also able to change the color: the buttons still change to blue (with a blue border and white text) when I click them (see video). Is there any way I could change this?
I was also able to change the color: the buttons still change to blue (with a blue border and white text) when I click them (see video). Is there any way I could change this?
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13063
- Thank you received: 4023
2 days 15 hours ago #264642
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Align bootstrap buttons to center of page and change color after click
Please, send the lss export of the survey (only relevant questions)
Joffm
Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.
- HellaThielen
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
9 hours 2 minutes ago #264693
by HellaThielen
Replied by HellaThielen on topic Align bootstrap buttons to center of page and change color after click
Thank you for the quick reply. Please find the lss code attached.
Thank you for your help.
Thank you for your help.
Please Log in to join the conversation.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13063
- Thank you received: 4023
7 hours 51 minutes ago #264695
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Align bootstrap buttons to center of page and change color after click
Hm,
where is the script?
I only see this (I cleaned a bit)
If I insert this already shown css snippet
it is fine except the alignment. But this you can adapt with a <br/> tag.
And why do you show the numbers at all?
Another thing.
This is more or less a scale. Later you want to calculate some statistical values, like mean, stdvar. etc, and run some statistical tests.
But what do you expect if you use "text" codes, like "AO01", "AO02", ...
Now you only get nominal data and may calculate frequencies, or maybe a CHI-Square, but not more.
Use numerical codes!
JOffm
where is the script?
I only see this (I cleaned a bit)
If I insert this already shown css snippet
Code:
<style> .ls-answers { margin-left: 10%; } </style>
it is fine except the alignment. But this you can adapt with a <br/> tag.
And why do you show the numbers at all?
Another thing.
This is more or less a scale. Later you want to calculate some statistical values, like mean, stdvar. etc, and run some statistical tests.
But what do you expect if you use "text" codes, like "AO01", "AO02", ...
Now you only get nominal data and may calculate frequencies, or maybe a CHI-Square, but not more.
Use numerical codes!
JOffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Please Log in to join the conversation.