Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 13, 2014 at 11:07 pm #367801
    mattmosman

    Any way to make the social icons on the top of this page…..http://mpallstars.org/….look like the social media icons in the footer of this page….http://mpssi.com/page_id3567/ (ignore the green color…would want them to be white)

    • This topic was modified 10 years ago by mattmosman.
    December 14, 2014 at 12:10 am #367821
    Flikk

    http://kriesi.at/documentation/enfold/custom-css-and-quick-css/

    #top #header_main .social_bookmarks li a {
     background-color: #fff;
     border-radius: 4px;
     color: #000;
}
#top #header_main .social_bookmarks li:hover a {
     background-color: #83c900;
     border-radius: 100px;
     color: #ffffff;
}

    Play around with the values however you want.
    The first half is the normal icon.
    The second one is for the mouse over effect.

    cheers

    December 14, 2014 at 10:42 pm #368053
    mattmosman

    thank you…that worked great…now the only thing I need to do is move the social icons up to create more space between them and the search bar. Any quick css to accomplish that?

    December 14, 2014 at 11:54 pm #368058
    Flikk
    #header_main .social_bookmarks {
    top: 40%;
}

    And i see you kept my previous code as it is.
    Don’t know if you want the icons change to round icons again on mouse over.
    That was just for demonstration :)

    December 15, 2014 at 12:24 am #368059
    mattmosman

    Thank you…appreciate the help

    December 15, 2014 at 12:49 am #368061
    Flikk

    Also the search icon looks a bit strange to me.
    The search button is 1 pixel higher then the input field.
    Just a suggestion when you read this:

    #top #searchsubmit, .ajax_load {
    border-left: solid;
    height: 38px;
    right: 1px;
    top: 1px;
}

    Fixes the different height and adds a border between them.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Social Media Icons’ is closed to new replies.