Tutorial 2x Text Logo - Logo dạng văn bản cho XenForo 2

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 08/10/2019 lúc 10:01:24.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    10,966
    Đã được thích:
    6,606
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    Text Logo - Logo dạng văn bản cho XenForo 2

    Nếu bạn muốn giữ mọi thứ đơn giản (và bạn không có khả năng chỉnh sửa đồ họa) thì logo văn bản là dành cho bạn.

    Không còn phải loay hoay với các chương trình đồ họa và nghĩ ra thứ gì đó trông giống như được tạo ra bởi một đứa trẻ 8 tuổi.

    Thay đổi logo cũng dễ dàng hơn nhiều cho nhiều style, logo theo mùa, v.v.

    Có hai bước đơn giản để thay thế logo hình ảnh bằng văn bản.

    Tìm dòng sau trong template PAGE_CONTAINER (khoảng dòng 120):
    Mã:
    <img src="{{ base_url(property('publicLogoUrl')) }}"
                            alt="{$xf.options.boardTitle}"
                            {{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
    Thay bằng:
    Mã:
    <span class="ctaLogoText">{$xf.options.boardTitle}</span>
    Sau đó tìm tiếp dòng sau (khoảng dòng 141):
    Mã:
    <img src="{{ base_url(property('publicLogoUrl')) }}"
                            alt="{$xf.options.boardTitle}"
                        {{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
    Thay bằng:
    Mã:
    <span class="ctaLogoTextSmall">{$xf.options.boardTitle}</span>
    Văn bản ctaLogoText ctaLogoTextSmall là các class CSS được sử dụng để tạo kiểu cho logo cho màn hình nhỏ và tiêu chuẩn.

    Văn bản {$xf.options.boardTitle} là văn bản logo.

    Ở đây mình đang sử dụng board title từ các tùy chọn, nhưng bạn chỉ có thể sử dụng văn bản tiêu chuẩn, ví dụ:
    Mã:
    <span class="ctaLogoText">Clip The Apex</span>
    Kết quả cuối cùng khi xem các thay đổi tùy chỉnh cho template phải như sau:

    PAGE_CONTAINER.png
    Tiếp theo, chỉ cần thêm kiểu dáng mong muốn của bạn vào template Extra.less, như sau:
    Mã:
    .ctaLogoText,
    .ctaLogoTextSmall
    {
        font-size: 28px;
        text-transform: uppercase;
        font-weight: 800;
        font-family: 'Arial', sans-serif;
        color: #ff9900;
    }
    
    .ctaLogoTextSmall
    {
        font-size: 14px;
    }
    
    .p-nav-smallLogo
    {
        max-width: 140px;
    }
    
    .p-nav-smallLogo a
    {
        text-decoration: none;
    }
    
    .p-nav-smallLogo img
    {
        display: inline;
    }
    
    .p-header-content
    {
        padding: 0 0;
    }
    Block code đầu tiên có kiểu dáng chung cho logo của tất cả các kích cỡ màn hình.
    Các mục khác chủ yếu để đảm bảo logo hiển thị chính xác trên chiều rộng nhỏ nhất.

    Kết quả cuối cùng là đây:

    logo.png
    Điều chỉnh kiểu dáng và giá trị cho phù hợp.

    Với phương pháp này, việc cập nhật logo rất nhanh chóng và dễ dàng.

    Ví dụ: nếu bạn muốn thêm một số hình ảnh cho Halloween, bạn có thể làm như vậy bằng cách chỉnh sửa lại template PAGE_CONTAINER.
    Ở đây mình sẽ thêm một số emoji và cũng thay đổi tiêu đề:
    Mã:
    <span class="ctaLogoText">{{ ' Crypt The Apex '|emoji }}</span>
    
    ...
    
    <span class="ctaLogoTextSmall">{{ ' Crypt The Apex '|emoji }}</span>
    screenshot_1570503778.png

    Ký tự | là một bộ lọc. Nó nhận giá trị giữa ''(chuỗi có văn bản và emoji) và áp dụng bộ lọc emoji.
    Bộ lọc emoji thay thế các ký tự emoji thực bằng hình ảnh.

    Để phù hợp với những thay đổi đó, các mục trong template Extra.less cũng phải được cập nhật nhưng thường chỉ dành cho kích thước phông chữ nhỏ và phần đệm (nếu muốn):
    Mã:
    .ctaLogoTextSmall
    {
        font-size: 10px;
    }
    
    .p-header-content
    {
        padding: 2px 0;
    }
    Kết quả sẽ như sau:

    logo-halloween.png
    Một lần nữa, thay đổi kiểu dáng cho phù hợp.

    Đây là một cái khác cho Xmas, chỉ mất vài giây:

    logo-xmas.png
    Rõ ràng đây là những ví dụ rất đơn giản.
    Logo phức tạp hơn nhiều có thể bằng cách sử dụng CSS một cách hiệu quả.

    Chúc các bạn thành công.


    Nguồn: xenforo.com​
     

Chia sẻ trang này