Home>Support>Customize Background Color Can’t See in Internet Explore, Google Chrome and mobile

Customize Background Color Can’t See in Internet Explore, Google Chrome and mobile

By viviantbl, 9 years ago. Last reply by Magus, 9 years ago.

I use Mozzila Firefox to customize my website.
The color of the background can see nicely with Mozzila Firefox, but unable to see it if we use Internet Explorer and Google Chrome.
Below are changes I did in Custom CSS:
.widget_circleicon-widget .circle-icon-box a.more-button {
color: #062e23 !important;
font-weight: 800;
font-size: 14px;
background: transparent -moz-linear-gradient(center bottom , #062e23 15%, #F6F6F6 85%) repeat scroll 0% 0%;
}
.button, button, html input[type=”button”], input[type=”reset”], input[type=”submit”] {
background: transparent -moz-linear-gradient(center bottom , #003300 15%, #FFF 85%) repeat scroll 0% 0%;
color: #062e23;
width: auto;
font-size: 15px;
font-family: Roboto bold;
}
.so-widget-sow-button-atom-0f60cfef0509 .ow-button-base a {
background: transparent -moz-linear-gradient(center bottom , #062e23 15%, #f6f6f6 85%) repeat scroll 0% 0%;
color: #fff !important;
Same thing happen to my contact form of which the border of the fill in column for contact number is stronger than other columns. But it looks nice with Mozzila Firefox.
Kindly assist on this. Thank you.

URL: http://www.tectrolink.com

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 2 months ago Magus
    Hi, I Work Here

    Hi Viviantbl

    You will need to add the linear gradient options for the remaining browsers to each of your CSS snippets

    .widget_circleicon-widget .circle-icon-box a.more-button {
    color: #062e23 !important;
    font-weight: 800;
    font-size: 14px;
    background: transparent -moz-linear-gradient(center bottom , #062e23 15%, #F6F6F6 85%) repeat scroll 0% 0%;
    background-image: linear-gradient(to top, #062e23 15%, #F6F6F6 85%);
    background-image: -ms-linear-gradient(bottom, #062e23 15%, #F6F6F6 85%);
    background-image: -webkit-linear-gradient(bottom, #062e23 15%, #F6F6F6 85%);
    background-image: -o-linear-gradient(bottom, #062e23 15%, #F6F6F6 85%);
}

.button, button, html input[type="button"], input[type="reset"], input[type="submit"] {
    background: transparent -moz-linear-gradient(center bottom , #003300 15%, #FFF 85%) repeat scroll 0% 0%;
    color: #062e23;
    background-image: linear-gradient(to top,  #003300 15%, #FFF 85%);
    background-image: -ms-linear-gradient(bottom,  #003300 15%, #FFF 85%);
    background-image: -webkit-linear-gradient(bottom,  #003300 15%, #FFF 85%);
    background-image: -o-linear-gradient(bottom,  #003300 15%, #FFF 85%);
    width: auto;
    font-size: 15px;
    font-family: Roboto bold;
 }
.so-widget-sow-button-atom-0f60cfef0509 .ow-button-base a {
    background: transparent -moz-linear-gradient(center bottom , #062e23 15%, #f6f6f6 85%) repeat scroll 0% 0%;
    color: #fff !important;
    background-image: linear-gradient(to top,  #062e23 15%, #f6f6f6 85%);
    background-image: -ms-linear-gradient(bottom,  #062e23 15%, #f6f6f6 85%);
    background-image: -webkit-linear-gradient(bottom, #062e23 15%, #f6f6f6 85%);
    background-image: -o-linear-gradient(bottom, #062e23 15%, #f6f6f6 85%);
}

    Let us know how you get on

    Magus

  2. 9 years, 2 months ago viviantbl

    Hi Magus,
    Thanks for your assist. I can see the color of the background can see nicely with all the browsers now.

    But the problem with my contact form of which the border of the fill in column for contact number is stronger than other columns that I mentioned is still there?

    Another problem I find in my website is all my contact detail eg. Tel No. , Hunting No. & email address can’t be seen with Apple Safari. May I know any solutions on it?

    Vivian

  3. 9 years, 2 months ago viviantbl

    Hi Magus,

    I am able to to solve my contact form problems already.
    So, the problem I have no is all the contact numbers and email address in my website are unable to view with Apple Safari (IPhone & IPad tablet)

    Vivian

  4. 9 years, 2 months ago Magus
    Hi, I Work Here

    Hi Vivian

    iOS is turning your telephone numbers into links for use with Facetime (or the phone when using an iPhone). Please navigate to Appearance->Customize->Theme Settings->General and ensure that your content Link Colour contrasts sufficiently with your body background colour.

    Thanks

    Magus

  5. 9 years, 2 months ago viviantbl

    Hi Magus,

    Thanks for your assist. I can see all the contact numbers with IPhone / IPad now.

    But the contact number in my contact us page are underlined with IPhone or IPad but none with other browsers.
    How to remove it?

    Vivian

  6. 9 years, 2 months ago Magus
    Hi, I Work Here

    Hi Vivian

    Unfortunately there is no way to remove that function through coding. This is a function built in to iOS and Android devices.

    Magus

  7. 9 years, 2 months ago viviantbl

    Hi Magus,

    I see. Thanks for your info and assist. It is really helpful to me.

    Vivian

  8. 9 years, 2 months ago Magus
    Hi, I Work Here

    Hi Vivian

    You are most welcome. If we can help with anything else please feel free to open a new support thread.

    Magus

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More