Hướng dẫn [XF2] Làm đẹp nút chia sẻ xenforo 2

2L.Ohayo

Moderator
Thành viên BQT
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.
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.

Screen Shot 2018-05-26 at 19.10.04.png



Screen Shot 2018-05-26 at 19.09.13.png
 

caolaogia7

Corporal
Tham gia
15/03/2017
Bài viết
164
Được Like
52
mình muốn thêm hoặc bớt nút share/like mạng xã hội thì chỉnh sửa ở đâu huynh ?
 

sukoro

Corporal
Tham gia
02/04/2015
Bài viết
183
Được Like
107
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.
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.

View attachment 26176


View attachment 26177
Vậy giờ mình muốn chèn nó vào cuối bài viết thì chèn ntn vậy bạn?
 

2L.Ohayo

Moderator
Thành viên BQT
Tham gia
08/03/2015
Bài viết
761
Được Like
835
mình muốn thêm hoặc bớt nút share/like mạng xã hội thì chỉnh sửa ở đâu huynh ?
Muốn thêm thì thêm vào template share_page_macros, còn muốn xóa bớt thì chỉ cần vào Setup > Options > Sharing > Uncheck cái nào muốn bỏ
 

NTTM

Private
Tham gia
27/05/2018
Bài viết
35
Được Like
15
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.
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.

View attachment 26176


View attachment 26177
có cho wordpress không chủ thớ ơi @@
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom