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

 

  • #stage-content, #stage-contfull {background: #333}

 

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

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

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

0개 첨부 됨 ( / )


XE 레이아웃 적용시 플러그인 및 웹폰트 적용 설정

 

Calendar (Inverted)  레이아웃 헤더부분에 삽입 

<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>
// 폰트어썸 본문 보기 표시 
<script src="/xe/common/js/plugins/ckeditor/ckeditor/plugins/ckeditor_wiris/integration/WIRISplugins.js?viewer=image"></script>
// 위리스 수식편집 본문 보기 표시  

 

Calendar (Inverted)  레이아웃 CSS 부분에 삽입 

@import url(//도메인/xe/common/css/bootstrap.min.css);
@import url(//도메인/xe/common/css/fontawesome/838cb3dd77.css); // 폰트어썸 글꼴 웹폰트 
@import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);  // 나눔브러시 펜
@import url(//fonts.googleapis.com/earlyaccess/nanumbrushscript.css);  // 나눔브러시 스크립트 
@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);  // 제주한라산 
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css)  // 노토산스 
@import url(//fonts.googleapis.com/css?family=Dancing+Script|Indie+Flower|Macondo);  // 영문폰트 몇가지 

 


  폰트어썸 Brithday Cake  Check Square (Inverted)  Heartbeat  

  수식편집기 E=MC2

  폰트한글 나눔브러시 펜  나눔브러시 붓  제주한라산  노토산스   

  폰트영문 Dancing Script  Indie Flower  Macondo 

 

 

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

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

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

0개 첨부 됨 ( / )


구글 웹폰트를 XE(라이믹스) + CKEditor 에 적용하는 방법입니다. 
 

  1. XE 관리페이지 > 디자인 > 레이아웃 > HTML/CSS >> CSS - layout.css 부분에
    구글 웹폰트를 import 합니다. 
     @import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
     @import url(//fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
     @import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
     @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

     

  2. xe/modules/editor/styles/default/editor.css 파일 맨 위에도 1. 과 동일하게 넣어 주세요. 
    ※ 이 부분은 편집시 편집기의 도우모음에 표시되는 글꼴과 편집창의 글꼴모양을 표현해 줍니다. 
     

  3. xe/common/js/plugins/ckeditor/ckeditor/config.js 파일의 폰트 설정 부분에 해당하는 글꼴을 넣어 줍니다. 
     

         config.font_names = '나눔손글씨 붓/Nanum Brush Script;나눔손글씨 펜/Nanum Pen Script;제주한라산/Jeju Hallasan;노토산스 한글/Noto Sans KR;' + CKEDITOR.config.font_names;

     

  4. xe/common/js/plugins/ckeditor/ckeditor/skins/moono-dark/editor.css 파일과 관련된 파일 상단에 아래 내용 추가

    @import url('//fonts.googleapis.com/css?family=Nanum+Brush+Script|Nanum+Pen+Script|Yeon+Sung|Nanum+Myeongjo|Dancing+Script|Indie+Flower|Macondo|Akronim|Allura|Paytone+One|Work+Sans:900');

     

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

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

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

0개 첨부 됨 ( / )

  • dodo 2018.06.29 23:54

    3. (20180629)

    @import url(//도메인/...xe/common/css/bootstrap.min.css);
    @import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
    @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
    @import url('//fonts.googleapis.com/css?family=Nanum+Brush+Script|Nanum+Pen+Script|Yeon+Sung|Poor+Story|Nanum+Myeongjo|Dancing+Script|Indie+Flower|Macondo|Akronim|Allura|Paytone+One|Work+Sans:900');


적용대상 Font Awesome Chevron Right  https://ckeditor.com/cke4/addon/fontawesome  | demo

Hand Right  라이믹스 적용된 홈페이지의 CKEditor 편집기에 사용하기 좋은 font Awesome 플러그인을 적용하고자 함. 

 

Lean Pub  적용방법 

  1. http://fontawesome.io/ 에서 4.7.0 버전의 Font Awesome 을 다운로드하여 서버에 설치함.
    예시) /웹루트/font-awesome-4.7.0/
  2. https://ckeditor.com/cke4/addon/fontawesome 에서 fontawesome_2.0.zip 파일을 다운로드하여 
    "ckeditor/plugins/fontawesome" 와 같이 업로드 
  3. 라이믹스 환경설정
    XE 관리페이지 > 사이트 디자인 설정 > 레이아웃 >> HTML/CSS 부분의 HTML 부분에 아래 내용 삽입
            Paw  일반적 html 페이지인 경우 head 부분에 넣어 줌 
            <script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>
  4. CKEditor 환경설정 Chevron Right  XE/common/js/plugins/ckeditor/ckeditor/config.js

config.extraPlugins ='fontawesome';

config.contentsCss = '웹루트/font-awesome-4.7.0/css/font-awesome.css';

config.allowedContent = true;

config.toolbar = [
    { name: 'insert', items: [ 'FontAwesome' ] }
];  

Archive  첨부파일 설명
   font-awesome-4.7.0.zip 은 웹루트에 설치하여 모든 웹 프로그램에서 활용가능하도록 설치 
   fontawesome_2.0.zip 은 CKEditor 플러그인으로 CKEditor 의 플러그인 폴더에 설치함. 

 

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

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

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

0개 첨부 됨 ( / )


bootstrap.min.css 

1.
2. .table{background-color:#fff} Chevron Right  .table{background-color:#111}
3. 

 

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

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

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

0개 첨부 됨 ( / )


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