XenForo - "input button" changing style.

[Cryptaline]

Have not found any topic with the description of "what is the best way to do it using xenforo".
Will be glad to hear anything about it

New skin for the buttons:



Default buttons:

 

[Jake Bunce]

You want to change the checkboxes to radio bubbles? Radio bubbles aren't ideal for on/off options like that. It would normally require two radio bubbles for on/off, as opposed to one checkbox.

 

[Cryptaline]

Well, yes i prefer checkboxes aswell, radio buttons skin is not necessary. But I'm not quite familar with it. Want an advice where 2 start with changing the default skin of the checkboxes and a simple example of how it should look in xenforo css code.

 

[Jake Bunce]

First find the root template of the page:

http://xenforo.com/community/threads/1-0-0-b1-how-to-identify-the-root-template-of-a-page.5591/

That template contains all of the HTML.

There are examples of radio buttons in this template:

Admin CP -> Appearance -> Templates -> account_personal_details

		<dl class="ctrlUnit">
			<dt><label>{xen:phrase gender}:</label></dt>
			<dd>
				<ul>
					<li><label for="ctrl_gender_male"><input type="radio" name="gender" value="male" id="ctrl_gender_male" {xen:checked "{$visitor.gender} == 'male'"} /> {xen:phrase male}</label></li>
					<li><label for="ctrl_gender_female"><input type="radio" name="gender" value="female" id="ctrl_gender_female" {xen:checked "{$visitor.gender} == 'female'"}  /> {xen:phrase female}</label></li>
					<li><label for="ctrl_gender_"><input type="radio" name="gender" value="" id="ctrl_gender_" {xen:checked "{$visitor.gender} == ''"}  /> ({xen:phrase unspecified})</label></li>
				</ul>
			</dd>
		</dl>