How To Customize Style Of Text In TopBar?

Support
#1

Hi there,

I have a site with some info in the top bar.

The code I am using is

<b>Email: <u><a href="/contact/">[email protected]</a></u> | Call: <u><a href="tel:068454836">06-8454836</a></u></b>

I’d really like to do 3 things (in order of importance). I’ve tried a bunch of inline CSS but nothing is working :frowning:

  1. Increase the font-size to 110%

  2. Know how to change text and link color

  3. Use Icons instead of text for “Email:” and “Call:”

The site is live at http://bikeabouttours.co.nz/

Are you able to help with this?

Thanks in advance!

#2

Hi There @freedomdesign

Thanks for writing in! Add the following CSS rules into your X -> Theme Options -> CSS area.

.x-topbar .p-info {
    font-size: 14px;
    color: blue;
}
.x-topbar .p-info a {
    color: red;
}

To change text to icons:

Replace email with <i class="x-icon x-icon-envelope-o" data-x-icon-s="&#xf0e0" aria-hidden="true"></i>

Replace call with <i class="x-icon x-icon-phone" data-x-icon-s="&#xf095;" aria-hidden="true"></i>

Hope that helps.

#3

Great! I used this and was able to get things perfect…

Much appreciated!

#4

You are most welcome. :slight_smile:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.