[SOLVED] Change radio button style in Registration form

Aless76
OFFLINE
Posts: 37
Thanks: 7
Karma: 2

5 years 2 months ago - 5 years 2 months ago #315193 by Aless76

[SOLVED] Change radio button style in Registration form was created by Aless76

Dear Joomlapolis Team,

I'm creating a step-based registration form according to your tutorial and everything works fine...
I'm using a radio buttons field in a tab I called Profile, but it looks very bad, like the screenshot "Bad_Layout.jpg".

Is there any way to make the tab looks better, maybe like the "Good_Layout.jpg" (not made with CB)?

Actually the problem is that the "description" of the radio button is in the same row of the label... I tried to use "<br>" and "<p>" in the label but it doesn't work...
Is there any way to make a "two rows label" (and maybe to make the first part bold like the screenshot "Good_Layout")?...
I attached the Profile field settings too.

Thanks in advance for the help.

Alessandro.

Attachments:

Last edit: 5 years 2 months ago by krileon. Reason: Added [SOLVED] tag to subject

Please Log in or Create an account to join the conversation.

krileon
ONLINE
Posts: 48674
Thanks: 8313
Karma: 1446

5 years 2 months ago #315196 by krileon

Replied by krileon on topic Change radio button style in Registration form

Use a language string for the label then add whatever HTML you like in the override. Example as follows

Value: atleta
Label: PROFILE_ATLETA

Next using language overrides you could have the below.

Key: PROFILE_ATLETA
String:

Code:

<strong>Atleta</strong>
<div>Description here</div>

See the below on how to use language overrides.

www.joomlapolis.com/blog/kyle/18701-language-overrides-have-arrived

As for the radio alignment it'll always align in the middle. You can change this using CSS. The below for example should work.

Code:

.cb_template #cbfr_FIELD_ID_HERE .form-check-inline .form-check-input {
	margin-top: 6px;
	margin-bottom: auto;
}

Be sure to replace FIELD_ID_HERE with the actual ID of your field. The alternative is to use the CSS class parameter of the field to add a custom CSS class to the field and replace #cbfr_FIELD_ID_HERE with .YOUR_CLASS_HERE instead. See the below on how to use CSS overrides in CB.

www.joomlapolis.com/blog/kyle/18711-template-css-overrides-made-easy

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

The following user(s) said Thank You: Aless76

Please Log in or Create an account to join the conversation.

Aless76
OFFLINE
Posts: 37
Thanks: 7
Karma: 2

5 years 2 months ago #315206 by Aless76

Replied by Aless76 on topic Change radio button style in Registration form

Hi Krileon,

thank you so much for the help! Everything seems to work fine!

Actually I was trying to use language override before your answered me with the same solution (that means that after months of "experiments" I'm finally starting to understand CB a little... :-)

)...

But you helped me really a lot with the css override of the single field (you opened a new world for me as I'm growing day by day in the usage of CB)!

Thanks again!

Alessandro.

The following user(s) said Thank You: krileon

Please Log in or Create an account to join the conversation.

Moderators: beat, nant, krileon