xe_blog layout skin update (to 2step)

git-svn-id: http://xe-core.googlecode.com/svn/sandbox@4043 201d5d3c-b55e-5fd7-737f-ddc643e51545

layouts/xe_blog/css/layout.css

@@ -4,67 +4,60 @@ NHN UIT Lab. WebStandardization Team (http://html.nhndesign.com/)
 Kim, Ji Min 070809-20070903
 */
 
-#blog {width:780px; margin:0 auto;}
+#blog {margin:0 auto; width:970px;}
 
-#content { width:100%; position:relative;}
+#content { width:100%; }
 
 /* Global Navigation */
-.blogNavigation {width:780px; padding-bottom:3em; overflow:hidden;}
+.blogNavigation {overflow:hidden; width:780px;}
-ul.blogMenu {margin:0; padding:0; list-style:none; float:left; margin:1.2em 0 0 .9em; overflow:hidden;}
+
+ul.blogGlobal {padding:0; margin:0; list-style:none; overflow:hidden; float:right; margin:10px 0 10px 0; }
+ul.blogGlobal li {float:left; margin-left:-1px; padding:0 .6em;}
+ul.blogGlobal li a {text-decoration:none; font-size:.9em; letter-spacing:-1px;}
+
+ul.blogMenu {padding:0; list-style:none; overflow:hidden; float:right; margin:0 0 10px 0; }
 ul.blogMenu li {float:left; margin-left:-1px; padding:0 .8em;}
 ul.blogMenu li a {text-decoration:none; font:bold .9em tahoma;}
 ul.blogMenu li a.on {}
 
-ul.blogGlobal {margin:0; padding:0; list-style:none; float:right; margin:1em .6em 0 0; overflow:hidden;}
+/* Content Box */
-ul.blogGlobal li {float:left; margin-left:-1px; padding:0 .6em;}
+.contentBox { float:left; width:780px; }
-ul.blogGlobal li a {text-decoration:none; font-size:.9em; letter-spacing:-1px;}
+.contentBox .centerBg {padding-top:1em;}
+.contentBox .topBg {width:100%; height:10px; font-size:0;}
+.contentBox .bottomBg {width:100%; height:10px; font-size:0;}
+.contentArea {width:740px; margin:0 auto;}
+
+.blogWidgetAreaBox { width:190px; padding:0; margin:0; float:left; overflow:hidden;}
 
 /* Profile */
-.blogProfile {float:left; width:170px; margin:0 0 0 19px; display:inline;}
+.blogProfile {width:170px; margin:0 0 10px 10px; }
 .blogProfile h1 {padding:0; margin:10px 0 8px 2px; font-size:1em; line-height:1.2em;}
 .blogProfile ul.profileMenu {float:left; margin-left:-4px; overflow:hidden;}
 .blogProfile ul.profileMenu li {float:left; margin-left:-1px; padding:0 .7em;}
 .blogProfile ul.profileMenu li a {text-decoration:none; font-size:.9em;}
 
 /* title bg box */
-.blogTitleBox {position:relative; width:170px; height:25px; margin-bottom:1.3em;}
+.blogTitleBox {width:170px; height:25px; margin:0 0 5px 10px;}
+.blogTitleBox h2 {margin:0; padding:5px 0 0 12px; font:bold .9em tahoma;} 
+.blogTitleBox h2 a { text-decoration:none; }
 
 /* category */
-.blogCategory {float:left; width:170px; margin:0 0 0 21px;}
-.blogCategory h2 {margin:0; padding:5px 0 0 12px; font:bold .9em tahoma;} /*070917 <20>섏젙*/
-.blogCategory h2 a { text-decoration:none; }
-.blogCategory .categoryToggle {position:absolute; right:.3em; top:.5em;}
-.blogCategory .categoryToggle img {display:block; padding:5px; cursor:pointer;}
-.blogCategory ul.categoryList { list-style:none; margin:0; padding:0; }
-.blogCategory ul.categoryList li {height:1.7em; padding-left:2.1em;}
-.blogCategory ul.categoryList li a {text-decoration:none; font-size:1em;}
-.blogCategory ul.categoryList li.on a {font-weight:bold; }
-.blogCategory ul.categoryList li span.documentCount { font-size:.9em; margin-left:.3em;}
 
-/* Recent Comments */
+/* widget Box */
-.widgetBox {float:left; width:170px; margin:0 0 0 21px;}
+.widgetBox {width:170px; margin:0 0 10px 10px;}
 
 /* search box */
-.blogSearch { margin-top:2em; }
+.blogSearch { margin:0 auto; width:170px; }
 .blogSearch fieldset {padding:0; margin:0; border:none;}
 .blogSearch legend {display:none;}
 .blogSearch input {float:left; vertical-align:middle;}
 .blogSearch img {float:left; margin-left:2px; vertical-align:middle;}
 
-/* Content Box */
-.contentBox {clear:both; position:relative; width:780px; padding:.8em 0 3em 0;}
-.contentBox .centerBg {padding-top:1em;}
-.contentBox .topBg {width:100%; height:10px; font-size:0;}
-.contentBox .bottomBg {width:100%; height:10px; font-size:0;}
-.contentArea {width:740px; margin:0 auto;}
-
-.zbXE { text-align:center; margin:5px 0 10px 0;}
-
 /* Widget */
-.blog_widget_ h2 {margin:0; padding:5px 0 0 12px; font:bold .9em tahoma;} 
+.blog_widget_ h2 {margin:0 0 15px 0; padding:5px 0 0 12px; font:bold .9em tahoma;} 
-.blog_widget_ .items {list-style:none; padding:0; margin:0; margin-top:1.3em; overflow:hidden; width:165px;}
+.blog_widget_ .items {list-style:none; padding:0; margin:0; margin-top:10px; overflow-x:hidden; width:170px;}
-.blog_widget_ .items li { white-space:nowrap; overflow:hidden; height:1.7em; padding-left:1.8em;}
+.blog_widget_ .items li { padding:0 10px 0 14px; margin-bottom:5px; }
-.blog_widget_ .items li a { text-decoration:none; font-size:1em; overflow:hidden; white-space:nowrap;}
+.blog_widget_ .items li a { text-decoration:none; font-size:1em; }
 
 /* Calender */
 .widget_calendar {position:relative; float:left; width:170px; }
@@ -91,3 +84,5 @@ ul.blogGlobal li a {text-decoration:none; font-size:.9em; letter-spacing:-1px;}
 .widget_calendar td.posted a {text-decoration:underline;}
 .widget_calendar td.posted {text-decoration:underline;}
 
+
+.zbXE { width:960px; text-align:center; margin:20px auto 20px auto;}

layouts/xe_blog/css/layout_blue.css

@@ -27,12 +27,7 @@ ul.blogGlobal li a {color:#3f4040;}
 
 /* title bg box */
 .blogTitleBox {background:url(../images/blue/box_blog_title.gif) no-repeat left top;}
-
+.blogTitleBox h2 {color:#00afcf;}
-/* category */
-.blogCategory h2 {color:#00afcf;}
-.blogCategory h2 a {color:#00afcf;}
-.blogCategory ul.categoryList li {background:url(../images/blue/ico_category.gif) no-repeat .8em 0;}
-.blogCategory ul.categoryList li a {color:#3f4040;}
 
 /* Content Box */
 .contentBox .centerBg {background:url(../images/blue/box_blog_bg.gif) repeat-y left top;}
@@ -42,7 +37,7 @@ ul.blogGlobal li a {color:#3f4040;}
 /* Widget */
 .blog_widget_ {background:url(../images/blue/box_blog_title.gif) no-repeat left top;}
 .blog_widget_ h2 {color:#00afcf;}
-.blog_widget_ .items li {background:url(../images/blue/bullet_3x3_1.gif) no-repeat 1em .35em;}
+.blog_widget_ .items li {background:url(../images/blue/bullet_3x3_1.gif) no-repeat 5px 5px; }
 .blog_widget_ .items li a {color:#3f4040;}
 
 /* Calender */

layouts/xe_blog/css/layout_gray.css

@@ -27,12 +27,7 @@ ul.blogGlobal li a {color:#666666;}
 
 /* title bg box */
 .blogTitleBox {background:url(../images/gray/box_blog_title.gif) no-repeat left top;}
-
+.blogTitleBox h2 {color:#181818;}
-/* category */
-.blogCategory h2 {color:#181818;}
-.blogCategory h2 a {color:#181818;}
-.blogCategory ul.categoryList li {background:url(../images/gray/ico_category.gif) no-repeat .8em 0;}
-.blogCategory ul.categoryList li a {color:#3f4040;}
 
 /* Content Box */
 .contentBox .centerBg {background:url(../images/gray/box_blog_bg.gif) repeat-y left top;}
@@ -42,7 +37,7 @@ ul.blogGlobal li a {color:#666666;}
 /* Widget */
 .blog_widget_ {background:url(../images/gray/box_blog_title.gif) no-repeat left top;}
 .blog_widget_ h2 {color:#181818;}
-.blog_widget_ .items li {background:url(../images/gray/bullet_3x3_1.gif) no-repeat 1em .35em;}
+.blog_widget_ .items li {background:url(../images/gray/bullet_3x3_1.gif) no-repeat 5px 5px; }
 .blog_widget_ .items li a {color:#3f4040;}
 
 /* Calender */

layouts/xe_blog/css/layout_green.css

@@ -27,12 +27,7 @@ ul.blogGlobal li a {color:#3f4040;}
 
 /* title bg box */
 .blogTitleBox {background:url(../images/green/box_blog_title.gif) no-repeat left top;}
-
+.blogTitleBox h2 {color:#31c100;}
-/* category */
-.blogCategory h2 {color:#31c100;}
-.blogCategory h2 a {color:#31c100;}
-.blogCategory ul.categoryList li {background:url(../images/green/ico_category.gif) no-repeat .8em 0;}
-.blogCategory ul.categoryList li a {color:#3f4040;}
 
 /* Content Box */
 .contentBox .centerBg {background:url(../images/green/box_blog_bg.gif) repeat-y left top;}
@@ -42,7 +37,7 @@ ul.blogGlobal li a {color:#3f4040;}
 /* Widget */
 .blog_widget_ {background:url(../images/green/box_blog_title.gif) no-repeat left top;}
 .blog_widget_ h2 {color:#31c100;}
-.blog_widget_ .items li {background:url(../images/green/bullet_3x3_1.gif) no-repeat 1em .35em;}
+.blog_widget_ .items li {background:url(../images/green/bullet_3x3_1.gif) no-repeat 5px 5px; }
 .blog_widget_ .items li a {color:#3f4040;}
 
 /* Calender */

layouts/xe_blog/css/layout_orange.css

@@ -27,12 +27,7 @@ ul.blogGlobal li a {color:#999999;}
 
 /* title bg box */
 .blogTitleBox {background:url(../images/orange/box_blog_title.gif) no-repeat left top;}
-
+.blogTitleBox h2 {color:#ff6f4a;}
-/* category */
-.blogCategory h2 {color:#ff6f4a;}
-.blogCategory h2 a {color:#ff6f4a;}
-.blogCategory ul.categoryList li {background:url(../images/orange/ico_category.gif) no-repeat .8em 0;}
-.blogCategory ul.categoryList li a {color:#999999;}
 
 /* Content Box */
 .contentBox .centerBg {background:url(../images/orange/box_blog_bg.gif) repeat-y left top;}
@@ -42,7 +37,7 @@ ul.blogGlobal li a {color:#999999;}
 /* Widget */
 .blog_widget_ {background:url(../images/orange/box_blog_title.gif) no-repeat left top;}
 .blog_widget_ h2 {color:#ff6f4a;}
-.blog_widget_ .items li {background:url(../images/orange/bullet_3x3_1.gif) no-repeat 1em .35em;}
+.blog_widget_ .items li {background:url(../images/orange/bullet_3x3_1.gif) no-repeat 5px 5px;}
 .blog_widget_ .items li a {color:#999999;}
 
 /* Calender */

layouts/xe_blog/css/layout_violet.css

@@ -27,12 +27,7 @@ ul.blogGlobal li a {color:#3f4040;}
 
 /* title bg box */
 .blogTitleBox {background:url(../images/violet/box_blog_title.gif) no-repeat left top;}
-
+.blogTitleBox h2 {color:#9285bc;}
-/* category */
-.blogCategory h2 {color:#9285bc;}
-.blogCategory h2 a {color:#9285bc;}
-.blogCategory ul.categoryList li {background:url(../images/violet/ico_category.gif) no-repeat .8em 0;}
-.blogCategory ul.categoryList li a {color:#3f4040;}
 
 /* Content Box */
 .contentBox .centerBg {background:url(../images/violet/box_blog_bg.gif) repeat-y left top;}
@@ -42,7 +37,7 @@ ul.blogGlobal li a {color:#3f4040;}
 /* Widget */
 .blog_widget_ {background:url(../images/violet/box_blog_title.gif) no-repeat left top;}
 .blog_widget_ h2 {color:#9285bc;}
-.blog_widget_ .items li {background:url(../images/violet/bullet_3x3_1.gif) no-repeat 1em .35em;}
+.blog_widget_ .items li {background:url(../images/violet/bullet_3x3_1.gif) no-repeat 5px 5px; }
 .blog_widget_ .items li a {color:#3f4040;}
 
 /* Calender */

layouts/xe_blog/layout.html

@@ -53,67 +53,80 @@
                 <!--@end-->
             <!--@end-->
 		</ul>
+        <div class="clear"></div>
 		<ul class="blogMenu">
             <!--@foreach($top_menu->list as $key => $val)--><!--@if($val['link'])-->
 			<li><a href="{$val['href']}"<!--@if($val['selected'])--> class="on"<!--@end--><!--@if($val['open_window']=='Y')--> onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
             <!--@end--><!--@end-->
 		</ul>
 	</div>
-	<div class="blogProfile">
-        <!--@if($layout_info->profile_image)-->
-        <img src="{$layout_info->profile_image}" border="0" alt="my profile image" class="iePngFix" width="170" />
-        <!--@else-->
-		<img src="./images/{$layout_info->colorset}/@blog_image.gif" alt="profile" class="iePngFix" width="170" />
-        <!--@end-->
-        <!--@if($layout_info->profile)-->
-            <h1>{$layout_info->profile}</h1>
-        <!--@end-->
-	</div>
 
-    <!-- 카테고리 -->
+    <!-- 내용 -->
-    <!--@if($category_list)-->
-	<div class="blogCategory">
-		<div class="blogTitleBox">
-			<h2><a href="{getUrl('','mid',$layout_info->target_mid)}">category</a></h2>
-		</div>
-		<ul class="categoryList">
-        <!--@foreach($category_list as $key => $val)-->
-			<li <!--@if($val->depth)-->style="margin-left:{$val->depth*8}px;"<!--@end--> <!--@if($val->selected)-->class="on"<!--@end-->><a href="{getUrl('','mid',$val->mid,'category',$val->category_srl)}">{$val->title}</a><!--@if($val->document_count)--><span class="documentCount">({$val->document_count})</span><!--@end--></li>
-        <!--@end-->
-		</ul>
-	</div>
-    <!--@else-->
-	<div class="widgetBox">
-        <img src="./images/common/blank.gif" class="zbxe_widget_output" widget="newest_document" skin="blog_newest_document" colorset="layout" title="recent posts" order_target="list_order" order_type="desc" subject_cut_size="12" list_count="7" mid_list="{$layout_info->target_mid}" />
-	</div>
-    <!--@end-->
-
-    <!-- 최근댓글 출력 -->
-	<div class="widgetBox">
-        <img src="./images/common/blank.gif" class="zbxe_widget_output" widget="newest_comment" skin="blog_newest_comment" colorset="layout" title="recent comments" list_count="7" mid_list="{$layout_info->target_mid}" />
-	</div>
-
-    <!-- 달력 출력 -->
-	<div class="widgetBox ">
-        <img src="./images/common/blank.gif" class="zbxe_widget_output" widget="calendar" skin="blog_calendar_list" colorset="layout" mid_list="{$layout_info->target_mid}" />
-
-		<div class="blogSearch">
-            <form action="{Context::getRequestUri()}" method="post">
-                <fieldset>
-                    <legend>{$lang->cmd_search}</legend>
-                    <input type="hidden" name="mid" value="{$layout_info->target_mid}" />
-                    <input type="hidden" name="search_target" value="title_content" />
-					<input name="search_keyword" type="text" class="inputTypeText w110" value="<!--@if($search_keyword)-->{htmlspecialchars($search_keyword)}<!--@end-->" />
-                    <a href="#"><img src="./images/{$layout_info->colorset}/btn_search.gif" alt="{$lang->cmd_search}" width="45" height="20" /></a>
-                </fieldset>
-            </form>
-		</div>
-	</div>
 	<div class="contentBox"><div class="topBg"></div>
 		<div class="centerBg"><div class="contentArea">{$content}<div class="clear"></div></div></div>
 	<div class="bottomBg"></div></div>
+
+    <!-- 위젯들 -->
+    <div class="blogWidgetAreaBox">
+
+      <!-- 프로필 -->
+      <div class="blogProfile">
+          <!--@if($layout_info->profile_image)-->
+          <img src="{$layout_info->profile_image}" border="0" alt="my profile image" class="iePngFix" width="170" />
+          <!--@else-->
+          <img src="./images/{$layout_info->colorset}/@blog_image.gif" alt="profile" class="iePngFix" width="170" />
+          <!--@end-->
+          <!--@if($layout_info->profile)-->
+              <h1>{$layout_info->profile}</h1>
+          <!--@end-->
+
+          <!-- 검색 폼 출력 -->
+          <div class="blogSearch">
+              <form action="{Context::getRequestUri()}" method="post">
+                  <fieldset>
+                      <legend>{$lang->cmd_search}</legend>
+                      <input type="hidden" name="mid" value="{$layout_info->target_mid}" />
+                      <input type="hidden" name="search_target" value="title_content" />
+                      <input name="search_keyword" type="text" class="inputTypeText w110" value="<!--@if($search_keyword)-->{htmlspecialchars($search_keyword)}<!--@end-->" />
+                      <a href="#"><img src="./images/{$layout_info->colorset}/btn_search.gif" alt="{$lang->cmd_search}" width="45" height="20" /></a>
+                  </fieldset>
+              </form>
+          </div>
+      </div>
+
+      <!-- 카테고리 -->
+      <div class="blogTitleBox">
+          <h2>category</h2>
+      </div>
+      <div class="widgetBox ">
+          <img class="zbxe_widget_output" widget="category" body="" skin="default" colorset="normal" mid_list="{$layout_info->target_mid}" />
+      </div>
+
+      <!-- 달력 출력 -->
+      <div class="widgetBox ">
+          <img src="./images/common/blank.gif" class="zbxe_widget_output" widget="calendar" skin="blog_calendar_list" colorset="layout" mid_list="{$layout_info->target_mid}" />
+      </div>
+
+      <!-- 최근 글 출력 -->
+      <div class="widgetBox">
+          <img src="./images/common/blank.gif" class="zbxe_widget_output" widget="newest_document" skin="blog_newest_document" colorset="layout" title="recent posts" order_target="list_order" order_type="desc" subject_cut_size="26" list_count="5" mid_list="{$layout_info->target_mid}" />
+      </div>
+
+      <!-- 최근댓글 출력 -->
+      <div class="widgetBox">
+          <img src="./images/common/blank.gif" class="zbxe_widget_output" widget="newest_comment" skin="blog_newest_comment" colorset="layout" title="recent comments" subject_cut_size="26" list_count="5" mid_list="{$layout_info->target_mid}" />
+      </div>
+
+      <!-- 엮인글 출력 -->
+      <div class="widgetBox">
+          <img src="./images/common/blank.gif" class="zbxe_widget_output" widget="newest_trackback" skin="blog_newest_trackback" colorset="layout" title="recent trackbacks" subject_cut_size="26" list_count="5" mid_list="{$layout_info->target_mid}" />
+      </div>
+
+  </div>
 </div>
 
+<div class="clear"></div>
+
 <div class="zbXE"><a href="http://www.zeroboard.com" onclick="window.open(this.href); return false;"><img src="./images/powerdByZeroboard.gif" alt="powered by zbXE" /></a></div>
 
 

widgets/category/skins/default/css/category.css

@@ -2,7 +2,7 @@
 
 .categoryWidget .top {
     background:url("../images/top.gif") no-repeat left -1px; 
-    padding-left:14px; 
+    padding-left:19px; 
     height:18px;
 }
 
@@ -29,6 +29,7 @@
 
 .categoryWidget .item {
     margin-left:5px; 
+    height:18px;
 }
 
 

widgets/newest_comment/conf/info.xml

@@ -51,6 +51,21 @@
 			<description xml:lang="es">Usted puede definir el número de la lista(predefinido: 5).</description>
 			<description xml:lang="ru">Вы можете выбрать число списка. (стандарт: 5)</description>
         </var>
+        <var id="subject_cut_size">
+          <name xml:lang="ko">제목 글자수</name>
+          <name xml:lang="jp">タイトルの文字数</name>
+          <name xml:lang="zh-CN">标题字数</name>
+          <name xml:lang="en">Length of Subject</name>
+		  <name xml:lang="es">Número de letras del título</name>
+          <name xml:lang="ru">Длина темы</name>
+          <type>text</type>
+          <description xml:lang="ko">제목 글자수를 지정할 수 있습니다. (0또는 비워주시면 자르지 않습니다)</description>
+          <description xml:lang="jp">タイトルの文字数が指定できます（「0」または空欄の場合は、文字数を制限しません）。</description>
+          <description xml:lang="zh-CN">可以设置标题的字数。(0或留空为不限)</description>
+          <description xml:lang="en">Length of Subject can be assigned. (0 or blank value will not restrict the length)</description>
+		  <description xml:lang="es">El largo del título puede ser asignado. (valor 0 o en blanco no restringe el largo)</description>
+          <description xml:lang="ru">Длина темы может быть присвоена. (0 или пустое значение не будут ограничивать длину)</description>
+        </var>
         <var id="mid_list">
             <name xml:lang="ko">대상 모듈</name>
             <name xml:lang="zh-CN">模块对象</name>

widgets/newest_comment/newest_comment.class.php

@@ -28,6 +28,10 @@
             $obj->sort_index = $order_target;
             $obj->list_count = $list_count;
 
+            // 제목 길이 자르기
+            $subject_cut_size = $args->subject_cut_size;
+            if(!$subject_cut_size) $subject_cut_size = 0;
+
             // comment 모듈의 model 객체를 받아서 getCommentList() method를 실행
             $oCommentModel = &getModel('comment');
             $output = $oCommentModel->getNewestCommentList($obj);
@@ -37,6 +41,7 @@
             
             $widget_info->title = $title;
             $widget_info->comment_list = $output;
+            $widget_info->subject_cut_size = $subject_cut_size;
 
             Context::set('widget_info', $widget_info);
 

widgets/newest_comment/skins/blog_newest_comment/list.html

@@ -24,7 +24,7 @@
     </div>
     <ul class="items">
         <!--@foreach($widget_info->comment_list as $val)-->
-            <li><a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}">{$val->getSummary(60)}</a></li>
+            <li><a href="{getUrl('','document_srl',$val->get('document_srl'))}#comment_{$val->get('comment_srl')}">{$val->getSummary($widget_info->subject_cut_size)}</a></li>
         <!--@end-->
     </ul>
   </div>