Radio buttons in Google Chrome with TB Nex greyed out

+1
+3
-1

I just wanted to share that we found a little problem with TB Nex: On Google Chrome radio buttons don't appear or appear greyed out whit this theme.

The problem is with this piece of css around line 981 of page.css:

/* not show box-shadow on iphone*/
input, textarea, select,
.block.contact-form .form-text,
.form-textarea-wrapper textarea{
-webkit-appearance: none !important;
}

and can be solved with this css which should be loaded after page.css:


input[type="radio"] {
-webkit-appearance: radio !important;
}

Thanks for these great themes.

+1
+5
-1

Hi budalokko,

Thanks for sharing your solution. We're glad to know our themes are useful for you. Don't hesitate to contact us if you have any feedback to improve our products as well as our services.

+1
+1
-1

Can you please provide more specifics on how to implement?

+1
+3
-1

Hi oden,

there are many ways to do it, the most direct being modify directly the offending file (sites/all/themes/tb_nex/css/page.css) but I don't like it, so I will explain you one I like.

  1. Edit file sites/all/themes/tb_nex/tb_nex.info
  2. At the end of it paste the following code:

    ; Custom styles by oden
    stylesheets[all][] = custom-styles.css
  3. Then create a new file sites/all/themes/tb_nex/custom-styles.css and paste the following code into it:

    input[type="radio"], input[type="checkbox"] {
    -webkit-appearance: radio !important;
    }
  4. Clear cache at Configuration -> Development -> Performance (admin/config/development/performance)

The file you created may contain in future other changes you need to do to the theme, without modifying directly the theme's different files.
The best way to do this kind of things is subtheming but would be a bit cumbersome work in your case.