1. Dismiss Notice

Change color of background of Tap to Call area at top right?

Discussion in 'RoadFighter WordPress Theme' started by gloryous, Jun 23, 2017.

  1. gloryous

    gloryous Member

    Joined:
    May 25, 2012
    Messages:
    223
    Likes Received:
    8
    Greetings!

    My client wants a bit more color and attention drawn to the Tap to Call button. Is it possible to make the background a red? #8c1919

    Tap-to-Call-Button.png

    Thanks!
    Glory
     
    gloryous, Jun 23, 2017
    #1
  2. akbar92

    akbar92 Support Staff Staff Member

    Joined:
    Jun 3, 2017
    Messages:
    2,318
    Likes Received:
    49
    Hi,

    Greetings from InkThemes,

    To remove the background color of the tap to call button, just paste the code given below in Custom CSS section.
    (Dashboard->Inkthemes->Theme Options -> Styling Options -> Custom CSS) of your dashboard.

    Code:
    .header_wrapper .call-us {
    background-color: #8c1919;
}

.header_wrapper .call-us p {
    color: white;
    text-shadow: 0 1px 0 #000;
}
    Hope this helps...!

    Thanks & Regards!
    Akbar
    InkThemes.com
     
    akbar92, Jun 24, 2017
    #2
  3. gloryous

    gloryous Member

    Joined:
    May 25, 2012
    Messages:
    223
    Likes Received:
    8
    Greetings, Akbar!

    We're getting closer, but not quite there. When I paste the code given, this is what I get:

    upload_2017-6-24_9-18-56.png

    I'd like the background to be all red (#8c1919), the letters to be white, and the phone icon to be white as well.

    Is this possible?

    Thank you,
    Glory
     
    gloryous, Jun 24, 2017
    #3
  4. gloryous

    gloryous Member

    Joined:
    May 25, 2012
    Messages:
    223
    Likes Received:
    8
    Following up on this request. Needed for my client.

    Thank you!
     
    gloryous, Jun 27, 2017
    #4
  5. Naveen

    Naveen Guest

    Joined:
    Aug 8, 2014
    Messages:
    1,739
    Likes Received:
    64
    Hello Glory,

    To change the background color and text color as per your need, you need to paste the below custom CSS code in the Custom CSS field located under Dashboard->InkThemes->Theme Options->Styling Settings
    Code:
    .header_wrapper .call-us {
    background: red;
}
.header_wrapper .call-us p { 
    background: red;
    color: #fff;
    text-shadow: none;
}
    This will help you to figure it out and resolve your issue(s).

    Regards!
    Naveen Kolhe
    InkThemes.com
     
    Naveen, Jun 28, 2017
    #5
  6. gloryous

    gloryous Member

    Joined:
    May 25, 2012
    Messages:
    223
    Likes Received:
    8
    Naveen,

    A delayed thank you!

    The Good: It works well on the full, desktop site. [See image.]

    Text_color_on_tap_to_call_on_mobile_is_different.png

    The Problem: However, on a tablet (iPad) or on mobile (iPhone), the text is a gray color and difficult to read.

    Can you suggest code to correct this?

    Thank you,
    Glory
     
    gloryous, Aug 23, 2017
    #6
  7. akbar92

    akbar92 Support Staff Staff Member

    Joined:
    Jun 3, 2017
    Messages:
    2,318
    Likes Received:
    49
    Hi Glory,

    Will you please share your website URL here so that we can deliver you an exact and appropriate solution to you.

    Regards,
    Akbar
    InkThemes.com
     
    akbar92, Aug 23, 2017
    #7
  8. gloryous

    gloryous Member

    Joined:
    May 25, 2012
    Messages:
    223
    Likes Received:
    8
    GalenaRepair.com

    As of this post to you, it's not live quite yet. Soon though ... maybe later today CDT in USA (Aug 23, 2017).

    Thanks for checking it out then.
     
    gloryous, Aug 23, 2017
    #8
  9. akbar92

    akbar92 Support Staff Staff Member

    Joined:
    Jun 3, 2017
    Messages:
    2,318
    Likes Received:
    49
    Hello Glory,

    To the background color of the tap-to-call button, just paste the code given below in Custom CSS section.
    (Dashboard->Inkthemes->Theme Options -> Styling Options -> Custom CSS) of your dashboard.

    Code:
    .header_wrapper .call-us {
    background: none;
}

@media only screen and (max-width: 480px){
.call-us a.btn {
    background-image: linear-gradient(to bottom, #8c1919 11%, #8c1919 45%);
    border-radius: 6px;
    border: 2px solid #8c1919;
    box-shadow: inset 0 2px 0 #8c1919, 0px 3px 6px #3E3E3E, inset 0px 0px 0px 1px #525252;
}
}
    Hope this helps...!

    Thanks & Regards!
    Akbar
    InkThemes.com
     
    akbar92, Aug 24, 2017
    #9
  10. gloryous

    gloryous Member

    Joined:
    May 25, 2012
    Messages:
    223
    Likes Received:
    8
    Greetings, Akbar ... thanks for the latest attempt! :-D

    Unfortunately, this isn't exactly what I need. It's the text (Tap to call: 815.777.4331) itself that is displaying as a soft gray on my iPad. Not readable. I need it to be white. That's what I'm looking to change.

    On desktop: it's white -- and perfect. [See previous post (with image file upload) dated August 23, 2017.] This is how I'd like it to display on devices.

    Thanks for looking at this again!

    Glory
     
    gloryous, Sep 6, 2017
    #10
  11. akbar92

    akbar92 Support Staff Staff Member

    Joined:
    Jun 3, 2017
    Messages:
    2,318
    Likes Received:
    49
    Hi Glory,

    On our screen, it's already displaying as a white text, please have a look at the attached screenshot.

    Btw, just paste the code given below in Custom CSS section.
    (Dashboard->Inkthemes->Theme Options -> Styling Options -> Custom CSS) of your dashboard.

    Code:
    @media only screen and (max-width: 480px){
.call-us a.btn {
    color: #ffffff;
}
}
    Hope this helps...!

    Thanks & Regards!
    Akbar
    InkThemes.com
     

    Attached Files:

    akbar92, Sep 7, 2017
    #11

Share This Page