에티테마

로고수정이 잘 안되는 경우 처리 방법

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 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" 을 추가해줬습니다. 클래스값은 임의로 지정이 가능합니다.


/* 모바일기기 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; }
 }

위 내용을 테마폴더에 있는 css 폴더 아래에 있는 common.css 나 style-aqours.css 둘중 아무곳 맨 하단에 
입력해주세요.

[PC 데스크탑]

b6feebb80507d420b5d77ece717d3341_1655737598_35.jpg


[MOBILE 모바일]


b6feebb80507d420b5d77ece717d3341_1655737652_78.jpg


데스크탑과 태블릿에서는 200 사이즈로 보이고
모바일에서는 100px 로 줄이는 코드 입니다.

하지만 좌측 로고가 100px 줄어든 만큼 여백이 문제가 생깁니다.

[완성본]

b6feebb80507d420b5d77ece717d3341_1655737772_91.jpg

[완성코드]

/* 모바일기기 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; }
 }


미디어쿼리를 이용하여 브라우저 크기와 기기에 맞게 처리하실 수 있습니다.
해당 내용은 에티테마에만 국한되지 않습니다.
감사합니다.

 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.

Total 82건 1 페이지