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

[PVS]

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):

<img src="{{ base_url(property('publicLogoUrl')) }}"
                        alt="{$xf.options.boardTitle}"
                        {{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />

Thay bằng:

<span class="ctaLogoText">{$xf.options.boardTitle}</span>

Sau đó tìm tiếp dòng sau (khoảng dòng 141):

<img src="{{ base_url(property('publicLogoUrl')) }}"
                        alt="{$xf.options.boardTitle}"
                    {{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />

Thay bằng:

<span class="ctaLogoTextSmall">{$xf.options.boardTitle}</span>

Văn bản ctaLogoText và 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ụ:

<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:

​

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:

.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:

​

Đ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 đề:

<span class="ctaLogoText">{{ ' Crypt The Apex '|emoji }}</span>

...

<span class="ctaLogoTextSmall">{{ ' Crypt The Apex '|emoji }}</span>

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):

.ctaLogoTextSmall
{
    font-size: 10px;
}

.p-header-content
{
    padding: 2px 0;
}

Kết quả sẽ như sau:

​

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:

​

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​