프로그램 연습
2026-08-28 Fri

로그인

검색

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. 06
    Jul 2023
    00:55

    elfinder Cloud Thumbnail Setting - 엘파인더에서 실제파일과 다른위치에 썸네일 만들기

    elfinder Cloud Thumbnail Setting 엘파인터에서 클라우드와 같이 썸네일을 표시할 수 없는 다른위치에 있는 파일의 썸네일을 표현하는 방법 서버에서 실제파일의 위치는 /Documents 에 있고, 웹서비스 루트는 /publichtml 인경우 elfinder 의 기본 설정 conne...
    Read More
  7. 10
    Nov 2022
    22:22

    elfinder Thumbnail Size

    elFinder 웹 파일 관리자에서 썸네일 크기를 변경하기 1. 썸네일 기본 크기 48 원하는 크기로 설정 ./php/elFinderVolumeDriver.class.php 파일에서 tmbSize 부분을 찾아서 초기값 48 을 찾아 원하는 값으로 설정함. (모든 48 을 변경해야 함) ※ 너무 크면 페...
    Read More
  8. 02
    Oct 2022
    13:29

    툴바 및 팝업메뉴 설정하기

    Elfinder 툴바 설정 및 팝업메뉴 설정 방법 파일 - /js/elfinder.full.js 수정 - line 11982 > ui : ['toolbar', 'places', 'tree', 'path', 'stat'], 또는 ui:["toolbar","places","tree","path","stat"] 아래 - 툴바 > toolbar : [ 또는 toolbar:[ 부분 수정...
    Read More
  9. 30
    Aug 2021
    23:19

    본문 파일목록 영역 배경 색상

    본문 영역 목록 리스트 부분의 색상지정 원본 .elfinder-workzone { /** background: #3B4047; */ background: rgb(36,39,41); /* Old browsers */ background: -moz-linear-gradient(top, rgba(36,39,41,1) 0%, rgba(25,26,28,1) 100%); /* FF3.6-15 */ backg...
    Read More
  10. 30
    Aug 2021
    22:35

    테마 설정

    elFinder 테마설정 파일 elFinder..root/elfinder.php define('elFinderConfig', { // elFinder options (REQUIRED) // Documentation for client options: // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options defaultOpts : { cssA...
    Read More
Board Pagination Prev 1 Next
/ 1