Логотип с изображением и текстом

Поддержка
1

Здравствуйте.

У меня для форума установлено изображение «логотипа» и задан «заголовок».

В настоящее время в шапке отображается только «логотип». Я хочу, чтобы «заголовок» отображался рядом с ним справа. Мне нужно, чтобы это работало так же, как заголовки тем располагаются рядом с логотипом при прокрутке страницы вниз: по умолчанию показывались логотип и название сайта, а при прокрутке обсуждения название сайта заменялось бы заголовком темы.

Возможно ли это? Я искал в Google, но не нашёл решения.

Спасибо.

2

Если вам нужен текст, почему бы не разработать логотип, включающий его?

3

Вы можете сделать что-то вроде этого:

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Here is some text";
}

image
image1004×394 21.3 KB

Вам всё ещё потребуется скрывать его там, где оно не нужно, например, когда отображается заголовок темы.

image
image994×402 20.6 KB

Это можно сделать, отключив отображение на страницах с классом тела archetype-regular (в этом случае его не будет на страницах тем вообще) или с помощью JavaScript, который заставит его исчезать, как это происходит с большим и маленьким логотипами при прокрутке.

5

Спасибо большое за ваш ответ. Это замечательно!

Подскажите, какой JS-код мне понадобится, чтобы заставить его исчезнуть, как вы упоминали? Это было бы отлично.

6

Попробуйте это

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Here is some 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>

Вот это в виде компонента

7

Огромное спасибо! Это идеально.