1. faceOff 레이아웃 기본 속성 및 편집 기능 개선

- 모든 영역은 기본적으로 padding:10px를 가지도록 하고 header의 경우 margin/padding 조절 가능하도록 개선
- 기본 sample faceOff레이아웃 변경
2. 가로 메뉴 출력 스킨 위젯의 CSS속성 변경


git-svn-id: http://xe-core.googlecode.com/svn/sandbox@5836 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
zero 2009-03-11 02:51:30 +00:00
parent 5fc3ef700e
commit d789f41342
10 changed files with 119 additions and 201 deletions

View file

@ -863,58 +863,4 @@ address.period { font-style:normal; font-size:10px; font-family:tahoma; text-ali
.widgetContainer.black .widgetMenuB li ul{ border-color:#777; background:#000;} .widgetContainer.black .widgetMenuB li ul{ border-color:#777; background:#000;}
.widgetContainer.black .widgetMenuB li li.first{ background-image:url(../img/black/arrowMenuB.gif);} .widgetContainer.black .widgetMenuB li li.first{ background-image:url(../img/black/arrowMenuB.gif);}
/* widgetMenuCgreen */
.widgetContainer.black .widgetMenuCgreen{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetContainer.black .widgetMenuCgreen ul li ul{ background:#35ad06; border-color:#027a00;}
.widgetContainer.black .widgetMenuCgreen li{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetContainer.black .widgetMenuCgreen li.first a{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetContainer.black .widgetMenuCgreen li.active{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetContainer.black .widgetMenuCgreen li.active a{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetContainer.black .widgetMenuCgreen li.active li.first{ background-image:url(../img/white/arrowMenuCgreen.gif);}
/* widgetMenuCblue */
.widgetContainer.black .widgetMenuCblue{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetContainer.black .widgetMenuCblue ul li ul{ background:#0688ad; border-color:#00557a;}
.widgetContainer.black .widgetMenuCblue li{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetContainer.black .widgetMenuCblue li.first a{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetContainer.black .widgetMenuCblue li.active{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetContainer.black .widgetMenuCblue li.active a{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetContainer.black .widgetMenuCblue li.active li.first{ background-image:url(../img/white/arrowMenuCblue.gif);}
/* widgetMenuCcyan */
.widgetContainer.black .widgetMenuCcyan{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetContainer.black .widgetMenuCcyan ul li ul{ background:#06a4ad; border-color:#00717a;}
.widgetContainer.black .widgetMenuCcyan li{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetContainer.black .widgetMenuCcyan li.first a{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetContainer.black .widgetMenuCcyan li.active{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetContainer.black .widgetMenuCcyan li.active a{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetContainer.black .widgetMenuCcyan li.active li.first{ background-image:url(../img/white/arrowMenuCcyan.gif);}
/* widgetMenuCorange */
.widgetContainer.black .widgetMenuCorange{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetContainer.black .widgetMenuCorange ul li ul{ background:#ad9906; border-color:#7a6600;}
.widgetContainer.black .widgetMenuCorange li{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetContainer.black .widgetMenuCorange li.first a{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetContainer.black .widgetMenuCorange li.active{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetContainer.black .widgetMenuCorange li.active a{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetContainer.black .widgetMenuCorange li.active li.first{ background-image:url(../img/white/arrowMenuCorange.gif);}
/* widgetMenuCred */
.widgetContainer.black .widgetMenuCred{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetContainer.black .widgetMenuCred ul li ul{ background:#ad4606; border-color:#7a1300;}
.widgetContainer.black .widgetMenuCred li{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetContainer.black .widgetMenuCred li.first a{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetContainer.black .widgetMenuCred li.active{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetContainer.black .widgetMenuCred li.active a{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetContainer.black .widgetMenuCred li.active li.first{ background-image:url(../img/white/arrowMenuCred.gif);}
/* widgetMenuCgray */
.widgetContainer.black .widgetMenuCgray{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetContainer.black .widgetMenuCgray ul li ul{ background:#595959; border-color:#7a1300;}
.widgetContainer.black .widgetMenuCgray li{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetContainer.black .widgetMenuCgray li.first a{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetContainer.black .widgetMenuCgray li.active{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetContainer.black .widgetMenuCgray li.active a{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetContainer.black .widgetMenuCgray li.active li.first{ background-image:url(../img/white/arrowMenuCgray.gif);}
address.period { color:#333; } address.period { color:#333; }

View file

@ -22,65 +22,44 @@ h2{ position:relative; margin:0 0 10px 0; border-bottom:2px solid;}
h3{ position:relative; margin:0;}*/ h3{ position:relative; margin:0;}*/
/* Container + Header + Body + Footer */ /* Container + Header + Body + Footer */
#container{ position:relative; margin:0 20px;} #container{ position:relative; margin:0;}
#header{ position:relative; *zoom:1;} #header{ position:relative; *zoom:1; overflow:hidden; }
#header:after{ content:""; display:block; clear:both;} #header:after{ content:""; display:block; clear:both;}
#body{ position:relative; *zoom:1;} #body{ position:relative; *zoom:1;}
#body:after{ content:""; display:block; clear:both;} #body:after{ content:""; display:block; clear:both;}
#content{ position:relative; text-align:justify; padding:0 10px;} #content{ position:relative; text-align:justify; padding:0;}
#footer{ position:relative; *zoom:1; padding:20px 0 10px 0;} #footer{ position:relative; *zoom:1; padding:10px 0 10px 0; }
#footer address{ text-align:center;} #footer address{ text-align:center;}
/* Layout Width */ /* Layout Width */
.fixed #container{ width:960px; margin-left:auto; margin-right:auto;} .fixed #container{ width:960px; margin-left:auto; margin-right:auto;}
.liquid #container{ width:80%; margin-left:auto; margin-right:auto;} .liquid #container{ width:90%; margin-left:auto; margin-right:auto;}
.hybrid #container{ width:80%; margin-left:auto; margin-right:auto;} .hybrid #container{ width:90%; margin-left:auto; margin-right:auto;}
/* Align Layout */ /* Align Layout */
.aLeft #container{ margin-left:0;} .aLeft #container{ margin-left:0;}
.aRight #container{ margin-right:0;} .aRight #container{ margin-right:0;}
/* Top Navigation */
#header .navigation{ position:relative; padding:15px 0 0 0; margin:0; overflow:hidden; float:right;}
#header .navigation:after{ content:""; display:block; clear:both;}
#header .navigation *{ margin:0; padding:0;}
#header .navigation h2{ display:none;}
#header .navigation li{ position:relative; float:left; list-style:none; padding:0 5px;}
/* Footer Navigation */
#footer .navigation{ position:relative; padding:0; margin:0;}
#footer .navigation:after{ content:""; display:block; clear:both;}
#footer .navigation *{ margin:0; padding:0;}
#footer .navigation h2{ display:none;}
#footer .navigation .section{ text-align:center;}
#footer .navigation ul{ position:relative; overflow:hidden;}
#footer .navigation li{ display:inline; position:relative; list-style:none; padding:0 5px;}
/* Neck */ /* Neck */
#neck{ position:relative; clear:both; *zoom:1;}/* overflow:hidden;}*/ #neck{ position:relative; clear:both; *zoom:1;}/* overflow:hidden;}*/
#neck .extension{ /* margin-right:-30px;*/ *zoom:1;} #neck .extension{ /* margin-right:-30px;*/ *zoom:1;}
#neck .extension:after{ content:""; display:block; clear:both;} #neck .extension:after{ content:""; display:block; clear:both;}
#neck .extension .section{ position:relative; float:left; width:300px; margin-right:30px;}
.liquid #neck .extension .section{ width:30%; margin-right:3.3%;}
/* Knee */ /* Knee */
#knee{ position:relative; clear:both; *zoom:1;}/* overflow:hidden;}*/ #knee{ position:relative; clear:both; *zoom:1;}/* overflow:hidden;}*/
#knee .extension{ /* margin-right:-30px;*/ *zoom:1;} #knee .extension{ /* margin-right:-30px;*/ *zoom:1;}
#knee .extension:after{ content:""; display:block; clear:both;} #knee .extension:after{ content:""; display:block; clear:both;}
#knee .extension .section{ position:relative; float:left; width:300px; margin-right:30px;}
.liquid #knee .extension .section{ width:30%; margin-right:3.3%;}
/* Extension */ /* Extension */
.extension, .section{position:relative;} #body .extension{ position:relative; display:none; }
#body .extension{ position:relative; display:none; margin-bottom:20px;}
.extension .section{ margin-bottom:20px;}
.extension .section ul{ margin-left:20px; padding:0;}
/* ----- Fixed 2 Column Layout ----- */ /* ----- Fixed 2 Column Layout ----- */
.fixed .ce #body .e1, .fixed .ce #body .e1,
.fixed .ec #body .e1{ width:220px;} .fixed .ec #body .e1{ width:200px; padding:10px;}
.fixed .ce #body #content,
.fixed .ec #body #content{ width:700px;} .fixed .ce #body #content{ width:730px; padding:10px 0 10px 10px;}
.fixed .ec #body #content{ width:730px; padding:10px 10px 10px 0;}
.fixed .ce #body #content{ float:left;} .fixed .ce #body #content{ float:left;}
.fixed .ec #body #content{ float:right;} .fixed .ec #body #content{ float:right;}
.fixed .ce #body .e1, .fixed .ce #body .e1,
@ -88,48 +67,24 @@ h3{ position:relative; margin:0;}*/
.fixed .ce #body .e1{ float:right; clear:right;} .fixed .ce #body .e1{ float:right; clear:right;}
.fixed .ec #body .e1{ float:left; clear:left;} .fixed .ec #body .e1{ float:left; clear:left;}
/* ----- Liquid 2 Column Layout ----- */
.liquid .ce #body .e1,
.liquid .ec #body .e1{ width:23%;}
.liquid .ce #body #content,
.liquid .ec #body #content{ width:75%;}
.liquid .ce #body #content{ float:left;}
.liquid .ec #body #content{ float:right;}
.liquid .ce #body .e1,
.liquid .ec #body .e1{ display:block;}
.liquid .ce #body .e1{ float:right; clear:right;}
.liquid .ec #body .e1{ float:left; clear:left;}
/* ----- Hybrid 2 Column Layout ----- */
.hybrid .ce #body{ padding-right:280px;}
.hybrid .ec #body{ padding-left:280px;}
.hybrid .ce #body .e1,
.hybrid .ec #body .e1{ width:260px;}
.hybrid .ce #body #content{ float:left;}
.hybrid .ec #body #content{ float:right;}
.hybrid .ce #body .e1,
.hybrid .ec #body .e1{ display:block;}
.hybrid .ce #body .e1{ float:right; clear:right; margin-left:-260px; right:-280px;}
.hybrid .ec #body .e1{ float:left; clear:left; margin-right:-260px; left:-280px;}
/* ----- Fixed 3 Column Layout ----- */ /* ----- Fixed 3 Column Layout ----- */
.fixed .cee #body .e1, .fixed .cee #body .e1 { display:block; width:200px; padding:10px;}
.fixed .cee #body .e2, .fixed .cee #body .e2 { display:block; width:200px; padding:10px;}
.fixed .ece #body .e1, .fixed .ece #body .e1 { display:block; width:200px; padding:10px;}
.fixed .ece #body .e2, .fixed .ece #body .e2 { display:block; width:200px; padding:10px;}
.fixed .eec #body .e1, .fixed .eec #body .e1 { display:block; width:200px; padding:10px;}
.fixed .eec #body .e2{ display:block; width:200px;} .fixed .eec #body .e2 { display:block; width:200px; padding:10px;}
.fixed .cee #body #content, .fixed .cee #body #content { width:510px; padding:10px 0 10px 10px; }
.fixed .ece #body #content, .fixed .ece #body #content { width:520px; padding:10px 0 10px 0; }
.fixed .eec #body #content{ width:500px;} .fixed .eec #body #content { width:510px; padding:10px 10px 10px 0; }
.fixed .cee #body #content{ float:left; margin-right:20px;} .fixed .cee #body #content{ float:left; }
.fixed .ece #body #content{ float:left; margin-right:-100%; left:220px;} .fixed .ece #body #content{ float:left; margin-right:-100%; left:220px;}
.fixed .eec #body #content{ float:right;} .fixed .eec #body #content{ float:right;}
.fixed .ece #body .e1, .fixed .ece #body .e1,
.fixed .eec #body .e1{ float:left; margin-right:20px;} .fixed .eec #body .e1{ float:left; }
.fixed .cee #body .e1, .fixed .cee #body .e1,
.fixed .eec #body .e2{ float:left;} .fixed .eec #body .e2{ float:left;}
@ -137,24 +92,36 @@ h3{ position:relative; margin:0;}*/
.fixed .cee #body .e2, .fixed .cee #body .e2,
.fixed .ece #body .e2{ float:right;} .fixed .ece #body .e2{ float:right;}
/* ----- Liquid 2 Column Layout ----- */
.liquid .ce #body .e1,
.liquid .ec #body .e1{ width:20%;}
.liquid .ce #body #content,
.liquid .ec #body #content{ width:80%;}
.liquid .ce #body #content{ float:left;}
.liquid .ec #body #content{ float:right;}
.liquid .ce #body .e1,
.liquid .ec #body .e1{ display:block;}
.liquid .ce #body .e1{ float:right; clear:right;}
.liquid .ec #body .e1{ float:left; clear:left;}
/* ----- Liquid 3 Column Layout ----- */ /* ----- Liquid 3 Column Layout ----- */
.liquid .cee #body .e1, .liquid .cee #body .e1,
.liquid .cee #body .e2, .liquid .cee #body .e2,
.liquid .ece #body .e1, .liquid .ece #body .e1,
.liquid .ece #body .e2, .liquid .ece #body .e2,
.liquid .eec #body .e1, .liquid .eec #body .e1,
.liquid .eec #body .e2{ display:block; width:20%;} .liquid .eec #body .e2{ display:block; width:21%;}
.liquid .cee #body #content, .liquid .cee #body #content,
.liquid .ece #body #content, .liquid .ece #body #content,
.liquid .eec #body #content{ width:56%;} .liquid .eec #body #content{ width:58%;}
.liquid .cee #body #content{ float:left; margin-right:2%;} .liquid .cee #body #content{ float:left; }
.liquid .ece #body #content{ float:left; margin-right:-100%; left:22%;} .liquid .ece #body #content{ float:left; margin-right:-100%; left:21%;}
.liquid .eec #body #content{ float:right;} .liquid .eec #body #content{ float:right;}
.liquid .ece #body .e1, .liquid .ece #body .e1,
.liquid .eec #body .e1{ float:left; margin-right:2%;} .liquid .eec #body .e1{ float:left; }
.liquid .cee #body .e1, .liquid .cee #body .e1,
.liquid .eec #body .e2{ float:left;} .liquid .eec #body .e2{ float:left;}
@ -162,31 +129,45 @@ h3{ position:relative; margin:0;}*/
.liquid .cee #body .e2, .liquid .cee #body .e2,
.liquid .ece #body .e2{ float:right;} .liquid .ece #body .e2{ float:right;}
/* ----- Hybrid 2 Column Layout ----- */
.hybrid .ce #body{ padding-right:230px;}
.hybrid .ec #body{ padding-left:230px; }
.hybrid .ce #body .e1,
.hybrid .ec #body .e1{ width:200px; padding:10px;}
.hybrid .ce #body #content{ width:100%; padding:10px 0 10px 10px; }
.hybrid .ec #body #content{ width:100%; padding:10px 10px 10px 0; margin-left:-100%;}
.hybrid .ce #body #content{ float:left;}
.hybrid .ec #body #content{ float:right;}
.hybrid .ce #body .e1,
.hybrid .ec #body .e1{ display:block; }
.hybrid .ce #body .e1{ float:right; clear:right; margin-left:-220px; right:-220px;}
.hybrid .ec #body .e1{ float:left; clear:left; margin-right:-230px; left:-230px;}
/* ----- Hybrid 3 Column Layout ----- */ /* ----- Hybrid 3 Column Layout ----- */
.hybrid .cee #body .e1, .hybrid .cee #body .e1,
.hybrid .cee #body .e2, .hybrid .cee #body .e2,
.hybrid .ece #body .e1, .hybrid .ece #body .e1,
.hybrid .ece #body .e2, .hybrid .ece #body .e2,
.hybrid .eec #body .e1, .hybrid .eec #body .e1,
.hybrid .eec #body .e2{ display:block; width:220px;} .hybrid .eec #body .e2{ display:block; width:200px; padding:10px; }
.hybrid .cee #body{ padding-right:480px;} .hybrid .cee #body{ padding-right:440px; padding-left:10px; }
.hybrid .ece #body{ padding-left:240px; padding-right:240px;} .hybrid .ece #body{ padding-left:220px; padding-right:220px;}
.hybrid .eec #body{ padding-left:480px;} .hybrid .eec #body{ padding-left:440px; padding-right:10px;}
.hybrid .cee #body #content, .hybrid .cee #body #content{width:100%;padding:10px 0 10px 0; }
.hybrid .ece #body #content, .hybrid .ece #body #content{width:100%;padding:10px 0 10px 0; }
.hybrid .eec #body #content{ width:100%;} .hybrid .eec #body #content{width:100%;padding:10px 0 10px 0; }
.hybrid .cee #body #content, .hybrid .cee #body #content{ float:left; margin-right:-450px; }
.hybrid .ece #body #content{ float:left; margin-right:-100%;} .hybrid .ece #body #content{ float:left; margin-right:-100%;}
.hybrid .eec #body #content{ float:right;} .hybrid .eec #body #content{ float:right;}
.hybrid .ece #body .e1, .hybrid .ece #body .e1,
.hybrid .eec #body .e2{ float:left; left:-240px; margin-right:-220px;} .hybrid .eec #body .e2{ float:left; left:-220px; margin-right:-220px;}
.hybrid .eec #body .e1{ float:left; left:-480px; margin-right:-220px;} .hybrid .eec #body .e1{ float:left; left:-440px; margin-right:-220px;}
.hybrid .cee #body .e1, .hybrid .cee #body .e1,
.hybrid .ece #body .e2{ float:right; left:240px; margin-left:-220px;} .hybrid .ece #body .e2{ float:right; left:220px; margin-left:-220px;}
.hybrid .cee #body .e2{ float:right; left:480px; margin-left:-220px;} .hybrid .cee #body .e2{ float:right; left:440px; margin-left:-220px;}

View file

@ -4,7 +4,6 @@
<a href="#content" class="skipToContent">Skip to content</a> <a href="#content" class="skipToContent">Skip to content</a>
<h1><a href="{$layout_info->index_url}"><!--@if($layout_info->logo_image)--><img src="{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /><!--@elseif($layout_info->logo_text)-->{$layout_info->logo_text}<!--@else-->Title<!--@end--></a></h1> <h1><a href="{$layout_info->index_url}"><!--@if($layout_info->logo_image)--><img src="{$layout_info->logo_image}" alt="logo" border="0" class="iePngFix" /><!--@elseif($layout_info->logo_text)-->{$layout_info->logo_text}<!--@else-->Title<!--@end--></a></h1>
<hr /> <hr />
<div class="navigation"></div>
</div> </div>
<hr /> <hr />
@ -44,7 +43,6 @@
</div> </div>
<hr /> <hr />
<div id="footer"> <div id="footer">
<div class="navigation"></div>
<hr /> <hr />
<address> <address>
<!--@if($layout_info->copyright_text)--> <!--@if($layout_info->copyright_text)-->

View file

@ -199,7 +199,7 @@ background:#ddd; }
.demoHybrid .demoECE #demoBody .demoE2 { float:right; left:20px; margin-left:-15px; } .demoHybrid .demoECE #demoBody .demoE2 { float:right; left:20px; margin-left:-15px; }
.demoHybrid .demoCEE #demoBody .demoE2 { float:right; left:40px; margin-left:-15px; } .demoHybrid .demoCEE #demoBody .demoE2 { float:right; left:40px; margin-left:-15px; }
.aboutFaceOff { margin:10px; height:300px; overflow-y:scroll; background-color:#EEE; color:#000; padding:20px; } .aboutFaceOff { background-color:#EEE; color:#000; padding:20px; }
.aboutFaceOff h3 { padding:0; margin:0; font-size:14px; font-weight:bold; text-decoration:underline; margin-bottom:10px; } .aboutFaceOff h3 { padding:0; margin:0; font-size:14px; font-weight:bold; text-decoration:underline; margin-bottom:10px; }
.aboutFaceOff p, .aboutFaceOff p,
.aboutFaceOff li { color:#666; } .aboutFaceOff li { color:#666; }

View file

@ -863,58 +863,5 @@ address.period { font-style:normal; font-size:10px; font-family:tahoma; text-ali
.widgetContainer.black .widgetMenuB li ul{ border-color:#777; background:#000;} .widgetContainer.black .widgetMenuB li ul{ border-color:#777; background:#000;}
.widgetContainer.black .widgetMenuB li li.first{ background-image:url(../img/black/arrowMenuB.gif);} .widgetContainer.black .widgetMenuB li li.first{ background-image:url(../img/black/arrowMenuB.gif);}
/* widgetMenuCgreen */
.widgetContainer.black .widgetMenuCgreen{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetContainer.black .widgetMenuCgreen ul li ul{ background:#35ad06; border-color:#027a00;}
.widgetContainer.black .widgetMenuCgreen li{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetContainer.black .widgetMenuCgreen li.first a{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetContainer.black .widgetMenuCgreen li.active{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetContainer.black .widgetMenuCgreen li.active a{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetContainer.black .widgetMenuCgreen li.active li.first{ background-image:url(../img/white/arrowMenuCgreen.gif);}
/* widgetMenuCblue */
.widgetContainer.black .widgetMenuCblue{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetContainer.black .widgetMenuCblue ul li ul{ background:#0688ad; border-color:#00557a;}
.widgetContainer.black .widgetMenuCblue li{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetContainer.black .widgetMenuCblue li.first a{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetContainer.black .widgetMenuCblue li.active{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetContainer.black .widgetMenuCblue li.active a{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetContainer.black .widgetMenuCblue li.active li.first{ background-image:url(../img/white/arrowMenuCblue.gif);}
/* widgetMenuCcyan */
.widgetContainer.black .widgetMenuCcyan{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetContainer.black .widgetMenuCcyan ul li ul{ background:#06a4ad; border-color:#00717a;}
.widgetContainer.black .widgetMenuCcyan li{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetContainer.black .widgetMenuCcyan li.first a{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetContainer.black .widgetMenuCcyan li.active{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetContainer.black .widgetMenuCcyan li.active a{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetContainer.black .widgetMenuCcyan li.active li.first{ background-image:url(../img/white/arrowMenuCcyan.gif);}
/* widgetMenuCorange */
.widgetContainer.black .widgetMenuCorange{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetContainer.black .widgetMenuCorange ul li ul{ background:#ad9906; border-color:#7a6600;}
.widgetContainer.black .widgetMenuCorange li{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetContainer.black .widgetMenuCorange li.first a{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetContainer.black .widgetMenuCorange li.active{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetContainer.black .widgetMenuCorange li.active a{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetContainer.black .widgetMenuCorange li.active li.first{ background-image:url(../img/white/arrowMenuCorange.gif);}
/* widgetMenuCred */
.widgetContainer.black .widgetMenuCred{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetContainer.black .widgetMenuCred ul li ul{ background:#ad4606; border-color:#7a1300;}
.widgetContainer.black .widgetMenuCred li{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetContainer.black .widgetMenuCred li.first a{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetContainer.black .widgetMenuCred li.active{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetContainer.black .widgetMenuCred li.active a{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetContainer.black .widgetMenuCred li.active li.first{ background-image:url(../img/white/arrowMenuCred.gif);}
/* widgetMenuCgray */
.widgetContainer.black .widgetMenuCgray{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetContainer.black .widgetMenuCgray ul li ul{ background:#595959; border-color:#7a1300;}
.widgetContainer.black .widgetMenuCgray li{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetContainer.black .widgetMenuCgray li.first a{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetContainer.black .widgetMenuCgray li.active{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetContainer.black .widgetMenuCgray li.active a{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetContainer.black .widgetMenuCgray li.active li.first{ background-image:url(../img/white/arrowMenuCgray.gif);}
address.period { color:#333; } address.period { color:#333; }

View file

@ -559,6 +559,8 @@ var PropertyDialog = {
isWidget = sel.is('.widgetOutput'); isWidget = sel.is('.widgetOutput');
isBody = sel.is('html>body'); isBody = sel.is('html>body');
isContainer = sel.is('#container'); isContainer = sel.is('#container');
isHeader = sel.is('#header');
$('fieldset',dlg).show(); $('fieldset',dlg).show();
@ -571,6 +573,11 @@ var PropertyDialog = {
$('fieldset[name=font]',dlg).show(); $('fieldset[name=font]',dlg).show();
} }
if(isHeader){
$('fieldset[name=margin]',dlg).show();
$('fieldset[name=padding]',dlg).show();
}
// remove visible more // remove visible more
this.element.find('.visible-more').removeClass('visible-more'); this.element.find('.visible-more').removeClass('visible-more');

View file

@ -1,10 +1,24 @@
@charset "utf-8";
.widgetNavC{ margin:0; padding:0; font-size:12px; line-height:1.2; background-repeat:repeat-x;background-position:0 0;} .widgetNavC{ margin:0; padding:0; font-size:12px; line-height:1.2; background-repeat:repeat-x;background-position:0 0;}
.widgetNavC ul{ margin:0; padding:0; height:35px;} .widgetNavC ul{ margin:0; padding:0; height:35px;}
.widgetNavC ul li ul{ display:none; position:absolute; top:40px; left:20px; height:auto; padding-bottom:7px; background:#35ad06; border:1px solid #027a00;}
.widgetNavC ul li { margin:0 !important; }
.widgetNavC ul li.active ul{ display:block;} .widgetNavC ul li.active ul{ display:block;}
.widgetNavC ul.aCenter{ margin-left:auto; margin-right:auto;} .widgetNavC ul.aCenter{ margin-left:auto; margin-right:auto;}
.widgetNavC ul.aLeft{ margin-right:auto;} .widgetNavC ul.aLeft{ margin-right:auto;}
.widgetNavC ul.aRight{ margin-left:auto;} .widgetNavC ul.aRight{ margin-left:auto;}
.widgetNavC li{ position:relative; padding-right:3px; float:left; list-style:none; background-repeat:no-repeat;background-position:right -40px; white-space:nowrap;}
.widgetNavC li a{ position:relative; float:left; padding:12px 22px 0 25px; height:23px; color:#fff !important; text-decoration:none !important;}
.widgetNavC li.first a{ background-repeat:no-repeat;background-position:left -40px;}
.widgetNavC li.active{ margin-left:-2px; background-repeat:no-repeat;background-position:right -80px;}
.widgetNavC li.active a{ font-weight:bold; color:#ff0 !important; background-repeat:no-repeat; background-position:left -80px;}
.widgetNavC li.active li{ padding:2px 15px; float:none; background:none;}
.widgetNavC li.active li.active{ margin:0;}
.widgetNavC li.active li.first{ margin-top:-4px; padding-top:14px; background-repeat:no-repeat; background-position:30px top;}
.widgetNavC li.active li a{ display:block; _display:inline-block; padding:0; float:none; height:auto; font-weight:normal; color:#fff !important; background:none;}
.widgetNavC li.active li.active a{ color:#ff0 !important;}
.widgetNavC li.active li a:hover,
.widgetNavC li.active li a:active,
.widgetNavC li.active li a:focus{ text-decoration:underline !important;}
ul.widgetNavSub { display:block; height:auto; border:1px solid; padding-bottom:7px; background:#35ad06; background-image:none !important; padding:0; margin:0;} ul.widgetNavSub { display:block; height:auto; border:1px solid; padding-bottom:7px; background:#35ad06; background-image:none !important; padding:0; margin:0;}
ul.widgetNavSub li { list-style:none; } ul.widgetNavSub li { list-style:none; }
@ -16,48 +30,73 @@ ul.widgetNavSub li.first{ margin-top:-4px; padding-top:14px; background-repeat:n
/* widgetNavCgreen */ /* widgetNavCgreen */
.widgetNavCgreen{ background-image:url(../img/white/bgMenuCgreen.gif);} .widgetNavCgreen{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen ul li ul{ background:#35ad06; border-color:#027a00;}
.widgetNavCgreen li{ background-image:url(../img/white/bgMenuCgreen.gif);} .widgetNavCgreen li{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen li.first a{ background-image:url(../img/white/bgMenuCgreen.gif);} .widgetNavCgreen li.first a{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen li.active{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen li.active a{ background-image:url(../img/white/bgMenuCgreen.gif);}
.widgetNavCgreen li.active li.first{ background-image:url(../img/white/arrowMenuCgreen.gif);}
ul.widgetNavSub.green { background:#35ad06; border-color:#027a00;} ul.widgetNavSub.green { background:#35ad06; border-color:#027a00;}
ul.widgetNavSub.green { background-image:url(../img/white/bgMenuCgreen.gif);} ul.widgetNavSub.green { background-image:url(../img/white/bgMenuCgreen.gif);}
ul.widgetNavSub.green li.first{ background-image:url(../img/white/arrowMenuCgreen.gif);} ul.widgetNavSub.green li.first{ background-image:url(../img/white/arrowMenuCgreen.gif);}
/* widgetNavCblue */ /* widgetNavCblue */
.widgetNavCblue{ background-image:url(../img/white/bgMenuCblue.gif);} .widgetNavCblue{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue ul li ul{ background:#0688ad; border-color:#00557a;}
.widgetNavCblue li{ background-image:url(../img/white/bgMenuCblue.gif);} .widgetNavCblue li{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue li.first a{ background-image:url(../img/white/bgMenuCblue.gif);} .widgetNavCblue li.first a{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue li.active{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue li.active a{ background-image:url(../img/white/bgMenuCblue.gif);}
.widgetNavCblue li.active li.first{ background-image:url(../img/white/arrowMenuCblue.gif);}
ul.widgetNavSub.blue { background:#0688ad; border-color:#00557a;} ul.widgetNavSub.blue { background:#0688ad; border-color:#00557a;}
ul.widgetNavSub.blue { background-image:url(../img/white/bgMenuCblue.gif);} ul.widgetNavSub.blue { background-image:url(../img/white/bgMenuCblue.gif);}
ul.widgetNavSub.blue li.first{ background-image:url(../img/white/arrowMenuCblue.gif);} ul.widgetNavSub.blue li.first{ background-image:url(../img/white/arrowMenuCblue.gif);}
/* widgetNavCcyan */ /* widgetNavCcyan */
.widgetNavCcyan{ background-image:url(../img/white/bgMenuCcyan.gif);} .widgetNavCcyan{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan ul li ul{ background:#06a4ad; border-color:#00717a;}
.widgetNavCcyan li{ background-image:url(../img/white/bgMenuCcyan.gif);} .widgetNavCcyan li{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan li.first a{ background-image:url(../img/white/bgMenuCcyan.gif);} .widgetNavCcyan li.first a{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan li.active{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan li.active a{ background-image:url(../img/white/bgMenuCcyan.gif);}
.widgetNavCcyan li.active li.first{ background-image:url(../img/white/arrowMenuCcyan.gif);}
ul.widgetNavSub.cyan { background:#06a4ad; border-color:#00717a;} ul.widgetNavSub.cyan { background:#06a4ad; border-color:#00717a;}
ul.widgetNavSub.cyan{ background-image:url(../img/white/bgMenuCcyan.gif);} ul.widgetNavSub.cyan{ background-image:url(../img/white/bgMenuCcyan.gif);}
ul.widgetNavSub.cyan li.first{ background-image:url(../img/white/arrowMenuCcyan.gif);} ul.widgetNavSub.cyan li.first{ background-image:url(../img/white/arrowMenuCcyan.gif);}
/* widgetNavCorange */ /* widgetNavCorange */
.widgetNavCorange{ background-image:url(../img/white/bgMenuCorange.gif);} .widgetNavCorange{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange ul li ul{ background:#ad9906; border-color:#7a6600;}
.widgetNavCorange li{ background-image:url(../img/white/bgMenuCorange.gif);} .widgetNavCorange li{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange li.first a{ background-image:url(../img/white/bgMenuCorange.gif);} .widgetNavCorange li.first a{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange li.active{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange li.active a{ background-image:url(../img/white/bgMenuCorange.gif);}
.widgetNavCorange li.active li.first{ background-image:url(../img/white/arrowMenuCorange.gif);}
ul.widgetNavSub.orange { background:#ad9906; border-color:#7a6600;} ul.widgetNavSub.orange { background:#ad9906; border-color:#7a6600;}
ul.widgetNavSub.orange{ background-image:url(../img/white/bgMenuCorange.gif);} ul.widgetNavSub.orange{ background-image:url(../img/white/bgMenuCorange.gif);}
ul.widgetNavSub.orange li.first{ background-image:url(../img/white/arrowMenuCorange.gif);} ul.widgetNavSub.orange li.first{ background-image:url(../img/white/arrowMenuCorange.gif);}
/* widgetNavCred */ /* widgetNavCred */
.widgetNavCred{ background-image:url(../img/white/bgMenuCred.gif);} .widgetNavCred{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred ul li ul{ background:#ad4606; border-color:#7a1300;}
.widgetNavCred li{ background-image:url(../img/white/bgMenuCred.gif);} .widgetNavCred li{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred li.first a{ background-image:url(../img/white/bgMenuCred.gif);} .widgetNavCred li.first a{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred li.active{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred li.active a{ background-image:url(../img/white/bgMenuCred.gif);}
.widgetNavCred li.active li.first{ background-image:url(../img/white/arrowMenuCred.gif);}
ul.widgetNavSub.red { background:#ad4606; border-color:#7a1300;} ul.widgetNavSub.red { background:#ad4606; border-color:#7a1300;}
ul.widgetNavSub.red {background-image:url(../img/white/bgMenuCred.gif);} ul.widgetNavSub.red {background-image:url(../img/white/bgMenuCred.gif);}
ul.widgetNavSub.red li.first{ background-image:url(../img/white/arrowMenuCred.gif);} ul.widgetNavSub.red li.first{ background-image:url(../img/white/arrowMenuCred.gif);}
/* widgetNavCgray */ /* widgetNavCgray */
.widgetNavCgray{ background-image:url(../img/white/bgMenuCgray.gif);} .widgetNavCgray{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray ul li ul{ background:#595959; border-color:#7a1300;}
.widgetNavCgray li{ background-image:url(../img/white/bgMenuCgray.gif);} .widgetNavCgray li{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray li.first a{ background-image:url(../img/white/bgMenuCgray.gif);} .widgetNavCgray li.first a{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray li.active{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray li.active a{ background-image:url(../img/white/bgMenuCgray.gif);}
.widgetNavCgray li.active li.first{ background-image:url(../img/white/arrowMenuCgray.gif);}
ul.widgetNavSub.gray { background:#595959; border-color:#555;} ul.widgetNavSub.gray { background:#595959; border-color:#555;}
ul.widgetNavSub.gray{ background-image:url(../img/white/bgMenuCgray.gif);} ul.widgetNavSub.gray{ background-image:url(../img/white/bgMenuCgray.gif);}
ul.widgetNavSub.gray li.first{ background-image:url(../img/white/arrowMenuCgray.gif);} ul.widgetNavSub.gray li.first{ background-image:url(../img/white/arrowMenuCgray.gif);}

View file

@ -74,7 +74,7 @@ WidgetNavigator.prototype.drawMenu = function(parent_srl){
var parent_offset = jQuery('li.node_'+parent_srl).offset(); var parent_offset = jQuery('li.node_'+parent_srl).offset();
h.css({ h.css({
top : parent_offset.top + jQuery('li.node_'+parent_srl).height()-2, top : parent_offset.top + jQuery('li.node_'+parent_srl).height()-2,
left : parent_offset.left + 2 left : parent_offset.left
}) })
// 2차메뉴 // 2차메뉴
@ -98,6 +98,7 @@ WidgetNavigator.prototype.drawMenu = function(parent_srl){
var t = jQuery(this); var t = jQuery(this);
var m = t.attr('text'); var m = t.attr('text');
if(!m) return;
var u ='#'; var u ='#';
if(t.attr('url')){ if(t.attr('url')){
if(/^http\:\/\//.test(t.attr('url'))){ if(/^http\:\/\//.test(t.attr('url'))){
@ -297,4 +298,4 @@ WidgetNavigator.prototype.getDepth = function(node_srl){
var m = this.data.find('span[node_srl='+node_srl+']'); var m = this.data.find('span[node_srl='+node_srl+']');
return m.parents("span").size(); return m.parents("span").size();
} }
*/ */

View file

@ -1,4 +1,5 @@
<!--%import("./js/navigator.js")--> <!--%import("./js/navigator.js")-->
<!--%import("./css/widget.css")-->
<script type="text/javascript"> <script type="text/javascript">
if(typeof(widget_navigator) != 'Object') var widget_navigator={}; if(typeof(widget_navigator) != 'Object') var widget_navigator={};
@ -7,10 +8,8 @@ widget_navigator[{$widget_info->menu_srl}] = new WidgetNavigator({$widget_info->
widget_navigator[{$widget_info->menu_srl}].load('{$widget_info->xml_file}'); widget_navigator[{$widget_info->menu_srl}].load('{$widget_info->xml_file}');
</script> </script>
<!--%import("./css/widget.css")-->
<div class="widgetContainer<!--@if($colorset=="black")--> black<!--@end-->"> <div class="widgetContainer<!--@if($colorset=="black")--> black<!--@end-->">
<div class="widgetMenuC widgetMenuC{$colorset}"> <div class="widgetNavC widgetNavC{$colorset}">
<ul class="widget_navigator_{$widget_info->menu_srl} navigator" menu_srl='{$widget_info->menu_srl}'> <ul class="widget_navigator_{$widget_info->menu_srl} navigator" menu_srl='{$widget_info->menu_srl}'>
<!--@foreach($widget_info->arranged_menu as $key => $val)--> <!--@foreach($widget_info->arranged_menu as $key => $val)-->
<!--@if($val->text && $val->depth == 0)--> <!--@if($val->text && $val->depth == 0)-->