Aligner le logo et le slogan dans Cassiopeia

Par défaut, le logo et le slogan sont affichés sur deux lignes différentes dans Cassiopeia. Si vous préférez avoir votre slogan affiché à droite de votre logo et sur la même ligne, alors ce qui suit est fait pour vous. Dans ce tutoriel, nous allons voir comment aligner le logo et le slogan dans Cassiopeia, le template par défaut de Joomla 4.

Comment aligner le logo et le slogan dans Cassiopeia ?

Par défaut, le logo et le slogan sont affichés sur deux lignes, le logo au dessus du slogan :

La première solution consiste à faire une override du fichier index.php de Cassiopeia. Pour cela, il faut copier le template et travailler à partir de cette copie.
Faisable mais compliqué.

Je vous propose une solution beaucoup plus simple et rapide pour aligner le logo et le slogan dans Cassiopeia.
Voici la structure du code qui affiche cette partie de la page. Pour facilier la lecture, j'ai commenté les différentes parties :

<div class="grid-child">
	<div class="navbar-brand">
		
		<!-- Affichage du logo -->
		<a class="brand-logo" href="<?php echo $this->baseurl; ?>/">
			<?php echo $logo; ?>
		</a>
		
		<!-- Affichage du slogan -->
		<?php if ($this->params->get('siteDescription')) : ?>
		<div class="site-description">
			<?php echo htmlspecialchars($this->params->get('siteDescription')); ?>
		</div>
		<?php endif; ?>
		
	</div>
</div>

Si l'on regarde attentivement, on se rend compte que le slogan est dans une <div> imbriquée.

Rassurez-vous, c'est une bonne nouvelle car il suffit simplement d'ajouter une petite ligne de code dans le fichier user.css pour aligner le logo et le slogan dans Cassiopeia.

Ouvrez le fichier user.css de Cassiopeia dans l'éditeur de Joomla et ajouter simplement cette ligne :

.site-description {display: inline-block; margin-left: 10px;}

Enregristrez votre saisie, videz éventuellement le cache et rafraichissez votre page pour constater que votre slogan est maintenant affiché à droite de votre logo :

Et voilà, ce tutoriel est déjà terminé ! Avouez que ce n'était vraiment pas compliqué. Vous avez réussi à aligner votre logo et votre slogan sur la même ligne.