Mint 테마 메인 Index 수정 - 2016. 6. 10 수정 > 그누보드5 팁자료실

그누보드5 팁자료실

Mint 테마 메인 Index 수정 - 2016. 6. 10 수정 정보

Mint 테마 메인 Index 수정 - 2016. 6. 10 수정

첨부파일

2016.06.03_03.png (453.6K) 13회 다운로드 2016-06-03 15:25:26
2016.06.03_04.png (661.1K) 1회 다운로드 2016-06-03 15:25:26
IMG_3976.PNG (198.8K) 2회 다운로드 2016-06-10 15:44:06

본문

민트 테마 상단을 위와 같이 수정 배치하고자 한다면...


theme/mint/css/mobile.css

109~110 Line

#main_work ul{margin-left:0px}
#main_work ul li:first-child{float:left;width:34%;overflow:hidden}
#main_work ul li{float:left;width:33%;overflow:hidden}

수정 및 추가


theme/mint/mobile/index.php

<div id="lt_slide">
    <?php
    // 이 함수가 바로 최신글을 추출하는 역할을 합니다.
    // 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수, 캐시타임, option);
    // 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
    $options = array(
        'thumb_width'    => 800, // 썸네일 width
        'thumb_height'   => 450,  // 썸네일 height
    );
    echo latest('theme/main_slide', '게시판 아이디', 4, 55, 1, $options);
    ?>
</div>
<div id="main_work">
    <ul>
        <li>
            <a href="#" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/bn1.gif" alt="배너이미지1"></a>
            <a href="#" class="work_txt"><span class="work_txt_tit">사업설명 1</span><span class="work_txt_p">사업에 관한 간략 설명<br>회사에 대한 간략한 설명</span></a>
            
        </li>
        <li class="main_work_1">
            <a href="#" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/bn2.gif" alt="배너이미지2"></a>
            <a href="#" class="work_txt"><span class="work_txt_tit">사업설명 2</span><span class="work_txt_p">사업에 관한 간략 설명<br>회사에 대한 간략한 설명</span></a>
        </li>
        <li>
            <a href="#" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/bn3.gif" alt="배너이미지3"></a>
            <a href="#" class="work_txt"><span class="work_txt_tit">사업설명 3</span><span class="work_txt_p">사업에 관한 간략 설명<br>회사에 대한 간략한 설명</span></a>
        </li>
    </ul>

</div>

class="col_l_60 latest"
class="col_l_40 latest"
삭제

썸네일 칫수 수정

모바일에서도 각 항목을 원본처럼 100%로 출력합니다.


주먹구구식으로 수정했습니다.
더 바람직한 방법이 있으면 조언 바랍니다.
추천
2

댓글 9개

팁 다시한번 감사말씀드립니다..

말씀하신데로 적용하여서 첨부하신이미지처럼 되었습니다...
그런데 예전에는 화면을 모바일에서보면 상기 이미지와 동일하게 나오는데
예전에는 모바일로보면 일열로 나왔었는데 그러케는 안되나요?
번거롭게 해드려서 죄송합니가....꾸벅
모바일에서 보이는 화면을 본문에 추가했습니다.
3개의 '사업설명'은 각각 모바일에서 100%로 아래로 나열됩니다.

이 글을 처음 작성했을 때는 모바일에서도 PC처럼 가로로 3개가 나열되게 수정했었는데... 옳은 방법이 아닌 듯 해서 다시 고친 것입니다.
그런데 모바일 가로가 넓을 때는 통하지 않네요. 다시 손을 봐야겠습니다.


FM25 님 좋은 자료 감사합니다.
메인슬라이드 부분과 그 아래의 사업설명123 사이에 20px정도 간격을 두려면 어찌해야 할까요..
전체 99 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT