사전작업
autobox.php 내 style을 사용하기 위한 작업입니다.
CSS 가져오기
autobox.css의 내용으로 사용합니다.
#skin-idxno을 #skin-<?php echo $makeIdxno ?>으로 치환합니다.
CSS 수정하기
css custom function(변수)에 내용을 변경합니다.
선택자 선택자변수 css 복사
.auto-boll --nd-atx-dots-padding-left .auto-boll .auto-titles {padding-left:값;}
--nd-atx-dots-offset-x .auto-boll .auto-titles::before {left:값;}
--nd-atx-dots-offset-y .auto-boll .auto-titles::before {top:값;}
--nd-atx-dots-width .auto-boll .auto-titles::before {width:값;}
--nd-atx-dots-height .auto-boll .auto-titles::before {height:값;}
--nd-atx-dots-bg .auto-boll .auto-titles::before {background-color:값;}
.auto-titles --nd-atx-title-margin .auto-titles {margin:값;}
--nd-atx-title-font-size .auto-titles {font-size:값;}
--nd-atx-title-font-weight .auto-titles {font-weight:값;}
--nd-atx-title-line-height .auto-titles {line-height:값;}
--nd-atx-title-letter-spacing .auto-titles {letter-spacing:값;}
--nd-atx-title-color .auto-titles {color:값;}
.auto-subtitles --nd-atx-subtitle-margin .auto-subtitles {margin:값;}
--nd-atx-subtitle-font-size .auto-subtitles {font-size:값;}
--nd-atx-subtitle-font-weight .auto-subtitles {font-weight:값;}
--nd-atx-subtitle-line-height .auto-subtitles {line-height:값;}
--nd-atx-subtitle-letter-spacing .auto-subtitles {letter-spacing:값;}
--nd-atx-subtitle-color .auto-subtitles {color:값;}
.auto-sums --nd-atx-summary-margin .auto-sums {margin:값;}
--nd-atx-summary-font-size .auto-sums {font-size:값;}
--nd-atx-summary-line-height .auto-sums {line-height:값;}
--nd-atx-summary-letter-spacing .auto-sums {letter-spacing:값;}
--nd-atx-summary-color .auto-sums {color:값;}
.auto-section --nd-atx-section-margin .auto-section {margin:값;}
--nd-atx-section-font-size .auto-section {font-size:값;}
--nd-atx-section-line-height .auto-section {line-height:값;}
--nd-atx-section-letter-spacing .auto-section {letter-spacing:값;}
--nd-atx-section-color .auto-section {color:값;}
.auto-name --nd-atx-name-margin .auto-name {margin:값;}
--nd-atx-name-font-size .auto-name {font-size:값;}
--nd-atx-name-line-height .auto-name {line-height:값;}
--nd-atx-name-letter-spacing .auto-name {letter-spacing:값;}
--nd-atx-name-color .auto-name {color:값;}
.auto-date --nd-atx-date-margin .auto-name {margin:값;}
--nd-atx-date-font-size .auto-name {font-size:값;}
--nd-atx-date-line-height .auto-name {line-height:값;}
--nd-atx-date-letter-spacing .auto-name {letter-spacing:값;}
--nd-atx-date-color .auto-name {color:값;}
.auto-info --nd-atx-info-margin .auto-info {margin:값;}
--nd-atx-info-padding .auto-info {padding:값;}
--nd-atx-info-font-size .auto-info {font-size:값;}
--nd-atx-info-font-weight .auto-info {font-weight:값;}
--nd-atx-info-line-height .auto-info {line-height:값;}
--nd-atx-info-color .auto-info {color:값;}
--nd-atx-info-item-padding-x .auto-info-item + .auto-info-item {padding-left:값;}
.auto-info-item + .auto-info-item::before {padding-right:값;}
--nd-atx-info-divider-color .auto-info-item + .auto-info-item::before {color:값;}
--nd-atx-info-divider .auto-info-item + .auto-info-item::before {content: "|";float:left;font-weight:400;}
.auto-images --nd-atx-image-line-border .line.frame::before, .line.auto-images::before {border:값;}
--nd-atx-image-border-radius .auto-images {border-radius:값;}
--nd-atx-image-valign 미사용
--nd-atx-image-align 미사용
--nd-atx-image-width 미사용
--nd-atx-image-height 미사용
--nd-atx-image-bg 미사용
--nd-atx-image-bg-position 미사용
--nd-atx-image-bg-repeat 미사용
--nd-atx-image-bg-color 미사용
--nd-atx-image-bg-size 미사용
.auto-relation --nd-atx-relation-overflow .auto-relation {overflow:값;}
--nd-atx-relation-padding-left .auto-relation {padding-left:값;}
--nd-atx-relation-font-size .auto-relation {font-size:값;}
--nd-atx-relation-font-weight .auto-relation {font-weight:값;}
--nd-atx-relation-line-height .auto-relation {line-height:값;}
--nd-atx-relation-color .auto-relation {color:값;}
--nd-atx-relation-letter-spacing .auto-relation {letter-spacing:값;}
--nd-atx-relation-white-space .auto-relation {white-space:값;}
--nd-atx-relation-text-overflow .auto-relation {text-overflow:값;}
--nd-atx-relation-content .auto-relation::before {content:값;}
.auto-relation --nd-atx-relation-icon-zindex .auto-relation::before {z-index:값;}
--nd-atx-relation-icon-offset-x .auto-relation::before {left:값;}
--nd-atx-relation-icon-offset-y .auto-relation::before {top:값;}
--nd-atx-relation-icon-width .auto-relation::before {width:값;}
--nd-atx-relation-icon-height .auto-relation::before {height:값;}
--nd-atx-relation-icon-margin .auto-relation::before {margin:값;}
--nd-atx-relation-icon-bg .auto-relation::before {background-color:값;}
--nd-atx-relation-icon-border-width .auto-relation::before {border-width:값;}
--nd-atx-relation-icon-border-style .auto-relation::before {border-style:값;}
--nd-atx-relation-icon-border-color .auto-relation::before {border-color:값;}
--nd-atx-relation-icon-border-radius .auto-relation::before {border-radius:값;}
--nd-atx-relation-icon-transform .auto-relation::before {transform:값;}
.auto-relation-container --nd-atx-relation-gap php문서를 수정합니다.
관련기사 li class 추가
// 여백
if($k == 0) $addClass=""; else $addClass=" class=\"martop-4\"";
--nd-atx-relation-margin php문서를 수정합니다.
관련기사 ul class 추가
$autoboxHtml .= "<ul class=\"clearfix martop-15\">";
.photo-titbg --nd-atx-titbg-zindex .photo-titbg {z-index:값;}
--nd-atx-titbg-offset-x .photo-titbg {left:값;}
--nd-atx-titbg-offset-y .photo-titbg {bottom:값;}
--nd-atx-titbg-width .photo-titbg {width:값;}
--nd-atx-titbg-padding .photo-titbg {padding:값;}
--nd-atx-titbg-bg .photo-titbg {background-color:값;}
.photo-titbg.gradient --nd-atx-titbg-gradient-padding .photo-titbg.gradient {padding:값;}
--nd-atx-titbg-gradient-text-shadow .photo-titbg.gradient {text-shadow:값;}
--nd-atx-titbg-gradient-bg .photo-titbg.gradient {background:값;}
.photo-titbg.gradient.cover --nd-atx-titbg-gradient-cover-bg .photo-titbg.gradient.cover {background:값;}
.auto-btn .photo-btn으로 대체하여 사용합니다.
.auto-pager --nd-atx-pager-position .auto-pager {position:값;}
--nd-atx-pager-zindex .auto-pager {z-index:값;}
--nd-atx-pager-font-size .auto-pager {font-size:값;}
--nd-atx-pager-text-align .auto-pager {text-align:값;}
.auto-pager --nd-atx-pager-icon-width .auto-pager li[id*=slick-] button[data-role] {width:값;}
--nd-atx-pager-icon-height .auto-pager li[id*=slick-] button[data-role] {height:값;}
--nd-atx-pager-icon-gutter-x .auto-pager li[id*=slick-] button[data-role] {margin-right:값;margin-left:값;}
--nd-atx-pager-icon-bg .auto-pager li[id*=slick-] button[data-role] {background-color:값;}
--nd-atx-pager-icon-border .auto-pager li[id*=slick-] button[data-role] {border:값;}
--nd-atx-pager-icon-border-radius .auto-pager li[id*=slick-] button[data-role] {border-radius:값;}
.auto-pager --nd-atx-pager-icon-active-width .auto-pager li.slick-active[id*=slick-] button[data-role] {width:값;}
--nd-atx-pager-icon-active-height .auto-pager li.slick-active[id*=slick-] button[data-role] {height:값;}
--nd-atx-pager-icon-active-color .auto-pager li.slick-active[id*=slick-] button[data-role] {color:값;}
--nd-atx-pager-icon-active-bg .auto-pager li.slick-active[id*=slick-] button[data-role] {background-color:값 !important;}
html 태그 수정하기
변수값에 대한 자세한 내용은 예약어 페이지 또는 /fine_skin/news/autobox/skinCommon.php를 참조해주세요.
형태 함수 태그
제목 autobox("title", "line-x2 onload")
v11.8 이하 버전에서 $seoAutoboxTag는 div로 치환하여 사용합니다.
부제목 autobox("sub_title", "line-x1")
이미지 image("thumbImgFileUrl", "ratio-32 line")
이미지 없을때 대체이미지 노출
image("thumbImgFileUrl", "ratio-32 line", true)
동영상 ".($flash_tag ? "<div class=\"auto-mov\">".$flash_tag."</div>":image("thumbImgFileUrl", "", true))."
본문 autobox("summary", "line-x2")
섹션명 autobox("serialName","line-x1")
기자명 autobox("user_name", "line-x1")
날짜 autobox("ymd1", "line-x1")
관련기사 relation("ul-class", "relation-class", 3)
기타 정보 <div class=\"auto-info\">
    ".autobox("user_name", "auto-info-item")."
    ".autobox("ymd1", "auto-info-item")."
</div>
커스텀 영역입니다.