이미지와 텍스트를 로고로 사용

제품 지원
1

안녕하세요.

포럼에 ‘로고’ 이미지를 설정해 두었습니다. 또한 '제목’도 설정되어 있습니다.

현재 헤더에는 '로고’만 표시됩니다. 로고 오른쪽에 '제목’이 함께 표시되도록 하고 싶습니다. 페이지를 아래로 스크롤할 때 토픽 제목이 로고 옆에 표시되는 것과 동일한 형식을 원합니다. 즉, 기본적으로 로고와 사이트 제목이 표시되고, 스레드를 스크롤하면 사이트 제목 대신 해당 스레드의 제목이 표시되도록 하는 것입니다.

이것이 가능한가요? 검색해 보았지만 해결책을 찾을 수 없습니다.

감사합니다.

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 body 클래스가 있는 페이지에서 표시하지 않도록 하면(이 경우 토픽 페이지에는 전혀 표시되지 않음), 또는 스크롤을 시작하면 대형 로고와 소형 로고가 교체되는 것처럼 사라지게 하는 JS를 사용하여 이를 구현할 수 있습니다.

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

정말 감사합니다! 완벽합니다.