프로그램 연습
2026-08-25 Tue

로그인

검색

elfinder

테마 스위치 적용하기

Extra Form

elFinder 파일 관리자에서 테마를 원하는 형태로 자유롭게 지정하기 위하여 테마 선2026-08-19_125050.png택기를 만들었음

css 파일에 테마 경로를 넣어 두고, 필요할 때 원하는 테마만 주석을 해제하거나, 

테마경로를 넣어 주면됨. 

 

 

 

[적용방법]

1. 경로 및 파일 생성

    elFinder 경로/css/theme.switch.css

                          /테마폴더

                          /테마폴더/css/theme.css           ​​​​​

 

2. theme.switch.css 내용

@charset "utf-8";

/* 
 * elFinder 테마 선택기 (theme.switch.css)
 * 
 * 아래에서 적용하고자 하는 테마의 주석(/* ...) 부분을 해제하세요.
 * 다른 테마들은 반드시 주석 처리되어 있어야 합니다.
 * 기본 테마 경로: url("theme.css")
 * 기타 테마 경로: url("테마이름/css/theme.css")
 */

/* 기본 테마 */
/* @import url("theme.css"); */

/* 
 * ==========================================
 * 사용자 등록 테마 
 * ==========================================
 */

/* bootstrap-theme 테마 */
/* @import url("bootstrap-theme/css/theme.css"); */

/* Material 테마 */
@import url("Material/css/theme.css");

 

3. elFinder 경로/elfinder.html 파일 내용 

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
 <title>elFinder 2.1.x source version with PHP connector</title>
 
 <!-- 기본 테마 경로 주석처리 link rel="stylesheet" href="css/theme.css" type="text/css" -->
 <!-- 👇 테마 경로를 테마 선택기로 수정, 운영체제 모드에 따라 색상모드 적용 -->
 <link rel="stylesheet" type="text/css" href="css/theme.switch.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
 <!-- Require JS (REQUIRED) -->
 <!-- Rename "main.default.js" to "main.js" and edit it if you need configure elFInder options or any things -->
 <script data-main="./main.default.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.7/require.min.js"></script>
 <script>
 define('elFinderConfig', {
 // elFinder options (REQUIRED)
 // Documentation for client options:
 // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
 defaultOpts : {
 url : 'php/connector.minimal.php', // or connector.maximal.php : connector URL (REQUIRED)

 // 👇 테마선택기를 테마 경로로 설정
 themes : { default : 'css/theme.switch.css' },
 theme : 'default', 
 // 👆 여기까지 추가

 commandsOptions : {
 edit : {
 extraOptions : {
 // set API key to enable Creative Cloud image editor
 // see https://console.adobe.io/
 creativeCloudApiKey : '',
 // browsing manager URL for CKEditor, TinyMCE
 // uses self location with the empty value
 managerUrl : ''
 }
 },
 quicklook : {
 // to enable CAD-Files and 3D-Models preview with sharecad.org
 sharecadMimes : ['image/vnd.dwg', 'image/vnd.dxf', 'model/vnd.dwf', 'application/vnd.hp-hpgl', 'application/plt', 'application/step', 'model/iges', 'application/vnd.ms-pki.stl', 'application/sat', 'image/cgm', 'application/x-msmetafile'],

          테마선택기에서 선택한 테마가 적용될 수 있도록 elfinder.html 파일에 11라인, 24~25라인 추가 

Atachment
첨부 '1'
목록
위로 아래로 게시글 수정 내역 댓글로 가기 첨부
Category
  1. 19
    Aug 2026
    17:14

    elFinder 창 화면에 가득 채우기

    elFinder 창을 브라우저 창에 여백 없이 가득 채우는 방법입니다. 👉 elfinder.html 파일의 하단부 수정 }, height : '100%', // 세로 브라우저에 맞춤 resizable : false // 크기변경 안함 }, managers : { // 'DOM Element ID': { /* elFinder options of th...
    Read More
  2. 19
    Aug 2026
    16:26

    썸네일 고화질로 만들기

    썸네일 이미지의 크기가 커지더라도 화질이 깨지지 않도록 설정하는 방법 👉 connector.minimal.php 파일 수정 $opts = array( 'bind' => array( // 이벤트 바인딩 설정... ), 'roots' => array( // 첫 번째 루트 볼륨 설정 array( 'driver' => 'LocalFileSyst...
    Read More
  3. 19
    Aug 2026
    15:20

    elFinder 서비스 만들기

    오픈소스 웹 파일관리자 elFinder 를 웹서버에 적용하는 방법입니다. 1. elFinder 소스를 다운로드합니다. github에 올라와 있는 자료는 소스가 그대로 노출된 오픈소프 파일입니다. elFinder의 구조를 이해하는데 도움이 되겠네요. 이 소스를 Fork하여 나만의...
    Read More
  4. 19
    Aug 2026
    13:16

    테마 스위치 적용하기

    elFinder 파일 관리자에서 테마를 원하는 형태로 자유롭게 지정하기 위하여 테마 선택기를 만들었음 css 파일에 테마 경로를 넣어 두고, 필요할 때 원하는 테마만 주석을 해제하거나, 테마경로를 넣어 주면됨. [적용방법] 1. 경로 및 파일 생성 elFinder 경로/...
    Read More
  5. 02
    Aug 2026
    13:41

    동영상 이미지 썸네일로 표현하기

    시놀로지 나스에서 웹스테이션을 통하여 elfinder 2.1.69 를 운영하고 있는데 동영상 파일이 아이콘으로만 표시되고 썸네일로 보여지지 않는 것을 알게 되었다. 그래서 elfinder 데모페이지에서 확인해 보니 썸네일이 잘 표현되고 있는 것이었다. 방법이 있을 ...
    Read More
  6. 26
    Dec 2025
    11:24

    stickers v3.0

    😀 stickers Ckeditor 4 Plugins stickers Add-on installation instructions If you want to add the plugin manually, you will need to: 1. Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example: http://e...
    Read More
  7. 26
    Dec 2025
    00:08

    glasspannel - 글래스모피즘 패널 생성기

    glasspannel 글래스모피즘이 적용된 반투명한 패널을 만들어 줍니다. 설치경로 : /plugins/glasspannel/ config.js 추가 config.extraPlugins = 'glasspannel'; addButton : 'GlassPannel' Download : glasspannel_v1.0.zip - unsplash API 적용, 배경이미지 ...
    Read More
  8. 25
    Dec 2025
    23:49

    rainbowcode - Code Snippet과 Syntex Highlight 을 적용한 소스코드 입력을 위한 플러그인

    rainbowcode CKEditor 플러그인 소스코드를 본문에 입력할 수 있는 Code Snippet 플러그인으로 Syntex Highlight를 적용하여 문법에 따른 색상값을 적용하여 소스코드 구분이 쉽다. 의존 플러그인 : 아래 플러그인이 같이 설치되어 있어야 함. - lineutils - w...
    Read More
  9. 18
    Dec 2025
    21:40

    CKEditor 4 Toolbar 접고/펴기

    CKEditor 4 의 Toolbar 를 접었다 폈다 할 수 있는 아이콘을 만들고, 기본 상태를 설정합니다. 바로 이렇게요. config.js 파일에 아래의 내용을 추가합니다. // 툴바 접고 펴기 config.toolbarCanCollapse = true; config.toolbarStartupExpanded = true;
    Read More
Board Pagination Prev 1 2 3 4 5 Next
/ 5