Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Cloud
Version 5.6.56
Own server or LimeSurvey hosting:
Survey theme/template:
==================
Hi,

I need to change the rectangles Bootstrap boutons (see the attached picture), to oval's or round's ones, is it possible? if yes please send the css code and/or advice how to do it.

I have this code in the custom.css:

.btn-primary {
    background-color: #2473B9;
    border-color: #2473B9;
}
.btn-primary:hover {
    background-color: #2473B9;
    border-color: #2473B9;
}
 
.btn-primary:active,
.btn-primary.active {   
    background-color: #76C1E2 !important;
    border-color: #76C1E2 !important;
}


Thanks in advance.

Hi,
the general advice is:
Investigate with the webdevelopment tool of your browser (F12) and adapt the settings of class ".btn"
Here I played a bit with
line-height
padding
border-radius
margin-bottom
and added
width

Not to affect the "next" and "previous" buttons you may add your own class ".mybtn".
So it will be
.mybtn .btn {
....
}





Joffm

Hi Joffm,

Thanks for your feedback. I am ntew in Limesurvey and editing themes (.twig,.css files..), could you help more by sending exactly what i should add in .css file please?

Also I need to have the ovals butons in different colors .(titles in white color )

Thanks again!

You already showed some variations of the class ".btn-primary" (background-color and border-color.
So you know where this is placed.

To test I'd always insert it into the question text (with <style>...</style> tags).
Later you can decide whether to place it in the "custom.css"

Did you investigate with the webdevelopment tool?
Here you see  the actual settings of ".btn" or ".btn-primary" and can directly change some values and see the effect.

Joffm

Hi Joffm,

Thanks for your feedback, However and if it is possible , I just need the exact part of the code I should add in the .css file in order to see the round/oval boutons  or whatever the solution that can allow it. Again I am not expert in the web dev and have no time at this time to investgate.

So if you provide the exact code and way to do it I'd apreciate.

Thanks.

If you investigate with your webdevelopment tool you will find this
 
and here the class .btn
 

Now you can directly change settings and see the effect
Here I changed the red marked settings
 
and got this
 

Now, when you are satisfied, enter the changed values into your question, like


I added a "width". You also can change the value and see the effect.
As I wrote before, not to affect the other buttons ("next", "previous",...) I used an additional class "mybtn".
This you enter in the field "css classes" of the question.

A good source of information is "W3Schools".
Here you also can try the efeect of different settings.
[url] www.w3schools.com/howto/howto_css_round_buttons.asp [/url]

Now you should try and creaze something.
Whemn there are further questions, send the lss export of "your buttons".

Joffm

Hi Joffm,

Thanks for your feedback.
I have tested the ne button display using the custom.css code of the theme and got the oval shape when i click on the button . But when I put the mybtn class code you gave in the Classe(s) CSS  of the main question nothing happened -see pic1.png (arrow 1)) i also put this part of code in the Source code of the bootstrap individual buton question (see pic1.png: arrow 2)but always got the existing rectangle button.

Also I have displayed the code using right button menu (from the theme page) : Inspecter (see attached image:pic2) and got the web tool but cannot change the parameters as you did (no way to save the new changes?).see pic3



Regards

Please send the lss export of this question that we see what exactly you did.

Joffm 

Hi Joffm,

Please find attached the file. In order to check the change I have added the style..> code only in the 1st sub question (Ressources Humaines)

Thanks!

Hi,
please, provide neither lsq nor lsg exports, only lss.
Reason: lsq and lsg exports are language sensitive. You can only import into a question with the same base language.
So we have to guess the base language, create a survey to be able to import your export.
Furthermore the survey wide settings are missing which may be important.

Copy your survey, remove everything not relevant and send the lss export.

Joffm

Please find attached the .iss.

In the list of bootstrap green buttons pic(list.png) I need to display the items in oval.round (and if it is possible in a different colors; each button in diffecrent color).

I have edited the source code of the question but dosnt work ,guess that it is the wrong way to do it. (pic: indiv question.png)

Thanks.

Hi,

enter the changed values into your question

but you entered the css script into the subquestion text.

And add the mybtn to the css classes.

With this
you get (only background-color changed)
 


Please pay attention to the dependency of "width" and "margin-left".
The width here is 62%, so 38% are left, -> the left margin is 19% (and the right margin as well). So the button is displayed centered.
The different colors for the "active" resp. "hover" state you already showed in you very first post.

Joffm
 

Hi Joffm,

Thanks again.

However I cannot see change either if I add this "Style" code in the question's Classe(s) CSS Display parameter  (see attached picture:  yellow circles) neither in the source code (see the blue circle)

Where can I configure this css code in the questions parameters?

Thanks

You do not show what you entered in the source code.
And: Is there something entered in "classes (css)"?

Joffm
 

I try puting the style code in Class Css âram but it doesn't change the bootstrap shape (see pictures)