CSS - styling {html_radios} output

[Edwin_IandD]

Hello all,

I am running into a bit of a problem styling the radio buttons that are generated by the {html_radios} smarty tag..

The internet is full of ways to style radio buttons (or more precise a <label> or <span> after the button), but as this tag generates the buttons inside their span I cannot seem to get that to work.

This is an example output from the tag:

Code: Select all

<label for="id_1000"><input type="radio" name="id" value="1000" id="id_1000" />Joe Schmoe</label>
<label for="id_1001"><input type="radio" name="id" value="1001" id="id_1001" checked="checked" />Jack Smith</label>
<label for="id_1002"><input type="radio" name="id" value="1002" id="id_1002" />Jane Johnson</label>
<label for="id_1003"><input type="radio" name="id" value="1003" id="id_1003" />Charlie Brown</label>

This all works lovely, but the only way I can find to actually style the button is by hiding the actual button and styling a <label> after the button (good example here: http://www.hongkiat.com/blog/css3-checkbox-radio ).

So basically what I need is either an output like this:

Code: Select all

<input type="radio" name="id" value="1003" id="id_1003" /><label for="id_1003">Charlie Brown</label>

or a different way of styling the buttons.

Any ideas?

Thanks a lot,
Edwin

[calguy1000]

Or.... don't use {html_radios} just build your own html output from the array.

[Edwin_IandD]

Any tips on how to do this?

[calguy1000]

I'd just create a smarty function to do it using a simple foreach loop. It's actually very trivial to do.

{* untested *}
{function my_radios}
{foreach $options as $key => $lbl}
<label class="radio_label"><input type="radio" class="radio" name="{$name}" value="{$key}" {if !empty($selected) && $selected==$key}checked{/if}/> {$lbl}</label>
{/foreach}
{/function}

{* usage *}
{my_radios options=$the_list name='something' selected=$current_key}

[Edwin_IandD]

Thanks a lot!

I was trying something similar with PHP, buy couldn't get it to work.
Never knew you could do this with Smarty tags..

I'll give this a try. Thanks again.

[Edwin_IandD]

And after messing around with that for an hour I still cannot get it to work...

First I tried pasting the code in a user defined tag called 'my_radios'
But all I got was "Invalid code entered.,"

So I figured that you're probably not allowed to use smarty inside a user defined tag and went back to my original plan of writing this in php.. I am not a great code writer (the main reason of using a ready made CMS (that's supposed to be Made Simple)), but this is what I came up with:

Code: Select all

foreach ($options as $key => $lbl) {
		echo '<input type="radio" class="radio" name=".$name." value=".$key."';
		if (!empty($selected) && $selected==$key) {
			echo 'checked';
			};
		echo ' />';
		echo "<label for=".$name.">.$lbl;.</label>";
	};

No errors, no Invalid Code but also absolutely no output...

What am I doing wrong here??

(I did get my output the way I wanted by editing function.html_radios.php but I am a bit worried that this file might get restored with a next update - also I don't think this is the 'proper' way of doing it.. so I don't really want to do that.)

[Edwin_IandD]

Lesson learned today: do not assume that you know how to do things without looking them up...

Yes indeed, because I assumed I knew how to use smarty functions I spend (as in wasted) an hour of my precious time messing around with this issue..

Has I only bothered to read one paragraph of text about smarty functions (as I just did..) this whole problem would have been solved in 5 minutes!

Thank you Calguy1000 for your solution - it works perfectly!!
And in a way I also need to thank you for not giving too much information. This way I had to challenge myself, mess around and finally learn how to use this by myself. This way I probably will remember this better then if you had simply told me how to use this piece of code! Thanks again!