[SOLVED] Change radio button style in Registration form

4 years 4 months ago - 4 years 4 months ago #315193 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:

Please Log in to join the conversation.

4 years 4 months ago #315196 by krileon
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:
<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.

.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 to join the conversation.

4 years 4 months ago #315206 by Aless76
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 to join the conversation.

Moderators: beatnantkrileon
Time to create page: 0.207 seconds

Facebook Twitter LinkedIn