안녕하세요. eyoomegg입니다.

이미지게시판 목록에  new 아이콘이 나오는 방법에 대해 알아 보겠습니다.(gallery 보드 스킨을 기준으로 설명 드립니다.)

list.skin.html 파일에서 이미지가 출력되는 부분을 찾습니다.

<a class="zoomer" href="{.href}" {? wmode}onclick="eb_modal(this.href); return false;"{/}>
    <span class="overlay-zoom gallery-img">  
        <!--{? .img_content && !preg_match('/no image/',.img_content)}-->
        {.img_content}
        <span class="zoom-icon"><i class="fa fa-search"></i></span>
        <!--{:}-->
        <img class="img-responsive" src="img/no_image.jpg">
        <span class="zoom-icon"><i class="fa fa-search"></i></span>
        <!--{/}-->
    </span>
</a>

아래와 같이 <!--{?.icon_new}--><div class="new-icon">new</div><!--{/}--> 를 추가해 줍니다.

<a class="zoomer" href="{.href}" {? wmode}onclick="eb_modal(this.href); return false;"{/}>
    <span class="overlay-zoom gallery-img">  
        <!--{? .img_content && !preg_match('/no image/',.img_content)}-->
        {.img_content}
        <span class="zoom-icon"><i class="fa fa-search"></i></span>
        <!--{:}-->
        <img class="img-responsive" src="img/no_image.jpg">
        <span class="zoom-icon"><i class="fa fa-search"></i></span>
        <!--{/}-->
        <!--{?.icon_new}--><div class="new-icon">new</div><!--{/}-->
    </span>
</a>

.new-icon의 스타일을 줍니다.

.new-icon {
    opacity: 0.9;
    transform: rotate(-45deg);
    position: absolute;
    top: 5px;
    left: -28px;
    padding: 3px 0;
    width: 100px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    background: #ff9501;
}

새글을 작성하면 위와 같은 new 아이콘이 생기게 됩니다.

다른 스킨에도 적용 가능하며, 각 스킨에 맞게 스타일을 수정하시면 되겠습니다.

(위치는 top과 left 로 조정, 간격은 padding과 width로 조정합니다.}

감사합니다.