CAMERON STAGE Layout For XE 

XE 용 레이아웃 스킨 STAGE Layout 은 브라우저의 가로 폭① 이 특정 너비에 도달하면 주 메뉴 ② 가 펼쳐집니다.

이 때 특정 너비(메뉴가 펼쳐지는 한계값)을 바꾸는 방법입니다. 

1. xe/layouts/stage/css/stage.css 파일의 203 라인의 max-width 값을 변경합니다. 

@media screen and (max-width: 1680px){
#stage-content{padding-right:220px; padding-left:60px}
}

@media screen and (max-width: 1560px){
.stage-pc #stage-visual .sbtn{right:20px}
.stage-mobile #stage-visual .sbtn{right:0}
#lighting, #stage-cont #lighting{margin-right:-460px}
#lighting2{right:0; margin-right:-640px}
#lighting-m{display:block}
#stage.stage-pc{padding-right:20px}
#stage.stage-mobile{padding-right:0}
#stage-content{padding-right:100px; padding-left:100px}
#stage-contfull{padding-right:0}
}

@media screen and (max-width: 1140px){
#stage-content{padding-right:80px; padding-left:80px}
}

2. xe/layouts/stage/_settings.html 파일에서 65 라인 max-width 값을 변경 

<style type="text/css" id="settings">
<!--@if($layout_info->nav_width)-->
#lighting{width:{$layout_info->nav_width}px}
#lighting2{right:{$layout_info->nav_width}px}
#stage-visual .sbtn{right:{$layout_info->nav_width}px}
#stage{padding-right:{$layout_info->nav_width}px}
@media screen and (max-width: 1560px){
#stage-visual .sbtn{right:20px}
#lighting, #stage-cont #lighting{margin-right:-{$layout_info->nav_width-20}px}
#lighting2{right:0; margin-right:-{$layout_info->nav_width+160}px}
#stage{padding-right:20px}
}
<!--@endif-->

xe/layouts/stage/css/stage.css

  2차 가로 메뉴 배경색
#lighting-nav .active{background:#f9f9f9 !important; height:200px !important; border-top:8px solid; border-left:0 !important}

 

  2차 메뉴 아이콘 색 
#lighting2-nav li .fa{font-size:42px; color:#ccc; *display:inline-block}

 

  2차 세로 메뉴 배경색 
#lighting2{position:fixed; right:480px; top:0; width:160px; height:100%; background-color:#ccc; border-left:1px solid #e3e3e3}

 

xe/layouts/stage/css/stage.css

#lighting2-nav li .fa{font-size:42px; color:#ccc; *display:inline-block}

xe/layouts/stage/css/stage.css

#lighting-nav .active{background:#f9f9f9 !important; height:200px !important; border-top:8px solid; border-left:0 !important}

메뉴 아이콘을 지정할 수 있습니다. 

XE 관리메뉴 > 사이트 메뉴 편집 > 메뉴 이름 을 " | " 로 구분하여 뒤에 adjust 와 같이 아이콘 이름을 넣어주면 됩니다. 

아이콘은  https://fontawesome.com/icons?d=gallery 에서 사용하려는 아이콘을 클릭하면 이름이 나옵니다. 
이름의 앞부분 fa- 부분은 제외하고 넣어 주면 됩니다. 

xe/common/css/bootstrap.css

아래 내용 주석 처리 

/*  STAGE 레이아웃 메뉴 아이콘 흐트러 지는 문제 조시를 위해 주석 처리 
[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}
*/

STAGE layout 페이지 제목 색상 

xe/layouts/stage/css/stage.css

/* Page Title */
#page-title{width:100%; padding-top:80px; padding-bottom:60px; text-align:center}
#page-title h1,
#page-title h2{margin:0; padding:0; font-family:'Nanum Gothic','Malgun Gothic',돋움,sans-serif; font-weight:700}
#page-title h1{font-size:30px; color:#777}
#page-title h2{display:inline-block; margin-top:30px; padding:8px 20px; font-size:15px}
/* Content */
#content{margin-bottom:100px}

그림처럼 XE STAGE 레이아웃에서 배경이미지를 자바스크립트 패턴으로 변경하려고 합니다. 

1) XE 관리페이지에서 [사이트 디자인 설정] - [레이아웃 ] - [ HTML/CSS ] 에서 HTML-layout.html 부분의 맨 하단에 아래와 같은 스크립트를 넣어 줍니다. 

<script>
var c = document.createElement( 'canvas' ),
    ctx = c.getContext( '2d' ),
    rows = cols = 36,
    gap = 1,
    grays = [
      [ 26, 29 ],
      [ 32, 37 ],
      [ 42, 50 ],
      [ 46, 56 ],
      [ 54, 66 ]
    ],
    sizes = [ 4, 9, 14 ],
    frequency = [ false, 30, 9 ],
    cw = ch = c.width = c.height = ( sizes[ 0 ] + gap ) * rows;

function random( max, min ) {
  var min = min || 0;
  return Math.random() * ( max - min ) + min;
}

function cell( x, y, size ) {
  var gray = Math.floor( random( grays.length ) ),
      fill = grays[ gray ][ 0 ],
      stroke = grays[ gray ][ 1 ];
  ctx.fillStyle = 'rgb(' + fill + ', ' + fill + ', ' + fill + ')';
  ctx.strokeStyle = 'rgb(' + stroke + ', ' + stroke + ', ' + stroke + ')';
  ctx.fillRect( x, y, size, size );    
  ctx.strokeRect( x + 0.5, y + 0.5, size - 1, size - 1 );
}

function generate() {
  var store = [];
  
  ctx.fillStyle = 'rgb(18, 18, 18)';
  ctx.fillRect( 0, 0, cw, ch );
  
  for( var x = 0; x < cols; x ++ ){
    for( var y = 0; y < rows; y ++ ){
      cell( 
        ( x * sizes[ 0 ] ) + ( x * gap ), 
        ( y * sizes[ 0 ] ) + ( y * gap ), 
        sizes[ 0 ] 
      );   
    }
  }
  
  for( var freq = 0; freq < frequency.length; freq++ ) {
    if( frequency[ freq ] ){
      for( var i = 0; i < frequency[ freq ]; ) {
        var canDraw = true,
            sizeNew = sizes[ freq ],
            pad = Math.ceil( ( sizeNew / cw ) * rows );
            xNew = Math.floor( random( 1, cols - pad ) ) * ( ch / cols ),
            yNew = Math.floor( random( 1, rows - pad ) ) * ( cw / rows ),            
            storeLength = store.length;
        if( storeLength ) {
          for( var j = 0; j < storeLength; j++ ) {
            var storeCell = store[ j ];
            if( !(
              xNew + sizeNew + ( cw / cols ) < storeCell.x ||
              yNew + sizeNew + ( ch / rows ) < storeCell.y ||
              xNew > storeCell.x + storeCell.size + ( cw / cols ) ||
              yNew > storeCell.y + storeCell.size + ( ch / rows )
            ) ) {
              canDraw = false;
              break;
            }
          }          
        }
        if( canDraw ) {
          cell( xNew, yNew, sizeNew );
          store.push( { x: xNew, y: yNew, size: sizeNew } );
          i++;
        }
      }
    }
  }
  
  document.body.style.background = 'url(' + c.toDataURL() + ')';
}

window.addEventListener( 'click', generate );
generate();
</script>

2) STAGE 레이아웃의 배경을 투명하게 바꿔줍니다. 
    
    [사이트 디자인 설정] - [레이아웃 STAGE] - [상세 설정] - [사용자 CSS ] - 사용자 CSS 수정 부분에  아래 코드 삽입 

#stage-content, #stage-contfull {background: transparent}

xe/layouts/stage/css/stage.css

#lighting2{position:fixed; right:480px; top:0; width:160px; height:100%; background-color:#ccc; border-left:1px solid #e3e3e3}

XE 관리페이지 > 레이아웃 설정 > 사용자CSS 에 아래 내용을 입력