Text Logo

wizard · Jul 31, 2024

If you like to keep things simple (and have zero graphic editing ability, like me) then a text logo

Compatibility with XenForo: 2.1

If you like to keep things simple (and have zero graphic editing ability, like me) then a text logo is for you.

No more messing around with graphics programs and coming up with something which looks like it was created by an 8 year old.

It's also much easier to change the logo for multiple styles, seasonal logos, etc.
More on that later.

There are two simple steps required to replace an image logo with text.

Look for this line in the PAGE_CONTAINER template (around line 120):

Code:

You must log in to view
(3 lines)

Replace it with this:

Code:

You must log in to view
(1 lines)

Then look for this line (around line 141):

Code:

You must log in to view
(3 lines)

Replace it with this:

Code:

You must log in to view
(1 lines)

The text in orange and purple are the CSS classes used to style the logo for standard and small screens.
The green text is the logo text.

Here I am using the board title from the options, but you can just use standard text, for example:

Code:

You must log in to view
(1 lines)

The end result when viewing the custom changes to the template should be as follows:

Next, just add your desired styling to the extra.less template, like so:

RICH:

You must log in to view
(34 lines)

The first block of code has common styling for the logo for all screen sizes.
The other entries are primarily to ensure the logo displays correctly on the smallest widths.

The final result is this:

Adjust the styling and values to suit.

With this approach, updating the logo is quick and easy.

If you want to add some images for Halloween, for example, you can do so by again editing the PAGE_CONTAINER template.
Here I'm going to add some emojis and also change the title:

Code:

You must log in to view
(5 lines)

The | pipe character is a filter. It takes the value between the '' (the string with the text and emoji) and applies the emoji filter.
The emoji filter replaces real emoji characters with images.

To accommodate those changes, the entries in the extra.less template must also be updated but typically only for the small font size and the padding (if desired):

Code:

You must log in to view
(9 lines)

The result is this:

Again, change the styling to suit.

Here's another one for Xmas, which took just seconds:

Obviously these are very simple examples.
Much more complex logos are possible by utilising CSS effectively.

Text Logo

If you like to keep things simple (and have zero graphic editing ability, like me) then a text logo​

If you like to keep things simple (and have zero graphic editing ability, like me) then a text logo