Text Logo

XF 2.0 / 2.1 / 2.2 Text Logo

Add-on xenforo 2

Ressources et modules complémentaires pour XenForo 2

Styles xenforo 2

Styles / Thèmes et apparence pour xenforo 2

Templates xenforo 2

Codes pour modifier les templates sur xenforo 2

Section Premium

Add-on et Styles pour membre Premium
Text Logo

XF 2.0 / 2.1 / 2.2 Text Logo

Catégorie Catégorie Modifications Templates
Titre du sujet Titre du sujet Text Logo
Auteur de la discussion Auteur de la discussion laurent68
Date de début Date de début
Réponses Réponses 4
Affichages Affichages 445
Réaction Réaction 0
Dernier message par Dernier message par alesasss

laurent68

Fondateur

Staff
fondateur
Réputation: 100%
Discussions
4 855
Messages
12 608
Solutions
85
J'aime
7 890
Points
198
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 - the first is for the regular sized logo, the second is for the small logo, which is displayed at narrow screen widths (mobile).

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

Replace it with this :

Then look for this line (around line 141) :

Replace it with this :

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 :

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

.png


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

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 :

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

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

The result is this :

.png


Again, change the styling to suit.

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

.png


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

Crédit : Brogan
 
Contenu similaire Les plus vues Voir plus
Retour
Haut Bas