위젯 배포는 처음 입니다.

사용법 문의와 질문은 댓글을 달아 주세요.

orange 최근 게시물 스킨을 응용하여 개발 했습니다.
야비님 디자인이 정말 마음에 들었는데 이렇게 이미지 사용을 허락 해주신 야비님께 진심으로 감사드립니다.
 

예전 제로보드시절부터 항상 다운만 받아서 쓰다가 혹시, 이런팁이라도 원하는 초보분이 계실지도 모른다는 생각에 한번 올려봅니다.

저또한 제로보드XE를 이번에 처음 접하면서, 참...세상 많이 좋아졌구나..(ㅋㅋ) 하는 생각이 들 정도더군요...

좋은 스킨들 만들어주신분들께 먼저 감사드립니다.. ( _ _ )

많은 스킨들중 유독 카운터와 관련해서 제가 원하는 스킨이 없길래...한번 만들어 봤습니다.

이 팁은... "카운터를 원하는 배경으로 만들고 싶은데...CSS이니, DIV니...당췌 울렁증이 있어서.....하지만! html테이블정도는 감당할 수 있어!!" 하는 초보분들에게 해당되는 글이 될듯합니다... 저또한 초보라..   .-_-a;; 긁적..

팁게시판에 올려야지 않을까 하다가... 혹시라도 밑의 배경그림이라도 쓰실분이 있을까...싶어서 여기다가 글을 씁니다. 안맞으면, 삭제 할께요...ㅜ_ㅜ;;

카운터스킨을 만들다가 레이어만으로 작업하다보니, 이상하게 딱 원하는 위치에 카운트가 출력되지 않더군요.... 그래서 레이어안에 테이블을 넣고 배경그림을 깔고, 다시 테이블을 만들어서 원하는 위치에 카운트를 출력시켜봤습니다.  (내공이 미천해서 이렇게 작업하면 어떤 문제가 생길지는 아직 모릅니다만, 다행히 잘 돌아가더군요...;;;;;)




위의 이미지가 그렇게 만들어본 카운터이미지입니다.. 저 초록색 배경그림만 원하는 그림으로 바꾸시고 테이블 사이즈만 재조정 하면 각자 원하는 이미지로 카운터를 만들수 있겠죠...

사이즈는 199 x 113입니다.  각자 좌측메뉴부분의 사이즈가 다를테니,  그림사이즈나 테이블사이즈 조정은 알아서들 하셔야합니다.
저같은 경우엔 위젯으로 올릴 필요성을 못느껴서 기본폴더의 <counter_status.html> 문서를 편집하고, CSS문서는 카운트색상만 흰색으로 바꿔서 두문서를 기본폴더에 덮어씌우고, 배경그림만 따로 image폴더에 올려서 쓰고 있습니다.

먼저 counter_status.html문서에 테이블을 집어넣어서 보면.....

<!--@if($colorset == "normal")-->
    <!--%import("normal/style.css")-->
<!--@end-->

<div class="counter_widget">

     <ul>
<table cellpadding="0" cellspacing="0" width="199" height="113" background="저장경로/counterbg_green.jpg">
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" width="199" height="113">
                <tr>
                    <td width="199" height="43" colspan="3">
                    </td>
                </tr>
                <tr>
                    <td width="88" height="14">
                                   </td>
                    <td width="52" height="14" align="center">
<!--@if($yesterday_counter)-->
      <li>{$yesterday_counter->unique_visitor}</li>
      <!--@end-->
                    </td>
                    <td width="59" height="14">
                        <p></p>
                    </td>
                </tr>
                <tr>
                    <td width="88" height="14">
                        <p></p>
                    </td>
                    <td width="52" height="14" align="center">
<!--@if($today_counter)-->
      <li>{$today_counter->unique_visitor}</li>
      <!--@end-->
                    </td>
                    <td width="59" height="14">
                        <p></p>
                    </td>
                </tr>
                <tr>
                    <td width="88" height="14">
                        <p></p>
                    </td>
                    <td width="52" height="14" align="center">
<!--@if($total_counter)-->
      <li>{$total_counter->unique_visitor}</li>
      <!--@end-->
                    </td>
                    <td width="59" height="14">
                        <p></p>
                    </td>
                </tr>
                <tr>
                    <td width="199" colspan="3" height="26">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</ul>

</div>

html테이블 짜본적 있으신분들은 딱보면 아시겠지만, 한 테이블에 배경깔고, 또 한테이블은 칸을 나눠서 카운트가 될 셀을 확보한 후 배경그림이 깔린 테이블에 집어넣은 후,  높이, 넓이를 맞춘겁니다.

혹시나 봐도 잘 모르겠다 싶으신 분들은 맨위 <table> 부터 끝부분 </table>까지중의 셀들중에서  카운터과 관련된 코드(3군데죠..?)만 지우시고 나모나 드위같은 웹에디터에 복사해서 살펴보시면 쉽게 이해가실겁니다.....

그리고 style.css문서에서는...

.counter_widget {
    border:0px
    padding:0px;
    margin-bottom:5px;
    color:#ffffff;
    font-family:tahoma;
    font-size:8pt;
}

.counter_widget ul { margin:0; padding:0; list-style:none; }

위의 코드중... 폰트색상에 관련된부분.. color:#ffffff;   <----요부분만 바꿨습니다. (마진도 줄였던가.?..;;;)

요렇게 해서 counter_status.html문서는 이미지업로드경로 적어주고 ../widgets/counter_status/skins/default 폴더에 덮어씌우고,  
style.css문서는 ../widgets/counter_status/skins/default/normal 폴더에 덮어씌우면 되겠죠...

끝으로, 사용하실분은 없어보이지만.. ㅜ_ㅜ 저 카운터에 쓰인 배경그림 첨부해봅니다..

팁같지도 않은 초보의 글 읽어주셔서 감사합니다...

모든 초보분이 원하는 그림으로 카운터를 만드시길 바랍니다.

 /*  이미지 최근글 스타일 시트 */
.gr {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gr li {
    width: 186px;
    height: 153px;
    margin: 20px 10px 5px;
    float: left;
    position: relative;
}
.gr .bg {
    background: url(../images/polaroid.png) no-repeat;
    width: 186px;
    height: 153px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.gr span {
    background: url(../images/tape.png) no-repeat;
    width: 77px;
    height: 27px;
    display: block;
    position: absolute;
    left: 54px;
    top: -12px;
    z-index: 4;
}
.gr img {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
}
.gr em {
    display: block;
    padding: 4px 0 0;
    text-align: center;
    font: italic 100% Georgia, "Times New Roman", Times, serif;
    color: #333;
    width: 186px;
    position: absolute;
    bottom: 8px;
    right: 0;
    z-index: 3;
}

.gr span { behavior: url(http://webtoday.biz/iepngfix.htc); cursor: pointer; }

/* 툴팁 */

#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:2px 5px;
    color:#333;
    display:none;    
    z-index: 5;
    }

 <!-- 설정된 컬러셋의 종류에 따라서 css파일을 import 합니다 -->

<!--@if($colorset=="normal"||!$colorset)-->
    <!--%import("css/normal.css")-->
<!--@end-->

<div class="ni_box">
    <!--@if($widget_info->title)-->
        <h2>{$widget_info->title}</h2>
    <!--@end-->

    <!--@if(count($widget_info->document_list))-->
    <div>



        {@ $count = 0; }
        <!--@for($i=0;$i<$widget_info->rows_list_count;$i++)-->
    <ul class="gr">
            <!--@for($j=0;$j<$widget_info->cols_list_count;$j++)-->
                {@ $oDocument = $widget_info->document_list[$i*$widget_info->cols_list_count + $j]}
              <li <!--@if($widget_info->rows_list_count>1)-->class="bottomBorder"<!--@end-->>
                <!--@if($oDocument->document_srl)-->

<a href="{getUrl('','document_srl',$oDocument->document_srl)}" class="tooltip"  title="{$oDocument->getTitle($widget_info->title_length)}"><span></span><img src="{$oDocument->getThumbnail($widget_info->thumbnail_width,$widget_info->thumbnail_height,$widget_info->thumbnail_type)}" border="0" alt="image" /></a><em>by {$oDocument->getNickName()}</em> <div class="bg"></div></a>




                <!--@if($widget_info->display_author == 'N')-->
                <div class="author"><div class="member_{$oDocument->get('member_srl')}">{$oDocument->getNickName()}</div></div>
                <!--@end-->


                <!--@if($widget_info->display_regdate == 'N')-->
                <div class="regdate">{$oDocument->getRegdate()}</div>
                <!--@end-->

                <!--@if($widget_info->display_readed_count == 'N' || $widget_info->display_voted_count == 'Y' )-->
                <div class="readAndVoted">
                    <!--@if($widget_info->display_readed_count == 'N')-->

                        {$lang->readed_count} {$oDocument->get('readed_count')}

                    <!--@end-->

                    <!--@if($widget_info->display_voted_count == 'N' && $oDocument->get('voted_count')>0 )-->

                        <!--@if($widget_info->display_readed_count == 'N')--><br /><!--@end-->

                        {$lang->voted_count} <strong>{$oDocument->get('voted_count')}</strong>

                    <!--@end-->
                </div>
                <!--@end-->
                <!--@end-->

        </li>
            <!--@end-->
            <!--@for($k=$j;$k<$widget_info->cols_list_count;$k++)--><td>&nbsp;</td><!--@end-->
</ul>
        <!--@end-->


    <!--@end-->
    </div>

    <!--@if($widget_info->module_name && $widget_info->title)-->
        <a href="{getUrl('','mid',$widget_info->module_name)}" class="more">more</a>
    <!--@end-->
</div>

 <script src="http://webtoday.biz/facebox/jquery.js" type="text/javascript"></script>
 <script src="http://webtoday.biz/cc/js/main.js" type="text/javascript"></script>

이미지를 싫어 하시는 분을 위해 만들어 봤습니다.
배경으로 깔리는 jpg 한개 만 이미지(702바이트)이고 나머지는 다 태그로 제작되었습니다.
태그소스는 이리저리보이는 사이트에서 훔쳐다 사용했습니다. ㅡㅡ

7가지 색상
날짜 , 카테고리 , 작성자 보기설정 가능합니다.
제목 입력시 제목이 보이고 제목에 링크가 걸립니다.
제목이 미드와 다르다면 링크는 안 걸립니다.
제목 미입력시 제목 칸 자체가 없어집니다.

기존의 newest_documents 폴더에 스킨만 넣는게 아닙니다.
압축풀고 orange_newest_docu폴더 통째로 위젯 폴더에 넣어주세요.

스킨은 모서리가 각진넘 모서리가 둥근넘 두개입니다.

미리보기는 아래...

러셀크로우

아이콘출처 http://www.famfamfam.com/lab/icons/ 첨부된 아이콘중 admin.gif LayoutAdminEdit.gif LayoutAdminModify.gif OwnDocument.gif SavedDocument.gif ScrappedDocument.gif 를 제외한 나머지는 GPL2를 따릅니다. 아이콘 출처를 명시하는 조건에 한해서 자유롭게 배포가 가능 합니다. 저작권 관련(Icon) http://creativecommons.org/licenses/by/2.5/deed.ko 이용자는 아래의 조건을 따르는 경우에 한하여 자유롭게 이 저작물을 복제, 배포, 전송, 전시, 공연 및 방송할 수 있습니다. 이차적 저작물을 작성할 수 있습니다. 다음과 같은 조건을 따라야 합니다: 저작자표시. 귀하는 원저작자를 표시하여야 합니다. 귀하는, 이 저작물의 재이용이나 배포의 경우, 이 저작물에 적용된 이용허락조건을 명확하게 나타내어야 합니다. 저작권자로부터 별도의 허가를 받으면 이러한 조건들은 적용되지 않습니다. Nothing in this license impairs or restricts the author's moral rights. 본 로그인 스킨에 대한 2차 저작권은 저에게 잇음을 알려 드.리.지 않.습.니.다 ㅋ 위에서 명시한 gif 아이콘을 제외하곤..라이센스는 GPL2를 따릅니다.(자유롭게 수정 배포가능.)

아이콘출처 http://www.famfamfam.com/lab/icons/ 첨부된 아이콘중 admin.gif LayoutAdminEdit.gif LayoutAdminModify.gif OwnDocument.gif SavedDocument.gif ScrappedDocument.gif 를 제외한 나머지는 GPL2를 따릅니다. 아이콘 출처를 명시하는 조건에 한해서 자유롭게 배포가 가능 합니다. 저작권 관련(Icon) http://creativecommons.org/licenses/by/2.5/deed.ko 이용자는 아래의 조건을 따르는 경우에 한하여 자유롭게 이 저작물을 복제, 배포, 전송, 전시, 공연 및 방송할 수 있습니다. 이차적 저작물을 작성할 수 있습니다. 다음과 같은 조건을 따라야 합니다: 저작자표시. 귀하는 원저작자를 표시하여야 합니다. 귀하는, 이 저작물의 재이용이나 배포의 경우, 이 저작물에 적용된 이용허락조건을 명확하게 나타내어야 합니다. 저작권자로부터 별도의 허가를 받으면 이러한 조건들은 적용되지 않습니다. Nothing in this license impairs or restricts the author's moral rights. 본 로그인 스킨에 대한 2차 저작권은 저에게 잇음을 알려 드.리.지 않.습.니.다 ㅋ 위에서 명시한 gif 아이콘을 제외하곤..라이센스는 GPL2를 따릅니다.(자유롭게 수정 배포가능.)

저녁때 올린게 예상치 못한 버그가 있어서... ㅜㅜ
다시 올립니다.

앞전글에는 설명을 주저리 주저리 달았었는데...
피곤하고 졸린 관계로... 그냥 파일만 올립니다.

설정창이구요...
적당히 설정하고 코드생성하시면...
one메뉴설정은 홈페이지에 보이는 메뉴명을 그대로 적어주세요. mid 명 아닙니다.


요로콤 보입니다.
가로로 쭉 메뉴가 다 나온게 필요해서....유용하지 않을지 모르겠지만..
필요하신분은 받아 쓰세요...


추가작성 =====================================================

피곤에 지쳐 대충 올린게 문제였나 보네요..
One 메뉴에 대해서 간략하게 설명 드리자면

일단 1차 메뉴만 사용할 수 있습니다. 중요한 부분인데 깜빡 했네요...
화면에 보이는 메뉴명을 그대로 적으시면 됩니다.
관리자에서 메뉴 설정할때 나오는 그 메뉴명 입니다.






2차 3차 메뉴에 적용가능한 버전은 아직 조금 문제(머리가 나빠서.....)가 있어서 보류중입니다.