메인화면 최신글 박스 로 만드는 방법에 대해서 문의 드림니다
본문
위 예시처럼 메인화면 나오는 최신글 을 박스라인으로 만드는 방법에 대해서 문의 드림니다
문의 하면서 하나하나 만들어가고 있습니다
어떻해 파일을 만들어야 하는지 문의 드려요
답변 2
<div class="latest_top_wr">
<?php
// 이 함수가 바로 최신글을 추출하는 역할을 합니다.
// 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);
// 테마의 스킨을 사용하려면 theme/basic 과 같이 지정
echo latest('pic_list', 'free', 4, 23); // 최소설치시 자동생성되는 자유게시판
echo latest('pic_list', 'qa', 4, 23); // 최소설치시 자동생성되는 질문답변게시판
echo latest('pic_list', 'notice', 4, 23); // 최소설치시 자동생성되는 공지사항게시판
?>
</div>
루트메인 index.php 파일에 이렇게 레테스킨skin/latest/basic/latest.skin.php 파일 을 정의된 에코 처리 해서 불러오게 되어있습니다.
따라서 현재 사용하고자 레터 스킨을 본인에 맞게 수정을 하시면됩니다.
즉, 라인 박스선을 표시 하고자한다면 해당 레터 스킨에서 css 를 수정하시면 되겠습니다.
해당 클래스요소 속성에 border: 1px solid #000; 추가 해주시면됩니다.
답변감사합니다
/skin/latest/pic_list/style.css 에서 어떻해 수정해야 하는지 자세히좀 부탁드려요
알려주신 border: 1px solid #000; 를 추가 해도 적용되지 않아서 답답해 하고 있습니다
원본
@charset "utf-8";
/* 새글 스킨 (latest) */
.pic_li_lt {position:relative;width:33.3333%;float:left;padding:0 10px;background:#fff}
.pic_li_lt .lat_title {display:block;line-height:45px;font-size:1.2em;color:#253dbe border: 1px solid #000;}
.pic_li_lt .lat_title a {color:#000;display:inline-block;position:relative}
.latest_top_wr .pic_li_lt:nth-child(3n+1) {clear: both!important}
.pic_li_lt .lt_more {position:absolute;top:11px;right:10px;display:block;width:25px;line-height:25px;color:#aaa;border-radius:3px;text-align:center}
.pic_li_lt .lt_more:hover {color:#777}
.pic_li_lt ul:after {display:block;visibility:hidden;clear:both;content:""}
.pic_li_lt li {border-bottom:1px solid #e5ecee;margin-bottom:10px}
.pic_li_lt li .lt_img {display:none}
.pic_li_lt li:first-child .lt_img {display:block;margin:0 0 10px;}
.pic_li_lt li:first-child .lt_img img, .pic_li_lt li .lt_img video {width:100%;height:auto}
.pic_li_lt li .pic_li_tit {font-weight:bold;font-size:1.2em;line-height:20px;vertical-align:middle}
.pic_li_lt li .fa-heart {color:#ff0000}
.pic_li_lt li .fa-lock {display:inline-block;line-height:14px;width:16px;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.pic_li_lt li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
.pic_li_lt li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_li_lt li .fa-caret-right {color:#bbb}
.pic_li_lt li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_li_lt li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}
.pic_li_lt .profile_img img{border-radius:50%}
.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}
.pic_li_lt .empty_li {line-height:145px;color:#666;text-align:center;padding:0}
.pic_li_lt .empty_li:before {background:none;padding:0}
.pic_li_lt .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.pic_li_lt .lt_more {position:absolute;top:11px;right:10px;display:block;width:40px;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center}
.pic_li_lt .lt_more:hover {color:#777}
.pic_li_lt {position:relative;width:33.3333%;float:left;padding:0 10px;background:#fff:border: 1px solid #000;}
.pic_li_lt요소가 전체를 감싸는 부모이기 때문에 속성에 border: 1px solid #000; 만 추가하여 이런 식으로 하시면 됩니다.
https://coding-factory.tistory.com/902 참조하시면 됩니다. 항상 느림의 미학으로 찬찬히 화이팅!~응원합니다.
용기주셔서 감사합니다 ^^
