로고수정이 잘 안되는 경우 처리 방법
페이지 정보
작성자
소프트존
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
작성일 22-06-21 00:10
본문
로고수정이 잘 안되시는 경우 처리 방법 입니다.
테마가 업데이트 되어 약간 수정되기도 하였지만 대부분 작업은 동일하다고 보시면 됩니다.
우선 테마폴더에 있는 navigation.php 파일을 열고 아래와 같은 부분을 찾아주세요.
<a href="<?php echo G5_URL?>"><img src="<?php echo G5_THEME_URL?>/img/logo7.png" class="img-responsive m-logo" style="width:200px;"></a>
위 내용이 로고 부분 입니다.
저는 로고 크기가 작기 때문에 width: 200px 을 이용해서 값을 고정시켜 놓았습니다.
하지만 긴 로고나 크기가 큰 로고의 경우에는 사이즈가 너무 작게 나오는 단점이 있습니다.
<a href="<?php echo G5_URL?>"><img src="<?php echo G5_THEME_URL?>/img/logo7.png" class="logo7"></a>
우선 해당 스타일시트와 클래스를 모두 제거하고 class="logo7" 을 추가해줬습니다. 클래스값은 임의로 지정이 가능합니다.
위 내용을 테마폴더에 있는 css 폴더 아래에 있는 common.css 나 style-aqours.css 둘중 아무곳 맨 하단에
입력해주세요.
[PC 데스크탑]
[MOBILE 모바일]
데스크탑과 태블릿에서는 200 사이즈로 보이고
모바일에서는 100px 로 줄이는 코드 입니다.
하지만 좌측 로고가 100px 줄어든 만큼 여백이 문제가 생깁니다.
[완성본]
[완성코드]
미디어쿼리를 이용하여 브라우저 크기와 기기에 맞게 처리하실 수 있습니다.
해당 내용은 에티테마에만 국한되지 않습니다.
감사합니다.
테마가 업데이트 되어 약간 수정되기도 하였지만 대부분 작업은 동일하다고 보시면 됩니다.
우선 테마폴더에 있는 navigation.php 파일을 열고 아래와 같은 부분을 찾아주세요.
<a href="<?php echo G5_URL?>"><img src="<?php echo G5_THEME_URL?>/img/logo7.png" class="img-responsive m-logo" style="width:200px;"></a>
위 내용이 로고 부분 입니다.
저는 로고 크기가 작기 때문에 width: 200px 을 이용해서 값을 고정시켜 놓았습니다.
하지만 긴 로고나 크기가 큰 로고의 경우에는 사이즈가 너무 작게 나오는 단점이 있습니다.
<a href="<?php echo G5_URL?>"><img src="<?php echo G5_THEME_URL?>/img/logo7.png" class="logo7"></a>
우선 해당 스타일시트와 클래스를 모두 제거하고 class="logo7" 을 추가해줬습니다. 클래스값은 임의로 지정이 가능합니다.
/* 모바일기기 1 */
@media only screen and (max-width: 320px) {
.logo7{ width: 100px; }
}
/* 모바일기기 2 */
@media only screen and (min-width: 321px) and (max-width: 768px){
.logo7{ width: 100px; }
}
/* 태블릿 */
@media only screen and (min-width: 769px) and (max-width: 1200px){
.logo7{ width: 200px; }
}
/* 데스크탑 */
@media only screen and (min-width: 1201px) {
.logo7{ width: 200px; }
}
입력해주세요.
[PC 데스크탑]
[MOBILE 모바일]
데스크탑과 태블릿에서는 200 사이즈로 보이고
모바일에서는 100px 로 줄이는 코드 입니다.
하지만 좌측 로고가 100px 줄어든 만큼 여백이 문제가 생깁니다.
[완성본]
[완성코드]
/* 모바일기기 1 */
@media only screen and (max-width: 320px) {
.logo7{ width: 100px; padding-top: 10px; margin-left:10px; }
}
/* 모바일기기 2 */
@media only screen and (min-width: 321px) and (max-width: 768px){
.logo7{ width: 100px; padding-top: 10px; margin-left:10px; }
}
/* 태블릿 */
@media only screen and (min-width: 769px) and (max-width: 1200px){
.logo7{ width: 200px; }
}
/* 데스크탑 */
@media only screen and (min-width: 1201px) {
.logo7{ width: 200px; }
}
미디어쿼리를 이용하여 브라우저 크기와 기기에 맞게 처리하실 수 있습니다.
해당 내용은 에티테마에만 국한되지 않습니다.
감사합니다.
댓글목록
등록된 댓글이 없습니다.