Bild und Text als Logo

Unterstützung
1

Hallo.

Ich habe ein ‘Logo’-Bild für mein Forum festgelegt. Außerdem habe ich einen ‘Titel’ eingestellt.

Derzeit wird im Header nur das ‘Logo’ angezeigt. Ich möchte erreichen, dass der ‘Titel’ rechts daneben erscheint. Ich möchte dies im gleichen Format wie bei den Themenüberschriften, die neben dem Logo stehen, wenn man auf einer Seite nach unten scrollt – also standardmäßig Logo & Seitentitel, und beim Scrollen durch einen Thread wird der Seitentitel durch den Titel des Threads ersetzt.

Ist das möglich? Ich habe bei Google gesucht, konnte aber keine Lösung finden.

Vielen Dank.

2

Wenn du auch Text möchtest, warum gestaltest du dann kein Logo, das den Text enthält?

3

Du kannst so etwas wie folgendes tun:

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Hier ist ein Text";
}

image
image1004×394 21.3 KB

Du musst es dennoch an Stellen ausblenden, an denen es nicht angezeigt werden soll, beispielsweise wenn der Titel eines Themas dargestellt wird.

image
image994×402 20.6 KB

Das kannst du erreichen, indem du sicherstellst, dass es auf Seiten mit der Body-Klasse archetype-regular nicht angezeigt wird (in diesem Fall wird es auf Themen-Seiten gar nicht erscheinen) oder indem du JavaScript verwendest, das es verschwinden lässt – ähnlich wie beim Wechsel zwischen dem großen und kleinen Logo, sobald du zu scrollen beginnst.

5

Vielen Dank für Ihre Antwort. Das ist großartig!

Wissen Sie, welches JS ich benötigen würde, um es wie erwähnt verschwinden zu lassen? Das wäre hervorragend.

6

Probieren Sie dies aus

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Hier ist ein Text";
}
.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>

Hier ist es als Komponente

7

Vielen Dank! Das ist perfekt.