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 ],


문자,  hex(16진),   octal(8진),   decimal(10진)

^@   \x00 \000   0  
^A   \x01 \001   1  
^B   \x02 \002   2  
^C   \x03 \003   3  
^D   \x04 \004   4  
^E   \x05 \005   5  
^F   \x06 \006   6  
^G   \x07 \007   7  
^H   \x08 \010   8  
^I   \x09 \011   9  
^J   \x0a \012  10  
^K   \x0b \013  11  
^L   \x0c \014  12  
^M   \x0d \015  13  
^N   \x0e \016  14  
^O   \x0f \017  15  
^P   \x10 \020  16  
^Q   \x11 \021  17  
^R   \x12 \022  18  
^S   \x13 \023  19  
^T   \x14 \024  20  
^U   \x15 \025  21  
^V   \x16 \026  22  
^W   \x17 \027  23  
^X   \x18 \030  24  
^Y   \x19 \031  25  
^Z   \x1a \032  26  
^[   \x1b \033  27  
^\   \x1c \034  28  
^]   \x1d \035  29  
^^   \x1e \036  30  
^_   \x1f \037  31  
     \x20 \040  32  
 !   \x21 \041  33  
 "   \x22 \042  34  
 #   \x23 \043  35  
 $   \x24 \044  36  
 %   \x25 \045  37  
 &   \x26 \046  38  
 '   \x27 \047  39  
 (   \x28 \050  40  
 )   \x29 \051  41  
 *   \x2a \052  42 
 +   \x2b \053  43  
 ,   \x2c \054  44  
 -   \x2d \055  45  
 .   \x2e \056  46  
 /   \x2f \057  47  
 0   \x30 \060  48  
 1   \x31 \061  49  
 2   \x32 \062  50  
 3   \x33 \063  51  
 4   \x34 \064  52  
 5   \x35 \065  53  
 6   \x36 \066  54  
 7   \x37 \067  55  
 8   \x38 \070  56  
 9   \x39 \071  57  
 :   \x3a \072  58  
 ;   \x3b \073  59  
 <   \x3c \074  60  
 =   \x3d \075  61  
 >   \x3e \076  62  
 ?   \x3f \077  63  
 @   \x40 \100  64  
 A   \x41 \101  65  
 B   \x42 \102  66  
 C   \x43 \103  67  
 D   \x44 \104  68  
 E   \x45 \105  69  
 F   \x46 \106  70  
 G   \x47 \107  71  
 H   \x48 \110  72  
 I   \x49 \111  73  
 J   \x4a \112  74  
 K   \x4b \113  75  
 L   \x4c \114  76  
 M   \x4d \115  77  
 N   \x4e \116  78  
 O   \x4f \117  79  
 P   \x50 \120  80  
 Q   \x51 \121  81  
 R   \x52 \122  82  
 S   \x53 \123  83  
 T   \x54 \124  84  
 U   \x55 \125  85 
 V   \x56 \126  86  
 W   \x57 \127  87  
 X   \x58 \130  88  
 Y   \x59 \131  89  
 Z   \x5a \132  90  
 [   \x5b \133  91  
 \   \x5c \134  92  
 ]   \x5d \135  93  
 ^   \x5e \136  94  
 _   \x5f \137  95  
 `   \x60 \140  96  
 a   \x61 \141  97  
 b   \x62 \142  98  
 c   \x63 \143  99  
 d   \x64 \144 100  
 e   \x65 \145 101  
 f   \x66 \146 102  
 g   \x67 \147 103  
 h   \x68 \150 104  
 i   \x69 \151 105  
 j   \x6a \152 106  
 k   \x6b \153 107  
 l   \x6c \154 108  
 m   \x6d \155 109  
 n   \x6e \156 110  
 o   \x6f \157 111  
 p   \x70 \160 112  
 q   \x71 \161 113  
 r   \x72 \162 114  
 s   \x73 \163 115  
 t   \x74 \164 116  
 u   \x75 \165 117  
 v   \x76 \166 118  
 w   \x77 \167 119  
 x   \x78 \170 120  
 y   \x79 \171 121  
 z   \x7a \172 122  
 {   \x7b \173 123  
 |   \x7c \174 124  
 }   \x7d \175 125  
 ~   \x7e \176 126  
    \x7f \177 127
댓글(0) 남기기...
사진 및 파일 첨부

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

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

0개 첨부 됨 ( / )


더 많은 이미지를 보려면  https://cgfrog.com/amazing-animated-gifs-for-your-inspiration/
http://cinemagraphs.com/lifestyle/

 

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

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

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

0개 첨부 됨 ( / )


CKEditor4 에서 Templates 플러그인에 템플릿을 추가하는 방법입니다.

ckeditor/plugins/templates/templates/default.js  파일을 열어서 편집합니다.

 

templete.jpg


CKEDITOR.addTemplates("default",{imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath("templates")+"templates/images/"),templates:[{title:"Image and Title",image:"template1.gif",description:"One main image with a title and text that surround the image.",html:'\x3ch3\x3e\x3cimg src\x3d" " alt\x3d"" style\x3d"margin-right: 10px" height\x3d"100" width\x3d"100" align\x3d"left" /\x3eType the title here\x3c/h3\x3e\x3cp\x3eType the text here\x3c/p\x3e'},{title:"Strange Template",image:"template2.gif",description:"A template that defines two columns, each one with a title, and some text.",
html:'\x3ctable cellspacing\x3d"0" cellpadding\x3d"0" style\x3d"width:100%" border\x3d"0"\x3e\x3ctr\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 1\x3c/h3\x3e\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd style\x3d"width:50%"\x3e\x3ch3\x3eTitle 2\x3c/h3\x3e\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3eText 1\x3c/td\x3e\x3ctd\x3e\x3c/td\x3e\x3ctd\x3eText 2\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eMore text goes here.\x3c/p\x3e'},{title:"Text and Table",image:"template3.gif",description:"A title with some text and a table.",
html:'\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'},{title:"Text and Table 2",image:"template3.gif",description:"A title with some text and a table.",
html:'\x3cdiv style\x3d"width: 80%"\x3e\x3ch3\x3eTitle goes here\x3c/h3\x3e\x3ctable style\x3d"width:150px;float: right" cellspacing\x3d"0" cellpadding\x3d"0" border\x3d"1"\x3e\x3ccaption style\x3d"border:solid 1px black"\x3e\x3cstrong\x3eTable title\x3c/strong\x3e\x3c/caption\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3ctr\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3ctd\x3e\x26nbsp;\x3c/td\x3e\x3c/tr\x3e\x3c/table\x3e\x3cp\x3eType the text here\x3c/p\x3e\x3c/div\x3e'}
]});

 

 

 

 

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

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

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

0개 첨부 됨 ( / )

  • dodo 2018.02.25 14:29

    {title:"왼쪽오렌지 바 라운드",image:"template3.gif",description:"왼족이 오렌색 바가 있는 필드셋 양식",html:'<fieldset style="BORDER-TOP: #ff9900 1px solid; BORDER-RIGHT: #ff9900 1px solid; BORDER-BOTTOM: #ff9900 1px solid; BORDER-LEFT: #ff9900 18px solid;border-radius:5px;">여기에 내용 입력</fieldset>'},{title:"웹소스 입력 양식",image:"template4.gif",description:"제목 출처 소스코드 입력 양식",html:'<p><span style="color: rgb(221, 221, 221);font-size: 26px;font-family: Paytone One, 맑은 고딕;">Title Input Title Here</span><br /><span style="font-family: Georgia,serif;font-size: 16px;">&nbsp;&nbsp;LINK <span class="fav2"><i aria-hidden="true" class="fa fa-angle-double-right " style="color: rgb(255, 153, 0); font-size: 18px;" title="Angle Double Right "></i><span style="left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; position: absolute;">Angle Double Right </span></span>&nbsp;<span style="color: rgb(52, 152, 219);">Input URL Here</span></span></p></br><blockquote><p>source code here</p><p>...</p><hr style="color:#777;" /><table border="1" bordercolor="#777" cellpadding="0" cellspacing="0" style="width: 98%;"><tr><td bgcolor="#353535" style="width: 240px;">&nbsp;</td><td bgcolor="#353535" style="width: 200px;">&nbsp;</td><td bgcolor="#353535">&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table></blockquote>'},{title:"탭모양 표 양식",image:"template5.gif",description:"탭 형태의 표 양식",html:'<table border="0" cellpadding="0" cellspacing="0" style="width:98%;"><tr><td style="width: 300px;"><div style="background: rgb(255, 153, 0); border-radius: 10px 20px 0px 0px; border: 1px solid rgb(255, 153, 0); padding: 5px 10px; text-align: center;"><strong><span style="color:#4e5f70;font-family:맑은 고딕;font-size:18px;">여기에 제목 입력</span></strong></div></td><td>&nbsp;</td></tr><tr><td colspan="2"><table border="0" cellpadding="0" cellspacing="0" style="height:100%;width:100%;border-style:solid;border-top-width: medium;border-bottom-width: medium;border-left-width: 20px;border-right-width: medium;border-color:#ff9900;border-radius:0px 5px 5px 5px;"><tr><td><p>&nbsp;여기에 본문을 입력</p><p>&nbsp;</p></td></tr></table></td></tr></table>'}

  • dodo 2018.02.22 11:39

    세번째 템플릿 수정 

    {title:"왼쪽오렌지 바 라운드",image:"template3.gif",description:"A title with some text and a table.",
    html:'<fieldset style="BORDER-TOP: #ff9900 1px solid; BORDER-RIGHT: #ff9900 1px solid; BORDER-BOTTOM: #ff9900 1px solid; BORDER-LEFT: #ff9900 18px solid;border-radius:5px;">여기에 내용 입력</fieldset>'}


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