- Tham gia
- 08/03/2015
- Bài viết
- 761
- Được Like
- 835
Xenforo 2 đã tích hợp hệ thống các nút chia sẻ mạng xã hội rất tiện lợi. Nếu bạn muốn làm nổi bật các nút chia sẻ này thì xin mời làm theo hướng dẫn dưới đây.
Tìm template share_controls.less và thay toàn bộ code trong đó bằng code phía dưới.
Kết quả thu được sẽ như hình bên dưới.
Tìm template share_controls.less và thay toàn bộ code trong đó bằng code phía dưới.
Mã:
.m-shareButtons-button(@background)
{
background-color: @background;
&:hover { background-color: xf-diminish(@background, 10%); }
}
.shareButtons
{
.m-clearFix();
}
.shareButtons-label
{
float: left;
margin-right: 3px;
color: @xf-textColorMuted;
min-height: 35px;
line-height: 35px;
}
.shareButtons-button
{
float: left;
margin-right: 6px;
padding: 6px;
color: #fff;
font-size: 20px;
line-height: 20px;
white-space: nowrap;
min-width: 35px;
border-radius: @xf-borderRadiusSmall;
background-color: transparent;
.m-transition();
&:last-of-type
{
margin-right: 0;
}
&:hover
{
text-decoration: none;
color: white;
}
> i
{
display: inline-block;
vertical-align: middle;
.m-faBase();
}
> span
{
font-weight: @xf-fontWeightNormal;
font-size: @xf-fontSizeNormal;
}
.shareButtons--iconic &
{
text-align: center;
> i
{
min-width: 20px;
}
> span
{
.m-visuallyHidden();
}
}
&&--facebook
{
.m-shareButtons-button(#3B5998);
> i:before { .m-faContent(@fa-var-facebook, .58em); }
}
&&--twitter
{
.m-shareButtons-button(#1DA1F3);
> i:before { .m-faContent(@fa-var-twitter, .93em); }
}
&&--gplus
{
.m-shareButtons-button(#dd4b39);
> i:before { .m-faContent(@fa-var-google-plus, 1.29em); }
}
&&--pinterest
{
.m-shareButtons-button(#bd081c);
> i:before { .m-faContent(@fa-var-pinterest-p, .72em); }
}
&&--tumblr
{
.m-shareButtons-button(#35465c);
> i:before { .m-faContent(@fa-var-tumblr, .58em); }
}
&&--reddit
{
.m-shareButtons-button(#FF4500);
> i:before { .m-faContent(@fa-var-reddit-alien, 1em); }
}
&&--whatsApp
{
.m-shareButtons-button(#25D366);
> i:before { .m-faContent(@fa-var-whatsapp, .86em); }
}
&&--email
{
.m-shareButtons-button(#1289ff);
> i:before { .m-faContent(@fa-var-envelope-o, 1em); }
}
&&--link
{
cursor: pointer;
.m-shareButtons-button(#787878);
> i:before { .m-faContent(@fa-var-link, 1em); }
}
&.is-hidden
{
display: none;
}
}
.shareInput
{
margin-bottom: 5px;
&:last-child
{
margin-bottom: 0;
}
}
.shareInput-label
{
font-size: @xf-fontSizeSmall;
.m-appendColon();
}
.shareInput-button
{
color: @xf-linkColor;
cursor: pointer;
> i
{
display: inline-block;
vertical-align: middle;
.m-faBase();
&:before { .m-faContent(@fa-var-copy); }
}
&.is-hidden
{
display: none;
}
}
.shareInput-input
{
font-size: @xf-fontSizeSmall;
.shareInput-button.is-hidden + &
{
border-radius: @xf-borderRadiusMedium;
}
}Kết quả thu được sẽ như hình bên dưới.
Bài viết liên quan
