Home Forums Lush Theme Discussion & Support Change Hyperlink Properties in Header Top Bar

This topic is: not a support question

This topic contains 1 reply, has 1 voice, and was last updated by  Nyla Gutekunst 4 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #4357

    Nyla Gutekunst
    Participant
    Post count: 2

    Love the Lush theme and it has really helped our website. One request for help: how do I change the appearance of a phone number in the Header Top Bar?

    It is so handy to put a phone number up there for those who find our site and then want to call right away. The problem seems to be that a mobile browser (like safari on an iphone) renders phone numbers as links to make it easier for people to call. That link color is the SAME as the highlight color which makes up the Header Top Bar. This renders the phone number almost invisible. I don’t want to change all links in Lush–the phone number looks fine in widgets, normal text, etc.– just how a mobile browser renders a phone number in the Header Top Bar.

    Thanks for your assistance!

    #4358

    Nyla Gutekunst
    Participant
    Post count: 2

    Poking a bit around and I found a possible solution, but since it changes phone number appearance throughout the site on mobile browsers, I wanted to get your take. BTW, the source of this was here:
    <pre class=”brush: html; gutter: false; first-line: 1; highlight: []; html-script: false”>http://www.webdesignerdepot.com/2013/03/how-to-make-your-contact-forms-mobile-friendly/ It is about 2/3 s down on the page.

    <pre class=”brush: css; gutter: false; first-line: 1; highlight: []; html-script: false”>/* unstyled tel links as default */
    a[href^='tel:']:link, a[href^='tel:']:visited {
    color: #6f757c;
    font-weight: normal;
    text-decoration: none;
    }

    a[href^='tel:']:hover, a[href^='tel:']:active {
    color: #6f757c;
    text-decoration: none;
    }

    /* styled tel links for small viewports */
    @media screen and (max-width: 600px) {
    a[href^='tel:']:link, a[href^='tel:']:visited {
    color: #333;
    font-weight: bold;
    text-decoration: underline;
    }

    a[href^='tel:']:hover, a[href^='tel:']:active {
    color: #333;
    text-decoration: none;
    }
    }

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.