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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,803
Được Like
11,099
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​
 

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

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom