mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-19 03:09:55 +09:00
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
parent
5fc3ef700e
commit
d789f41342
10 changed files with 119 additions and 201 deletions
|
|
@ -22,65 +22,44 @@ h2{ position:relative; margin:0 0 10px 0; border-bottom:2px solid;}
|
|||
h3{ position:relative; margin:0;}*/
|
||||
|
||||
/* Container + Header + Body + Footer */
|
||||
#container{ position:relative; margin:0 20px;}
|
||||
#header{ position:relative; *zoom:1;}
|
||||
#container{ position:relative; margin:0;}
|
||||
#header{ position:relative; *zoom:1; overflow:hidden; }
|
||||
#header:after{ content:""; display:block; clear:both;}
|
||||
#body{ position:relative; *zoom:1;}
|
||||
#body:after{ content:""; display:block; clear:both;}
|
||||
#content{ position:relative; text-align:justify; padding:0 10px;}
|
||||
#footer{ position:relative; *zoom:1; padding:20px 0 10px 0;}
|
||||
#content{ position:relative; text-align:justify; padding:0;}
|
||||
#footer{ position:relative; *zoom:1; padding:10px 0 10px 0; }
|
||||
#footer address{ text-align:center;}
|
||||
|
||||
/* Layout Width */
|
||||
.fixed #container{ width:960px; margin-left:auto; margin-right:auto;}
|
||||
.liquid #container{ width:80%; margin-left:auto; margin-right:auto;}
|
||||
.hybrid #container{ width:80%; margin-left:auto; margin-right:auto;}
|
||||
.liquid #container{ width:90%; margin-left:auto; margin-right:auto;}
|
||||
.hybrid #container{ width:90%; margin-left:auto; margin-right:auto;}
|
||||
|
||||
/* Align Layout */
|
||||
.aLeft #container{ margin-left: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{ position:relative; clear:both; *zoom:1;}/* overflow:hidden;}*/
|
||||
#neck .extension{ /* margin-right:-30px;*/ *zoom:1;}
|
||||
#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{ position:relative; clear:both; *zoom:1;}/* overflow:hidden;}*/
|
||||
#knee .extension{ /* margin-right:-30px;*/ *zoom:1;}
|
||||
#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, .section{position:relative;}
|
||||
#body .extension{ position:relative; display:none; margin-bottom:20px;}
|
||||
.extension .section{ margin-bottom:20px;}
|
||||
.extension .section ul{ margin-left:20px; padding:0;}
|
||||
#body .extension{ position:relative; display:none; }
|
||||
|
||||
/* ----- Fixed 2 Column Layout ----- */
|
||||
.fixed .ce #body .e1,
|
||||
.fixed .ec #body .e1{ width:220px;}
|
||||
.fixed .ce #body #content,
|
||||
.fixed .ec #body #content{ width:700px;}
|
||||
.fixed .ec #body .e1{ width:200px; padding:10px;}
|
||||
|
||||
.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 .ec #body #content{ float:right;}
|
||||
.fixed .ce #body .e1,
|
||||
|
|
@ -88,48 +67,24 @@ h3{ position:relative; margin:0;}*/
|
|||
.fixed .ce #body .e1{ float:right; clear:right;}
|
||||
.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 .cee #body .e1,
|
||||
.fixed .cee #body .e2,
|
||||
.fixed .ece #body .e1,
|
||||
.fixed .ece #body .e2,
|
||||
.fixed .eec #body .e1,
|
||||
.fixed .eec #body .e2{ display:block; width:200px;}
|
||||
.fixed .cee #body .e1 { display:block; width:200px; padding:10px;}
|
||||
.fixed .cee #body .e2 { display:block; width:200px; padding:10px;}
|
||||
.fixed .ece #body .e1 { display:block; width:200px; padding:10px;}
|
||||
.fixed .ece #body .e2 { display:block; width:200px; padding:10px;}
|
||||
.fixed .eec #body .e1 { display:block; width:200px; padding:10px;}
|
||||
.fixed .eec #body .e2 { display:block; width:200px; padding:10px;}
|
||||
|
||||
.fixed .cee #body #content,
|
||||
.fixed .ece #body #content,
|
||||
.fixed .eec #body #content{ width:500px;}
|
||||
.fixed .cee #body #content { width:510px; padding:10px 0 10px 10px; }
|
||||
.fixed .ece #body #content { width:520px; padding:10px 0 10px 0; }
|
||||
.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 .eec #body #content{ float:right;}
|
||||
|
||||
.fixed .ece #body .e1,
|
||||
.fixed .eec #body .e1{ float:left; margin-right:20px;}
|
||||
.fixed .eec #body .e1{ float:left; }
|
||||
|
||||
.fixed .cee #body .e1,
|
||||
.fixed .eec #body .e2{ float:left;}
|
||||
|
|
@ -137,24 +92,36 @@ h3{ position:relative; margin:0;}*/
|
|||
.fixed .cee #body .e2,
|
||||
.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 .cee #body .e1,
|
||||
.liquid .cee #body .e2,
|
||||
.liquid .ece #body .e1,
|
||||
.liquid .ece #body .e2,
|
||||
.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 .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 .ece #body #content{ float:left; margin-right:-100%; left:22%;}
|
||||
.liquid .cee #body #content{ float:left; }
|
||||
.liquid .ece #body #content{ float:left; margin-right:-100%; left:21%;}
|
||||
.liquid .eec #body #content{ float:right;}
|
||||
|
||||
.liquid .ece #body .e1,
|
||||
.liquid .eec #body .e1{ float:left; margin-right:2%;}
|
||||
.liquid .eec #body .e1{ float:left; }
|
||||
|
||||
.liquid .cee #body .e1,
|
||||
.liquid .eec #body .e2{ float:left;}
|
||||
|
|
@ -162,31 +129,45 @@ h3{ position:relative; margin:0;}*/
|
|||
.liquid .cee #body .e2,
|
||||
.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 .cee #body .e1,
|
||||
.hybrid .cee #body .e2,
|
||||
.hybrid .ece #body .e1,
|
||||
.hybrid .ece #body .e2,
|
||||
.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 .ece #body{ padding-left:240px; padding-right:240px;}
|
||||
.hybrid .eec #body{ padding-left:480px;}
|
||||
.hybrid .cee #body{ padding-right:440px; padding-left:10px; }
|
||||
.hybrid .ece #body{ padding-left:220px; padding-right:220px;}
|
||||
.hybrid .eec #body{ padding-left:440px; padding-right:10px;}
|
||||
|
||||
.hybrid .cee #body #content,
|
||||
.hybrid .ece #body #content,
|
||||
.hybrid .eec #body #content{ width:100%;}
|
||||
.hybrid .cee #body #content{width:100%;padding:10px 0 10px 0; }
|
||||
.hybrid .ece #body #content{width:100%;padding:10px 0 10px 0; }
|
||||
.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 .eec #body #content{ float:right;}
|
||||
|
||||
.hybrid .ece #body .e1,
|
||||
.hybrid .eec #body .e2{ float:left; left:-240px; margin-right:-220px;}
|
||||
.hybrid .eec #body .e1{ float:left; left:-480px; margin-right:-220px;}
|
||||
.hybrid .eec #body .e2{ float:left; left:-220px; margin-right:-220px;}
|
||||
.hybrid .eec #body .e1{ float:left; left:-440px; margin-right:-220px;}
|
||||
|
||||
.hybrid .cee #body .e1,
|
||||
.hybrid .ece #body .e2{ float:right; left:240px; margin-left:-220px;}
|
||||
.hybrid .cee #body .e2{ float:right; left:480px; margin-left:-220px;}
|
||||
.hybrid .ece #body .e2{ float:right; left:220px; margin-left:-220px;}
|
||||
.hybrid .cee #body .e2{ float:right; left:440px; margin-left:-220px;}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<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>
|
||||
<hr />
|
||||
<div class="navigation"></div>
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
|
|
@ -44,7 +43,6 @@
|
|||
</div>
|
||||
<hr />
|
||||
<div id="footer">
|
||||
<div class="navigation"></div>
|
||||
<hr />
|
||||
<address>
|
||||
<!--@if($layout_info->copyright_text)-->
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ background:#ddd; }
|
|||
.demoHybrid .demoECE #demoBody .demoE2 { float:right; left:20px; 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 p,
|
||||
.aboutFaceOff li { color:#666; }
|
||||
|
|
|
|||
|
|
@ -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 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; }
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -559,6 +559,8 @@ var PropertyDialog = {
|
|||
isWidget = sel.is('.widgetOutput');
|
||||
isBody = sel.is('html>body');
|
||||
isContainer = sel.is('#container');
|
||||
isHeader = sel.is('#header');
|
||||
|
||||
|
||||
$('fieldset',dlg).show();
|
||||
|
||||
|
|
@ -571,6 +573,11 @@ var PropertyDialog = {
|
|||
$('fieldset[name=font]',dlg).show();
|
||||
}
|
||||
|
||||
if(isHeader){
|
||||
$('fieldset[name=margin]',dlg).show();
|
||||
$('fieldset[name=padding]',dlg).show();
|
||||
}
|
||||
|
||||
// remove visible more
|
||||
this.element.find('.visible-more').removeClass('visible-more');
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue