external account button login

maszd

cXF BRONZE
cXF Donor
Messages
87
Likes
38
#1
Hi @BassMan
i want to know how to make login button for external account more big and flat like this one :
001.PNG
its from Forums

recently i have this one:
002.PNG

its possible that icon can replace with font awesome?
thank you.
regrads,
maszd
 

BassMan

Staff member
Administrator
Messages
554
Likes
255
Website
www.customizexf.com
#2
Hi @maszd,

add this to code to your EXTRA.css template:
Code:
#XenForo a.fbLogin span, #XenForo a.twitterLogin span, #XenForo .googleLogin span {
    background: transparent;
    border-top: 0;
    border-bottom: 0;
    padding: 0;
    margin: auto;
    font-size: 12px;
    padding-top: 1px;
    text-shadow: none;
}

#XenForo a.fbLogin {
    text-align: center;
    background: #3b5998;
    box-sizing: initial;
    line-height: inherit;
    padding: 3px;
    height: 22px !important;
}
#XenForo a.fbLogin:hover {
    background: #2a4c95;
}
#XenForo a.fbLogin span:before {
    font-family: FontAwesome;
    content: "\f09a";
    padding-right: 5px;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
    padding-bottom: 4px;
}

#XenForo a.twitterLogin {
    text-align: center;
    background: #1da1f3;
    color: #ffffff !important;
    box-sizing: initial;
    line-height: inherit;
    padding: 3px;
    height: 22px !important;
    border: none;
}
#XenForo a.twitterLogin:hover {
    background: #009bfc;
}
#XenForo a.twitterLogin span:before {
    font-family: FontAwesome;
    content: "\f099";
    padding-right: 5px;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
    padding-bottom: 4px;
}

#XenForo .googleLogin {
    text-align: center;
    background: #4285f4;
    color: #ffffff !important;
    box-sizing: initial;
    line-height: inherit;
    padding: 3px;
    height: 22px !important;
    border: none;
}
#XenForo .googleLogin:hover {
    background: #2376ff;
}
#XenForo .googleLogin span:before {
    font-family: FontAwesome;
    content: "\f1a0";
    padding-right: 5px;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
    padding-bottom: 4px;
}

And you'll get this:

upload_2017-10-28_17-34-58.png
 

Welcome to customizeXF

We are running default XenForo style customized by cXF
Registration is free!

Similar threads