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 :
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 :
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
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 :
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.
Crédit : Brogan
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) :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Replace it with this :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Then look for this line (around line 141) :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Replace it with this :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
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 :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
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 :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
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 :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
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) :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
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.
Crédit : Brogan
