Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 24, 2015 at 4:58 pm #417172
    josephhunterdesign

    I have a client who I am building their site for using this theme.

    They have asked for a few things that I am unsure of how to do.

    1. They would like the social icons to be highlighted at all times not just on rollover. If this is possible, it seems that the icons are really close together so some padding would also have to be built in.

    2. They would like to place a phone number, large in size, to the left of the social icons.

    3. They were wondering if there is any way to have the color of the phone number in the header change depending on what page you are on.

    Thanks!

    March 24, 2015 at 5:21 pm #417195
    Yigit

    Hey josephhunterdesign!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #top #wrap_all .av-social-link-facebook a {
  color: #fff;
  background-color: #37589b;
}
#top #wrap_all .av-social-link-gplus a {
  color: #fff;
  background-color: #de5a49;
}
#top #wrap_all .av-social-link-youtube a {
  color: #fff;
  background-color: #a72b1d;
}
#top #wrap_all .av-social-link-linkedin a {
  color: #fff;
  background-color: #419cca;
}
#header_main .social_bookmarks li { margin-left: 10px; }

.phone-info {
  font-size: 20px;
}

.page-id-21 .phone-info * {
 color: orange !important
}

    You can right click on Chrome or Firefox to inspect elements to find page ID’s http://i.imgur.com/HyPTCRg.jpg and adjust the last code for each of your pages.
    To add a phone info, please go to Enfold theme options > Header > Extra elements and choose to display it

    Best regards,
    Yigit

    March 31, 2015 at 8:29 pm #421535
    josephhunterdesign

    Is there anyway that I can display the phone number next to the social icons instead of in the top bar?

    April 1, 2015 at 7:20 pm #422111
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .phone-info {
  color: #888!important;
  position: relative;
  top: 60px;
  right: 14%;
}

    Best regards,
    Yigit

    April 1, 2015 at 7:48 pm #422123
    josephhunterdesign

    Awesome, that did the trick.

    Now is there any way that I can get rid of the top gray header bar where the phone number used to be?

    April 1, 2015 at 7:50 pm #422124
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    div#wrap_all {
  margin-top: -31px;
}

    Regards,
    Yigit

    April 12, 2015 at 2:27 pm #427140
    josephhunterdesign

    This all worked but the phone number overlaps the social icons on some browser widths. Can you help fix that?

    April 13, 2015 at 5:17 pm #427624
    Yigit

    Hi!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 1300px) and (min-width: 990px) {
.phone-info { right: 24%; }}
@media only screen and (max-width: 989px) {
.phone-info { right: 30%; }}

    Regards,
    Yigit

    April 13, 2015 at 6:56 pm #427731
    josephhunterdesign

    That’s much better but when it gets down to ipad and phone sizes the phone number covers the logo. Can I make it so that It doesn’t appear on those?

    April 14, 2015 at 12:13 am #427936
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 768px) {
.phone-info { display: none !important; }}

    Regards,
    Yigit

    April 14, 2015 at 1:12 pm #428186
    josephhunterdesign

    Great, thanks!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Keep social icons highlighted at all times’ is closed to new replies.