XEdition 기본 레이아웃의 layout.html 파일의 305행부터 메인화면의 슬라이드가 나오는 소스 부분인것 같은데요,

아무리 타고 들어가봐도 이미지의 사이즈를 조정하는 html 또는 css 파일을 찾지를 못하겠네요.

크롬에서 F12 눌러서 확인을 해보면 아래처럼 바뀌는데요, 여기서 width: 7440px; height: 600px; 이부분을 

수정할 수 있는 파일은 어떤 파일인지 알 수 있을까요?

 

크롬에서 보이는 소스입니다.

<div class="swiper-wrapper" style="width: 7440px; height: 600px; transform: translate3d(-2480px, 0px, 0px); transition-duration: 0.3s;">

 

요건 layout.html 파일의 슬라이드 부분입니다.

<!-- 슬라이드 -->
<div class="swiper-wrapper">
<!--@if($_sample_slide)-->
<include target="./demo/slide.html" />
<!--@else-->
<div cond="$layout_info->slide_img1" style="background-image:url('{$layout_info->slide_img1}');" class="swiper-slide">
<div cond="$layout_info->slide_text1">
<div>
{$layout_info->slide_text1}
</div>
</div>
</div>
<div cond="$layout_info->slide_img2" style="background-image:url('{$layout_info->slide_img2}');" class="swiper-slide">
<div cond="$layout_info->slide_text2">
<div>
{$layout_info->slide_text2}
</div>
</div>
</div>
<div cond="$layout_info->slide_img3" style="background-image:url('{$layout_info->slide_img3}');" class="swiper-slide">
<div cond="$layout_info->slide_text3">
<div>
{$layout_info->slide_text3}
</div>
</div>
</div>
<div cond="$layout_info->slide_img4" style="background-image:url('{$layout_info->slide_img4}');" class="swiper-slide">
<div cond="$layout_info->slide_text4">
<div>
{$layout_info->slide_text4}
</div>
</div>
</div>
<div cond="$layout_info->slide_img5" style="background-image:url('{$layout_info->slide_img5}');" class="swiper-slide">
<div cond="$layout_info->slide_text5">
<div>
{$layout_info->slide_text5}
</div>
</div>
</div>
<!--@end-->
</div>
<!-- END:슬라이드 -->

 

  • profile
    파일 : layouts/xedition/css/layout.css
    swiper-container 로 찾으시면 됩니다.대략 800번때 줄부터
  • profile profile

    고맙습니다. 그런데 864행의 height: 600px 를 110px로 바꿔봤는데 여전히 바뀌지 않네요. ㅜ.ㅜ

    .swiper-container {
        height: 110px;

    그 아래에 다른 height: 600px 도 변경을 해봤지만 반응이 없네요. ㅜ.ㅜ

    이미지 파일도 사이즈를 높이 110 으로 줄여서 모두 올려봤지만 여전히....

     

    F12키를 눌러서 해당 소스 부분의 우측의 Filter 를 보면 element.style { 

    이곳에서 height: 110px; 로 바꿔보면 이때는 사이즈가 110 으로 줄어들거든요.

     

    element.style { 이런 소스 부분의 위치는 어떻게 찾을 수 있을까요?

     

     

    Screenshot 2017-04-26 at 13.07.41.png

  • profile profile
    변화가 없다면 해당 레이아웃이 아닌것으로 생각됩니다.
  • profile profile
    이거 또 벽에 부딪혔네요. ㅎ
    element.style {
    width: 7440px;
    height: 600px;
    에서 이 element.style은 어느쪽에 쓰이는건지요? html 이나 css 어느쪽인지요? 착한인연님 이번에도 촉을 좀 써주세요. ㅎ 고맙습니다.
  • profile profile
    element.style은 jQuery에서 엘리먼트에 구현되는 부분입니다.
    점점 미궁으로 들어가지 마시고 원하시는 부분이 무엇이신지?
    무엇을 어떻게 저렇게 요렇게 하고 싶은지를 알려주셔야 더 도움을 드릴듯합니다만...
  • profile profile

    넵! ㅎㅎ 너무 깊게 들어간건가요? 죄송합니다. 
    저는 단지 기본 XEDITION 레이아웃의 기본으로 나오는 슬라이드의 높이를 줄이고 싶습니다.

    현재 600px로 되어 있는데 이걸 110px 또는 150px 줄이고 싶은거죠. 

    레이아웃 XEDITION 의 사용자 설정은 아래와 같을 때 메인 페이지에 큰 슬라이드가 나와서 이걸 

    줄이고 싶다는 말씀이죠. 

    이해해주세요. 초보들은 원래 요리조리 횡설수설이에요. ㅎㅎ

     

    Screenshot 2017-04-26 at 18.27.30.png

  • profile profile

    위에 적어 주신대로 
    860번대에 적혀있는 숫자를 변경하면 세로 사이즈가 줄게됩니다.
    .swiper-container {
        height: 300px;
        font-family: Raleway, '나눔바른고딕', NanumBarunGothic, ng, '돋움', Dotum, AppleGothic, Helvetica, serif;
    }

     

    다른글들을 보았을때 기존  XEDITION레이아웃을 사용하지 않으시고

    다른 변형되어거나 커스텀된  XEDITION 레이아웃을 사용하시지 않나요.?

    Xedition_MH 사용중이시라고 다른글에서는 보입니다만,

    레이아웃 폴더를 잘 확인하시고.. 만약 변경해도 아무런 변화가 없다면

    혹 다른폴더를 보시는게 아닐까 생각도 듭니다.

  • profile profile
    네. 너무 죄송하고 고맙습니다. 현재 Xedition_MH 사용하고 있습니다. 같은 맥락이라고 생각했거든요. 그래서 레이아웃을 Xedtion 기본으로 바꿔서 말씀해주신대로 해봤습니다. 여전히 안되더라구요. 이것저것 손을 댔죠. ㅋㅋ 그래서 또다시 소 뒷 걸음치다 쥐를 잡았습니다.
    layout.css 만 바꿀게 아니더라구요. layout.min.css layout.js layout.min.js 여기서도 수정을 해야 되더라구요. 총 4개의 파일이네요.
    슬라이드 높이가 기본 600px 인데 3개의 파일에서 600을 찾아서 원하는 크기로 200px 으로 바꿨더니 크기가 줄었습니다.
    착한인연님 덕분에 생각의 전환으로 고민하다 해결했습니다. 고맙습니다.
  • profile profile
    minfy된 파일을 사용하면 아주 조금 더 빠른 로딩이 될지수도 있지만
    초보때에는 그냥 layout.min.css파일을 사용하지 않으시길 권해드립니다.
    수정도 어렵고 그냥 layout.css를 사용하시길 바랍니다.
    사용방법은 layout.min.css파일이름을 변경하세요.
    예를 들자면 layout.4444min.css이렇게 변경하면 layout.css파일을 읽어드립니다.
    js도 동일하게 이름을 변경하시길 바랍니다.
    편안하게 수정하시길 바랍니다.
    저도 미쳐 이야기를 못드렸네요. 잊고 있었습니다.
    하지만 공부가 되셨을 거라 생각됩니다.
  • profile profile
    그게 또 그렇군요. min 파일이 꼭 필요한게 아니기도 하나봐요? 개발이란게 이렇게 복잡하고 힘이 드네요. 암튼 이번에 개발하시는 분들 정말 존경합니다. 기본적으로 머리가 따라줘야 하겠죠. 코딩에 들어가는 그 많은 단어(?)들은 어떻게 외우고 하시는지 정말 대단하세요.
  • profile profile
    기존파일과 동일한것으로 압축/축소된 파일을 의미합니다.
    기존 파일을 수정을 다 하시고 추후
    그 파일코드를 압축하여 다시 min파일에 다시 넣으시면 됩니다.
    압축하는 사이트는 찾아보시면 많이 나옵니다.