한가지 더 문의 드립니다.

작성일 24-03-27 19:26

안녕하세요~
해당 내용을 확인 후에 다시 코멘트 드리도록 하겠습니다.
조금만 기다려주세요~

소프트존님의 댓글

작성일 24-03-27 19:31

메인 슬라이드는 유동적으로 수정이 가능합니다.
미디어쿼리를 사용했기 때문에 원하는 브라우저 크기에 따라서
별도로 조정이 가능합니다.

테마폴더 / CSS / COMMON.CSS 쪽에 "슬라이드" 로 검색해보시면 해당 슬라이드 크기를
기기에 맞게 설정하실 수 있을겁니다.

못찾으시면 다시 코멘트 주세요~

binsfam님의 댓글

작성일 24-03-27 20:26

넵 답변 고맙습니다. 그럼 css만 수정해서 작업해 보겠습니다. ^^

소프트존님의 댓글

작성일 24-03-27 20:27

http://ety.kr/board/ety_theme_manual/34?sfl=wr_subject&stx=%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C&sop=and

코드줄번호는 조금씩 틀릴 수 있으나 수정하는 방법이 여기에 있습니다.
참고 부탁드리겠습니다.

소프트존님의 댓글

작성일 24-03-31 16:06

안녕하세요. 평일에 작업량이 많아서 주말에 정리했습니다.

현재 업데이트전 테마들은 모두 네비가 3개의 종류도 되어 있어서 지금 현재 모든 테마 업데이트 중입니다.
pc, mobile 로만 동작하게끔 처리중입니다.

일단 모바일로 줄이는 구간 768px 크기에서 메뉴가 뜨는걸 제거하는 방법 입니다.

1. 테마폴더 / navigation.php 보시면 hidden-md 로 검색하셔서 우측에 클래스를 하나 추가해주세요. hidden-md hidden-sm 이렇게 hidden-sm 한개를 더 추가해주세요.
예를들어서 <div class="mobile-nav mobile-sns hidden-lg hidden-md"> 되어 있는 부분을 아래 처럼 변경해주세요.
<div class="mobile-nav mobile-sns hidden-lg hidden-md hidden-sm">
총 4개가 있습니다. 모든 내용에 클래스를 추가해주세요~

2. 테마폴더 / css / style_aqours.css 맨 하단에 아래 스타일을 추가해주세요.

<style>
@media only screen and (min-width: 321px) and (max-width: 768px){
    .navbar-default .navbar-toggle {
        display: block;
        border-color: #ddd;
        position: absolute;
        right: 10px;
    }
    .collapse {
        display: block;
    }   
    #slide-navbar-collapse {
        width: 280px;
        height: 100%;
        max-height: 100%;
        position: fixed;
        top: 0;
        left: 0px;
        z-index: 999;
        background: #111;
    }   
    .navbar {
        position: relative;
        min-height: 0px;
        margin-bottom: 0px;
        border: 1px solid transparent;
    }
    .navbar-default{
        padding:0px;
    }   
    .navbar-header {
        float: left;
        padding: 0px;
        text-align: center;
        width: 100%;
        padding-top: 0px;
        margin-bottom: 15px;
    }   
}
@media only screen and (min-width: 768px) and (max-width: 769px){
    .navbar-default .navbar-toggle {
        display: block;
        border-color: #ddd;
        position: absolute;
        right: 10px;
    }
    .navbar-nav{
        display:none;
    }

    #slide-navbar-collapse {
        width: 280px;
        height: 100%;
        max-height: 100%;
        position: fixed;
        top: 0;
        left: 0px;
        z-index: 999;
        background: #111;
    }   
    .navbar {
        position: relative;
        min-height: 0px;
        margin-bottom: 0px;
        border: 1px solid transparent;
    }
    .navbar-default{
        padding:0px;
    }
    .navbar-header {
        float: left;
        padding: 0px;
        text-align: center;
        width: 100%;
        padding-top: 0px;
        margin-bottom: 15px;
    }   
}

</style>

위 처럼 추가해주시면 현재 보여지는 메뉴들이 닫히게 됩니다.
그러나 문제가 768px, 769px 에서는 모바일 버튼 클릭시 왼쪽메뉴가 동작하지 않게 됩니다.

조만간 모든 네비게이션 메뉴들을 수정해놓을 예정이므로 양해 부탁드리겠습니다.
다른 문의 있으시면 코멘트 부탁드리겠습니다.

즐거운 주말 되세요.

<p>안녕하세요. 평일에 작업량이 많아서 주말에 정리했습니다.<br><br>현재 업데이트전 테마들은 모두 네비가 3개의 종류도 되어 있어서 지금 현재 모든 테마 업데이트 중입니다.<br>pc, mobile 로만 동작하게끔 처리중입니다.<br><br>일단 모바일로 줄이는 구간 768px 크기에서 메뉴가 뜨는걸 제거하는 방법 입니다.<br><br>1. 테마폴더 / navigation.php 보시면 hidden-md 로 검색하셔서 우측에 클래스를 하나 추가해주세요. hidden-md hidden-sm 이렇게 hidden-sm 한개를 더 추가해주세요. <br>예를들어서&nbsp;&lt;div class="mobile-nav mobile-sns hidden-lg hidden-md"&gt; 되어 있는 부분을 아래 처럼 변경해주세요.<br>&lt;div class="mobile-nav mobile-sns hidden-lg hidden-md hidden-sm"&gt;<br>총 4개가 있습니다. 모든 내용에 클래스를 추가해주세요~<br><br>2. 테마폴더 / css / style_aqours.css 맨 하단에 아래 스타일을 추가해주세요.<br>&nbsp;</p><div style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">style</span><span style="color: #808080;">&gt;</span></div><div><span style="color: #c586c0;">@media</span> only <span style="color: #ce9178;">screen</span> and (<span style="color: #9cdcfe;">min-width</span>: <span style="color: #b5cea8;">321px</span>) and (<span style="color: #9cdcfe;">max-width</span>: <span style="color: #b5cea8;">768px</span>){</div><div>&nbsp; &nbsp; <span style="color: #d7ba7d;">.navbar-default</span> <span style="color: #d7ba7d;">.navbar-toggle</span> {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">display</span>: <span style="color: #ce9178;">block</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">border-color</span>: <span style="color: #ce9178;">#ddd</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">absolute</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">right</span>: <span style="color: #b5cea8;">10px</span>;</div><div>&nbsp; &nbsp; }</div><div>&nbsp; &nbsp; <span style="color: #d7ba7d;">.collapse</span> {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">display</span>: <span style="color: #ce9178;">block</span>;</div><div>&nbsp; &nbsp; } &nbsp; </div><div>&nbsp; &nbsp; <span style="color: #d7ba7d;">#slide-navbar-collapse</span> {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #b5cea8;">280px</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #b5cea8;">100%</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">max-height</span>: <span style="color: #b5cea8;">100%</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">fixed</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">top</span>: <span style="color: #b5cea8;">0</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">left</span>: <span style="color: #b5cea8;">0px</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">z-index</span>: <span style="color: #b5cea8;">999</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">background</span>: <span style="color: #ce9178;">#111</span>;</div><div>&nbsp; &nbsp; } &nbsp; </div><div>&nbsp; &nbsp; <span style="color: #d7ba7d;">.navbar</span> {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">relative</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">min-height</span>: <span style="color: #b5cea8;">0px</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">margin-bottom</span>: <span style="color: #b5cea8;">0px</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">border</span>: <span style="color: #b5cea8;">1px</span> <span style="color: #ce9178;">solid</span> <span style="color: #ce9178;">transparent</span>;</div><div>&nbsp; &nbsp; }</div><div>&nbsp; &nbsp; <span style="color: #d7ba7d;">.navbar-default</span>{</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">padding</span>:<span style="color: #b5cea8;">0px</span>;</div><div>&nbsp; &nbsp; } &nbsp; </div><div>&nbsp; &nbsp; <span style="color: #d7ba7d;">.navbar-header</span> {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">float</span>: <span style="color: #ce9178;">left</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">padding</span>: <span style="color: #b5cea8;">0px</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">text-align</span>: <span style="color: #ce9178;">center</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #b5cea8;">100%</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">padding-top</span>: <span style="color: #b5cea8;">0px</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">margin-bottom</span>: <span style="color: #b5cea8;">15px</span>;</div><div>&nbsp; &nbsp; } &nbsp; </div><div>}</div><div><span style="color: #c586c0;">@media</span> only <span style="color: #ce9178;">screen</span> and (<span style="color: #9cdcfe;">min-width</span>: <span style="color: #b5cea8;">768px</span>) and (<span style="color: #9cdcfe;">max-width</span>: <span style="color: #b5cea8;">769px</span>){</div><div>&nbsp; &nbsp; <span style="color: #d7ba7d;">.navbar-default</span> <span style="color: #d7ba7d;">.navbar-toggle</span> {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">display</span>: <span style="color: #ce9178;">block</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">border-color</span>: <span style="color: #ce9178;">#ddd</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">absolute</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">right</span>: <span style="color: #b5cea8;">10px</span>;</div><div>&nbsp; &nbsp; }</div><div>&nbsp; &nbsp; <span style="color: #d7ba7d;">.navbar-nav</span>{</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">display</span>:<span style="color: #ce9178;">none</span>;</div><div>&nbsp; &nbsp; }</div><br><div>&nbsp; &nbsp; <span style="color: #d7ba7d;">#slide-navbar-collapse</span> {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #b5cea8;">280px</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">height</span>: <span style="color: #b5cea8;">100%</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">max-height</span>: <span style="color: #b5cea8;">100%</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">fixed</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">top</span>: <span style="color: #b5cea8;">0</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">left</span>: <span style="color: #b5cea8;">0px</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">z-index</span>: <span style="color: #b5cea8;">999</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">background</span>: <span style="color: #ce9178;">#111</span>;</div><div>&nbsp; &nbsp; } &nbsp; </div><div>&nbsp; &nbsp; <span style="color: #d7ba7d;">.navbar</span> {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">position</span>: <span style="color: #ce9178;">relative</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">min-height</span>: <span style="color: #b5cea8;">0px</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">margin-bottom</span>: <span style="color: #b5cea8;">0px</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">border</span>: <span style="color: #b5cea8;">1px</span> <span style="color: #ce9178;">solid</span> <span style="color: #ce9178;">transparent</span>;</div><div>&nbsp; &nbsp; }</div><div>&nbsp; &nbsp; <span style="color: #d7ba7d;">.navbar-default</span>{</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">padding</span>:<span style="color: #b5cea8;">0px</span>;</div><div>&nbsp; &nbsp; }</div><div>&nbsp; &nbsp; <span style="color: #d7ba7d;">.navbar-header</span> {</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">float</span>: <span style="color: #ce9178;">left</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">padding</span>: <span style="color: #b5cea8;">0px</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">text-align</span>: <span style="color: #ce9178;">center</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">width</span>: <span style="color: #b5cea8;">100%</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">padding-top</span>: <span style="color: #b5cea8;">0px</span>;</div><div>&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #9cdcfe;">margin-bottom</span>: <span style="color: #b5cea8;">15px</span>;</div><div>&nbsp; &nbsp; } &nbsp; </div><div>}</div><br><div><span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">style</span><span style="color: #808080;">&gt;</span></div></div><p><br>위 처럼 추가해주시면 현재 보여지는 메뉴들이 닫히게 됩니다.<br>그러나 문제가 768px, 769px 에서는 모바일 버튼 클릭시 왼쪽메뉴가 동작하지 않게 됩니다.<br><br>조만간 모든 네비게이션 메뉴들을 수정해놓을 예정이므로 양해 부탁드리겠습니다.<br>다른 문의 있으시면 코멘트 부탁드리겠습니다.<br><br>즐거운 주말 되세요.<br><br><br><br><br>&nbsp;</p>

binsfam님의 댓글

작성일 24-03-31 18:50

자세한 답변 고맙습니다.
어차피 메인 네비게이션 width값이 줄어들어 모바일 메뉴버튼이 나타나기 전까지 네비게이션 부분이 여러줄로 나뉘어지는 현상때문에
미디어쿼리를 전부 수정해야 할 것 같습니다. ㅠㅠ

소프트존님의 댓글

작성일 24-04-01 13:23

불편드려서 죄송합니다.
제가 최대한 빠르게 수정이 안된 테마들도 빨리 적용하도록하겠습니다.
테마중에서 2024 년도 업데이트 라고 사용되고 있는 테마들은 현재 2개의 메뉴로 만 사용중이니 참고 부탁드리겠습니다.
사용하시다가 궁금한점이 있으시면 언제든지 문의주세요. 감사합니다.

소프트존님의 댓글

작성일 24-04-01 15:16

binsfam님의 댓글

작성일 24-04-01 15:59

소프트존님의 댓글

작성일 24-04-01 22:02

binsfam님의 댓글

작성일 24-04-01 22:07