Image et texte en tant que logo

Soutien
1

Bonjour,

J’ai défini une image de « logo » pour mon forum. J’ai également défini un « titre ».

Actuellement, dans l’en-tête, seul le « logo » s’affiche. Je souhaiterais que le « titre » apparaisse à côté, sur la droite. J’aimerais qu’il s’affiche dans le même format que les titres de sujets qui apparaissent à côté du logo lorsque vous faites défiler une page : ainsi, le logo et le titre du site s’affichent par défaut, puis lorsque vous faites défiler un sujet, le titre de celui-ci remplace le titre du site.

Est-ce possible ? J’ai cherché sur Google mais je n’ai pas trouvé de solution.

Merci.

2

Si vous voulez du texte aussi, pourquoi ne pas concevoir un logo incluant le texte ?

3

Vous pouvez faire quelque chose comme ceci

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Voici un texte";
}

image
image1004×394 21.3 KB

Vous devrez toujours le masquer là où vous ne le souhaitez pas, par exemple lorsque le titre d’un sujet est affiché.

image
image994×402 20.6 KB

Vous pouvez le faire en empêchant son affichage sur les pages ayant la classe de corps archetype-regular (dans ce cas, il n’apparaîtra pas du tout sur les pages de sujets) ou en utilisant du JavaScript pour le faire disparaître, comme le font les logos Grand et Petit qui sont échangés une fois que vous commencez à défiler.

5

Merci beaucoup pour votre réponse. C’est super !

Savez-vous quel code JS il me faudrait pour le faire disparaître comme vous l’avez mentionné ? Ce serait excellent.

6

Essayez ceci

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Voici un texte";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after  {
    display:none;
}

<script>
    $(document).ready(function() {
    	$(window).scroll(function(){
    		checkScroll()
        }); 
    
    	function checkScroll() {
    		var y = $(window).scrollTop();		
    		if (y > 55) {
                document.getElementById("main").classList.add('no-text');
            } else {
                document.getElementById("main").classList.remove('no-text');
            }
    	}
    	checkScroll();
    });
</script>

Voici une version sous forme de composant :

7

Merci beaucoup ! C’est parfait.