external account button login

maszd

cXF BRONZE
cXF Donor
Messages
112
Likes
43
#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
717
Likes
383
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
 

Create an account or login to comment

You must be a member in order to leave a comment

Create account

Create an account on our community. It's easy!

Log in

Already have an account? Log in here.

Welcome to customizeXF

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

Search forums

Similar threads

Top