Create and export CSS code for a custom box with an arrow extending out from the side. Great for tooltips, flyouts and the like.

출처 http://www.cssarrowplease.com/

css_arrow.jpg

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


첨부파일을 한꺼번에 zip 파일로 다운로드 하는 애드온입니다. 

출처 https://www.xpressengine.com/index.php?mid=download&package_id=22753934

1514379318.52940.png
버전 1.1
라이선스 GPL v2
설치경로 ./addons/zipdownload
 
 

 

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )




http://cinemagraphs.com

댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )


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}

댓글(1) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

  • dodo 2018.03.04 12:58

    #page-title h1{font-size:30px; color:#968765}


그림처럼 Xbacode00.jpgE 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>

bacode1.jpg

 

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

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

댓글(2) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

  • dodo 2018.02.27 10:13

    <!-- script src="/@RunData/tileparticle/tilepartcle.js" --><!-- /script  -->

  • dodo 2018.02.23 09:19

    격자 크기 비율

    sizes = [ 6, 13, 20 ],


목록
Board Pagination Prev 1 ... 13 14 15 16 17 18 19 20 21 22 ... 27 Next
/ 27
rhwlsghkcocndgus XE1.9.2 STAGE1.5.2
서버에 요청 중입니다. 잠시만 기다려 주십시오...