Modify layout of component options

Question

I'd like to style the component options page of my custom-developed component. I can see in the Articles com_config options there are coloured buttons for radio buttons and a nicer page layout (e.g. equal-width columns for labels and form fields). How can I customise this for my own component options screen within com_config?

Answer 1

Add your fields like this in the XML manifest file:

<field
  name="language"
  type="radio"
  class="btn-group"
  default="en"
  label="Language"
  description="What language do you want?">
<option
    value="en">English</option>
<option
    value="es">Spanish</option>
<option
    value="no">Norwegian</option>
</field>

For simple Yes/No buttons, try

<field
    name="intro"
    type="radio"
    class="btn-group btn-group-yesno"
    default="1"
    label="Introduction"
    description="Show introduction?">
    <option
        value="1">JYES</option>
    <option
        value="0">JNO</option>
</field>

Answer 2

If you're using Joomla 3, set class="btn-group" to your radio buttons, that should style them like the default Joomla radio buttons.