- Reaction score
- 48
- Points
- 55
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:
<img src="{{ base_url(property('publicLogoUrl')) }}"
alt="{$xf.options.boardTitle}"
{{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
Replace it with this:
Code:
<span class="ctaLogoText">{$xf.options.boardTitle}</span>
Then look for this line (around line 141):
Code:
<img src="{{ base_url(property('publicLogoUrl')) }}"
alt="{$xf.options.boardTitle}"
{{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
Replace it with this:
Code:
<span class="ctaLogoTextSmall">{$xf.options.boardTitle}</span>
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:
<span class="ctaLogoText">Clip The Apex</span>
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 (BB code):
.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;
}
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:
<span class="ctaLogoText">{{ ' Crypt The Apex '|emoji }}</span>
...
<span class="ctaLogoTextSmall">{{ ' Crypt The Apex '|emoji }}</span>
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:
.ctaLogoTextSmall
{
font-size: 10px;
}
.p-header-content
{
padding: 2px 0;
}
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.
XenForo is a commercial Internet forum software package written in PHP. It was developed by former vBulletin developers, and it is designed to enhance community engagement and provide forum owners with a powerful platform to build and manage their online communities.
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It enables the separation of content from design, allowing for greater flexibility and control in the layout and appearance of web pages.