Page 1 of 1

Omega Radio Buttons

Posted: 31 May 2017, 14:40
by scott.abernethy
I have purchased the Omega theme but our client doesn't like the way the radio buttons appear on the screen. Specifically that the inner circle for selected item is off center. Is it possible for me to change to a different radio button graphic?

Re: Omega Radio Buttons

Posted: 31 May 2017, 15:57
by mert.sincan
I think you can override the classes of radio button on Omega Theme. DOM Structure when a radio item is active;

Code: Select all

<div class="ui-radiobutton ui-widget">
   <div class="ui-helper-hidden-accessible">
         <input id="j_idt69:0" name="j_idt69" type="radio" value="Xbox One">
    </div>
    <div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default ui-state-active">
        <span class="ui-radiobutton-icon ui-icon ui-c ui-icon-bullet"></span>
    </div>
</div>
What do you want to change in the radiobutton? Border, border-radius, select icon etc. Maybe, you can attach a screenshot for us.

Re: Omega Radio Buttons

Posted: 07 Jun 2017, 15:36
by scott.abernethy
My apologies for taking so long to reply.

We don't like that the inside of the selected radio is slightly off center. Also the entire radio button appears overly large to me. I have attached screen shots for Omega and Verona. The radio button for Verona is much more visually appealing.
Verona:
Image
Omega:
Image

Re: Omega Radio Buttons

Posted: 09 Jun 2017, 13:03
by mert.sincan
Please try;

Code: Select all

<style type="text/css">
    body .ui-radiobutton-box.ui-state-active, 
    body .ui-radiobutton-box.ui-state-focus.ui-state-active {
        background-color: transparent;
        color: #156090;
    }
    body .ui-radiobutton .ui-icon-bullet, 
    body .ui-radiobutton .ui-icon-blank {
        font-size: 14px;
        margin-top: 1px;
    }
</style>

Re: Omega Radio Buttons

Posted: 09 Jun 2017, 16:11
by scott.abernethy
That looks great! Thank you!

Re: Omega Radio Buttons

Posted: 12 Jun 2017, 13:35
by mert.sincan
Glad to hear, thanks for the update!