Skip navigation
Currently Being Moderated

Iphone showing different background styles to PC...

Feb 2, 2014 12:05 PM

Hi Guys


So here is my test website:


Notice the buttons under the online order and the Table reservation section. Thats how their meant to be, just a flat green rectangle.


However on my iphone, and possibly other smart phones, they show up as a green gradient.


I kinda know whats happening, its that the original theme has a gradient on the buttons and because its a general rule of thumb not to edit the original themes CSS (because when they do updates itll overwrite everything) what I've done is add a custom css file which just over rules the old gradient background with a solid green one.


This works everywhere but my phone it would seem, where it seems to be picking up the new green background and mixing it with the old gradient one.


Their also showing up with a much bigger radius than they should on the phone


any help appreciated :-D



  • Currently Being Moderated
    Feb 2, 2014 2:50 PM   in reply to joey.v1985

    Near line 135 of layout.css change background-color to background.


    The reason is that you need to override the original value which is



    input[type="button"] {

        background: #eee; /* Old browsers */

        background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */

        background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */

        background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */

        background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */

        background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */

        background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */


    Mark as:
  • Currently Being Moderated
    Feb 3, 2014 7:38 AM   in reply to joey.v1985

    Its not in the style.css file its in 'base.css', but dont change that because when you update the template the settings will be lost/reverted.



    Isn't there any options in the theme settings area in wp-admin to change the colour of the links? If not then add the style to the bottom of the style.css on the child theme (i can see the sub-dir for it so it looks like your already using it)




    Just add the following like base but remove the colours and change then to what you want:



    input[type="submit"], input[type="reset"], input[type="button"] {



        -moz-border-bottom-colors: none;


        -moz-border-left-colors: none;

        -moz-border-right-colors: none;

        -moz-border-top-colors: none;

        background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%) repeat scroll 0 0 #EEEEEE;

        border-color: #CCCCCC #AAAAAA #AAAAAA #CCCCCC;

        border-image: none;

        border-radius: 3px;

        border-right: 1px solid #AAAAAA;

        border-style: solid;

        border-width: 1px;

        color: #444444;

        cursor: pointer;

        display: inline-block;

        line-height: normal;

        margin-bottom: 20px;

        padding: 8px 10px;

        text-decoration: none;



    input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {



        -moz-border-bottom-colors: none;


        -moz-border-left-colors: none;

        -moz-border-right-colors: none;

        -moz-border-top-colors: none;

        background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%) repeat scroll 0 0 #DDDDDD;

        border-color: #AAAAAA #888888 #888888 #AAAAAA;

        border-image: none;

        border-right: 1px solid #888888;

        border-style: solid;

        border-width: 1px;

        color: #222222;



    input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active {



        background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%) repeat scroll 0 0 #CCCCCC;


        border: 1px solid #666666;


    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points