Code chia cột cho Xenforo forum

tungpham42

Administrator
Nhân viên
Tham gia
6 Tháng chín 2017
Bài viết
484
Điểm
28
Tuổi
31
Địa chỉ
34, Nguyễn Thị Thập, Bình Thuận, Q. 7, TP. HCM
Website
cungrao.net
Less:
.block--category{
    @media (min-width: 1100px){
        @supports(display: grid){
            .block-body{display:grid; grid-template-columns:50% 50%;}
            .block-container{background-color: #ffffff00;border:none;}
            .node-body{
                display:flex;
                flex-wrap: wrap;
                border-right: 1px solid #dedede;
                position:relative;
                height: 100%;
                padding:5px;
                box-shadow: 0 1px 4px rgba(0,0,0,0.06);
                border-width: 1px;
                border-style: solid;
                background-color: #ffffff;
                border-top-color: #dfdfdf;
                border-right-color: #d8d8d8;
                border-bottom-color: #cbcbcb;
                border-left-color: #d8d8d8;
            }
            .node{margin: 5px 1px 5px 1px;}
            .node-icon{width:12%; padding-top:5px;}
            .node-main{width:87%;} .node-stats{width:110px;}
            .node-extra{
                position:absolute;
                right:0px;
                bottom:0px;
                padding: 10px 10px 13px 0px;
            }
        }
    }
}
Để có thể chia cột giống forum Cùng Rao, các bạn chèn đoạn code trên vào file extra.less
 
Bắt đầu
tungpham42

tungpham42

Administrator
Nhân viên
Tham gia
6 Tháng chín 2017
Bài viết
484
Điểm
28
Tuổi
31
Địa chỉ
34, Nguyễn Thị Thập, Bình Thuận, Q. 7, TP. HCM
Website
cungrao.net
Bước 1: Bạn vào Appearance > Widgets > nhấn nút Add widget ở góc trên cùng bên phải > chọn HTML ở ô Widget definition.

Screen Shot 2021-03-22 at 08.07.35.png

Bước 2:

Điền Widget key, chọn vị trí (position) của Đồng hồ (tốt nhất là chọn các Sidebar)

Screen Shot 2021-03-22 at 08.13.44.png

Bước 3: ở ô Template, paste đoạn code bên dưới vào

HTML:
<div class="block">
    <div class="block-container">
        <h3 class="block-minorHeader"><i class="fad fa-clock"></i> Mấy giờ rồi?</h3>
        <div class="block-body block-row">
            <style>
                .clock_local{margin-left:auto;margin-right:auto;border-radius:50%;background:#fff url("/skins_clock/clock8.svg") no-repeat center;height:228px;width:228px;float:none;position:relative}.clock_local:after{background:#f2930d;border-radius:50%;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4%;height:4%;z-index:10}.minutes-container,.hours-container,.seconds-container{position:absolute;top:0;right:0;bottom:0;left:0}.hours{background:#185886;height:20%;left:48.75%;position:absolute;top:30%;transform-origin:50% 100%;width:2.5%}.minutes{background:#185886;height:40%;left:49%;position:absolute;top:10%;transform-origin:50% 100%;width:2%}.seconds{background:#f2930d;height:45%;left:49.5%;position:absolute;top:14%;transform-origin:50% 80%;width:1%;z-index:8}@keyframes rotate{100%{transform:rotateZ(360deg)}}.hours-container{animation:rotate 43200s infinite linear}.minutes-container{animation:rotate 3600s infinite linear}.seconds-container{animation:rotate 60s infinite linear}
            </style>
            <article class="clock_local">
                <div class="hours-container">
                    <div class="hours"></div>
                </div>
                <div class="minutes-container">
                    <div class="minutes"></div>
                </div>
                <div class="seconds-container">
                    <div class="seconds"></div>
                </div>
            </article>
            <script>
                var date=new Date;var seconds=date.getSeconds();var minutes=date.getMinutes();var hours=date.getHours();var hands=[{hand:'hours',angle:(hours*30)+(minutes/2)},{hand:'minutes',angle:(minutes*6)+(seconds/10)},{hand:'seconds',angle:(seconds*6)}];for(var j=0;j<hands.length;j++){var elements=document.querySelectorAll('.'+hands[j].hand);for(var k=0;k<elements.length;k++){elements[k].style.webkitTransform='rotateZ('+hands[j].angle+'deg)';elements[k].style.transform='rotateZ('+hands[j].angle+'deg)';if(hands[j].hand==='minutes'){elements[k].parentNode.setAttribute('data-second-angle',hands[j+1].angle)}}}
            </script>
        </div>
    </div>
</div>

Nhớ ấn chọn "Advanced mode" ở cuối trang

Screen Shot 2021-03-22 at 08.17.36.png


Bước cuối: copy thư mục skins_clock trong GitHub tungpham42/AnalogClock vào thư mục root

Chúc bạn thành công
 
Bài tương tự
Bắt đầu Tiêu đề Diễn đàn Trả lời Ngày
L Bocvip Club Chia sẽ sẽ được tặng miễn phí code 9/1/2021 Rao vặt tổng hợp 0
L Bocvip Club Chia sẽ sẽ được tặng miễn phí code 29/12/2020.. Thư giãn - Giải trí 0
khalai15 Bayvip Chia sẻ 100+ code Kho Báu Huyền Thoại mới nhất 2020 Rao vặt tổng hợp 0
khalai15 Bayvip Chia sẻ 100+ code Kho Báu Huyền Thoại mới nhất 2020 Rao vặt tổng hợp 0
khalai15 Bayvip Chia sẻ 100+ code Kho Báu Huyền Thoại mới nhất 2020 Rao vặt tổng hợp 0
khalai15 Bay247- dành 100 xuất code cho tất cả các tài khoản hay nạp game và chia sẻ Quản trị kinh doanh 0
khalai15 Bay247- dành 100 xuất code cho tất cả các tài khoản hay nạp game và chia sẻ Quản trị kinh doanh 0
K Hack Tài Xỉu Gamvip.com - Nhận OTP Telesafe GamVip - Nhận Code Gamvip Rao vặt tổng hợp 0
K Nhận CODE GAMVIP - Gift Code G88.Vin 2021 Rao vặt tổng hợp 0
K [Giftcode Gamvip] Download Giftcode Gam Vip , Code Gam Vip 2021 Rao vặt tổng hợp 0
K Gamvip.com - Cổng Game Quốc Tế - Gift Code GAMVIP 88 Vin 2021 Rao vặt tổng hợp 0
K Nhận CODE Gamvip | Nhận GIFTCODE 1G88 2021 Rao vặt tổng hợp 0
K Cách Kích Hoạt Code Gamvip , Hướng Dẫn Nhận CODE Gamvip 2021 Rao vặt tổng hợp 0
K HƯỚNG DẪN Cách Nhận Giftcode Gamvip Tại Telesafe Nhận CODE GAMVIP Tháng 3/2021 Rao vặt tổng hợp 0
L Bay247 khoe điểm VP xơi ngay code 14/2/2021 Quản trị kinh doanh 0
L Bay247 chi duy nhất trong 3 ngày nhận code X3 miễn phí chốt ngày 14/2/2021 Quản trị kinh doanh 0
L Bay247 Kho trò chơi phong phú và đặc sắc của nhận code miễn phí 14/2/2021 Quản trị kinh doanh 0
L Bay247 Nạp Tha Ga Nhận code đầu năm mới 12/2/2021 Quản trị kinh doanh 0
L Bay247 | Tặng Gift Code Game Online HOT nhất 12/2/2021 Quản trị kinh doanh 0
L Bay247 xin phép phát hành code miễn phí 12/2/2021 Quản trị kinh doanh 0
L Bay247 tri ăn mỗi ngày code miễn phí cho mọi tài khoản mới nhất ngày 11/2/2021 Quản trị kinh doanh 0
L Bay247 Tặng 10 mã nhập code miễn phí khởi nghiệp 8/2/2021. Rao vặt tổng hợp 0
L Bay247 Tặng 10 mã nhập code miễn phí khởi nghiệp 8/2/2021 Quản trị kinh doanh 0
L Bay247 Nhận gift code game, mã quà tặng game, code năm 8/2/2021 Quản trị kinh doanh 0
L Bay247 Nhận gift code game, mã quà tặng game, code năm 7/2/2021 Quản trị kinh doanh 0
codegamvip Nhận Code Gamvip | Nhận Giftcode Gamvip 500K Miễn Phí Rao vặt tổng hợp 0
codegamvip HƯỚNG DẪN KÍCH HOẠT Code GamVip Nhận GiftCode 500k Rao vặt tổng hợp 0
codegamvip Code GamVip FREE- Phát Lộc Giftcode GamVip Hằng Ngày Rao vặt tổng hợp 0
L Bay247 [Event] Nạp thẻ nhận code 5.2.2021 Quản trị kinh doanh 0
L Bay247 [Event] Săn Át bắt ngay Vip Code 5.2.2021 Quản trị kinh doanh 0
L Gift Code Vương Quốc Bay247 5.2.2021 Quản trị kinh doanh 0
L Bay247 - Tặng Gift Code Mỗi Ngày 4/2/2021 Quản trị kinh doanh 0
L Bay247 Nhận gift code game, mã quà tặng game, code năm 4/2/2021 Quản trị kinh doanh 0
L Bay247 Nhận gift code game, mã quà tặng game, code năm 2021 Thư giãn - Giải trí 0
L Bay247 - Tặng Gift Code Mỗi Ngày 2021 Thư giãn - Giải trí 0
L Bay247 xả code miễn phí khởi nghiệp năm 3/2/2021 Rao vặt tổng hợp 0
codegamvip Nhận CODE Gamvip | Nhận GIFTCODE Gamvip 1G88 Rao vặt tổng hợp 0
codegamvip Nhận Code Gamvip | Nhận Vipcode Gamvip 500K Miễn Phí Rao vặt tổng hợp 1
L Bay247 xả code miễn phí khởi nghiệp năm 2/2/2021 Quản trị kinh doanh 0
L Code miễn phí Game bay247 mới nhất năm 2/2/2021 Quản trị kinh doanh 0
L Code miễn phí Game bay247 mới nhất năm 2021.. Quản trị kinh doanh 0
L Bay247 xả code miễn phí khởi nghiệp năm 2021 Quản trị kinh doanh 0
L Bay247–cơ hội Rước xe xịn, rinh Code Vip cuối tháng 1 toàn miễn phí nhé ae 30/1/2021 Quản trị kinh doanh 0
L Bay247 [HƯỚNG DẪN] NHẬN GIFTCODE VÀ NHẬP CODE Quản trị kinh doanh 0
L Bay247–cơ hội Rước xe xịn, rinh Code Vip cuối tháng 1 toàn miễn phí nhé ae Quản trị kinh doanh 0
L Bay247 [Event] Loan tin nhận Code Big Update 2.0 Quản trị kinh doanh 0
L Bay247 [Event] Vua Tài Xỉu – Rước xe xịn, rinh Code Vip Quản trị kinh doanh 0
L Bay247 xả code miễn phí ai nhanh tay nào miễn phí Quản trị kinh doanh 0
L Game slot tặng code ngay khi đăng kí BAY247 Quản trị kinh doanh 0
L Bay247 khoe điểm VP xơi ngay code Quản trị kinh doanh 0

Bài tương tự

Mấy giờ rồi?

Thành viên trực tuyến

Không có thành viên nào trực tuyến.

Chúc mừng sinh nhật

Hoạt động gần đây

Bên trên Bottom