Problems, need help? Have a tip or advice? Post it here.
8 posts Page 1 of 1
Hello, hello forum!!!

Would anyone know, if it is possible and how, to style radio buttons in Couch?

The only thing I figured out is how to brake the raw with using double separator...I have 10 options...

I actually only want to add paddings between each radio button .....

thanks in advance

Tanja
Hi Tanja,

I trust you mean how to style the radio buttons in Couch admin-panel.

Custom styling is not supported by default but as a round-about method we can
'inject' CSS styles within the admin-panel by defining an editable region of type 'message' (http://www.couchcms.com/docs/tags-refer ... ssage.html) e.g
Code: Select all
<cms:editable name='my_css' type='message'>
   <style type="text/css">
    ... your style rules here..
   </style>
</cms:editable>

If you take a look at the generated HTML of any edit-panel in admin (using FireBug, for example), you'll find that each editable region is given an unique ID. This can be used to target the radio-buttons using the injected CSS styles.

Make sure that the 'message' region appears before the radio-buttons (use 'order' parameter if required) so that the styles can apply.

Hope this helps. Do let me know if you require any help.
Thanks.
Thanks for fast reply KK!

actually I was thinking on input type radio buttons in a from...
but I will look at what you have suggested now...



thanks


Tanja
actually I was thinking on input type radio buttons in a from

Sorry I misunderstood. If it is the front-end that you meant, styling the form elements is completely within your control. You can assign any class or id (or even inline style) to any form element.
For example if this is a set of radio buttons -
<cms:input type="radio" name="shade" opt_values="Dark=dark | Light=light" />

we can add any class or id to it this way -
<cms:input type="radio" name="shade" opt_values="Dark=dark | Light=light" class="my_radio" id="radio_1" />

The styling can then be done using your site's CSS.

Hope this helps.
Thanks a lot!
I thought initially that is so, only it does not work on my site... no idea why....
I guess I have messed somewhere something with the code...

But until I find the error and try again, could you just tell me if that is the way to address individual radio buttons for CSS style too? To access individually the options within opt_values?
Because, if that would be HTML, I would use a table to put inside all 10 radio buttons that I have and organize them in raws and columns....

Or is that not possible at all?

Tanja
The following statement used in a Couch form -
<cms:input type="radio" name="shade" opt_values="Dark=dark | Light=light" class="my_radio" id="my_radio" />

- results in the following generated HTML -
<label>
<input type="radio" name="shade" id="my_radio0" value="dark" class="my_radio" checked="checked"/>Dark
</label>

<label>
<input type="radio" name="shade" id="my_radio1" value="light" class="my_radio" />Light
</label>

As you can see, each of the two radio buttons in this example has been given a distinct ID.
This can be used to style the individual buttons.

I understand that your question is whether you can access each of the buttons to organize them in TRs and TDs of a table.
This, I am afraid, won't be possible. However, by making use of the IDs, we can certainly style each button with CSS floats to create what would look like a tabular structure.
What do you say?
Thanks again !!! That IS great!!!

I finally got everything working!!!!

Need I say once more - I love Couch :)


best regards

tanja
You are welcome, Tanja :)
8 posts Page 1 of 1
cron