Navigation
Archive / Social Icons in Ethos
This is archived content. Visit our new forum.
  • Author
    Posts
  • January 7, 2015 at 11:56 am #178582
    cyberp
    Participant

    HAllo,
    I would like to make bigger social icons in my Ethos website, now they are very little…
    I would like to set them up the same of http://www.360gradisud.it , how can I do?

    January 7, 2015 at 11:56 am #178583
    cyberp
    Participant
    This reply has been marked as private.
    January 7, 2015 at 4:41 pm #178772
    Darshana
    Moderator

    Hi there,

    Thanks for writing in! Please add the following CSS code into your Customizer, Custom > CSS section using the menu Appearance -> Customize and change the values according to your preference. 

    
.x-topbar .x-social-global a {
    font-size: 3.2rem;
}

.x-colophon.bottom .x-social-global a {
    font-size: 3.2rem;
}

.x-social-global i {
    height: 32px;
    width: 32px;
}

    Hope that helps.

    January 8, 2015 at 4:15 am #179085
    cyberp
    Participant
    This reply has been marked as private.
    January 8, 2015 at 9:14 am #179231
    Zeshan
    Member

    Hi there,

    In that case, please add following code under Custom > CSS in the Customizer:

    .x-colophon .x-social-global{font-weight:400;line-height:1}.x-colophon .x-social-global a{display:inline-block;text-align:center;color:#fff;background-color:rgba(255,255,255,0.125);border-radius:100em}.x-colophon .x-social-global a:hover.facebook{background-color:#3b5998}.x-colophon .x-social-global a:hover.twitter{background-color:#00abf0}.x-colophon .x-social-global a:hover.google-plus{background-color:#d84b35}.x-colophon .x-social-global a:hover.linkedin{background-color:#1a81ad}.x-colophon .x-social-global a:hover.foursquare{background-color:#0f6bb6}.x-colophon .x-social-global a:hover.youtube{background-color:#cc181e}.x-colophon .x-social-global a:hover.vimeo{background-color:#44bbff}.x-colophon .x-social-global a:hover.instagram{background-color:#3f729b}.x-colophon .x-social-global a:hover.pinterest{background-color:#cd1f28}.x-colophon .x-social-global a:hover.dribbble{background-color:#ea4b8b}.x-colophon .x-social-global a:hover.behance{background-color:#1769ff}.x-colophon .x-social-global a:hover.rss{background-color:#fe6e00}.x-colophon .x-social-global a i{display:block} .x-colophon .x-social-global a {background-color: #d7623c; color: #fff !important; } .x-colophon.bottom .x-social-global{margin:20px 0}.x-colophon.bottom .x-social-global a{margin:0 1.25%;width:54px;height:54px;font-size:21px;font-size:2.1rem;line-height:54px;}.x-colophon .x-social-global i {width: auto; height: auto;}

    Hope this helps. 🙂

    Thank you.

    January 8, 2015 at 12:20 pm #179355
    cyberp
    Participant

    thank you!
    I did it, but they appear just in the footer….the social icons are disappeared from the topbar…

    How can I put these new Social Icons also in the topbar, on the right side, as it was before with default icons?

    thanks for helping…

    January 8, 2015 at 9:40 pm #179586
    Rad
    Moderator

    Hi there,

    It still there, but as colored white.

    Add this css too,

    .x-topbar .x-social-global a {
color: #999;
}

    Hope this helps.

    January 15, 2015 at 8:01 am #183659
    cyberp
    Participant
    This reply has been marked as private.
    January 15, 2015 at 9:11 pm #184114
    Friech
    Moderator

    Hi there,

    Thank you for the details, to have your topbar social icon style same as on the footer please add this css under Custom > CSS in the Customizer.

    .x-topbar .x-social-global a {
	background-color: #333333;
	color: #fff;
	width: 54px;
	line-height: 54px;
	border-radius: 100%;
	font-size: 21px;
}
.x-topbar .x-social-global a.facebook:hover {background-color: #3b5998;}
.x-topbar .x-social-global a.twitter:hover {background-color: #00abf0;}
.x-topbar .x-social-global a.youtube:hover {background-color: #cc181e;}

    Before doing that make sure you add the closing bracket } on your last line of custom css code. :)

    Hope it helps. Cheers!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-178582 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>