Categories

Text Logo

You are here:
< All Topics

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:
Rich (BB 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:
Rich (BB 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:
Rich (BB code):

<span class="ctaLogoText">Clip The Apex</span>

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

PAGE_CONTAINER.png

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:

logo.png

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:

logo-halloween.png

Again, change the styling to suit.

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

logo-xmas.png

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

If you found this tutorial useful, donations of positive emojis are gladly received. :cool:

Table of Contents