프로그램 연습
2026-08-21 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

    썸네일 고화질로 만들기

    썸네일 이미지의 크기가 커지더라도 화질이 깨지지 않도록 설정하는 방법 👉 elFinderVolumeDriver.class.php 파일 수정 $opts = array( 'bind' => array( // 이벤트 바인딩 설정... ), 'roots' => array( // 첫 번째 루트 볼륨 설정 array( 'driver' => 'Loca...
    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. 27
    Dec 2025
    12:35

    Ai Wife 만들기

    Read More
  7. 27
    Dec 2025
    12:21

    삽질하다 삽질하기

    코딩하다 심심하면 사용해봐.
    Read More
  8. 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
  9. 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
  10. 25
    Dec 2025
    23:49

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

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

    Google Antigravity

    GOOGLE Antigravity Google Antigravity 시작하기 GOOGLE Antygravit 사용법 Antigravity로 자바 개발환경 만들기 Antigravity 로 웹사이트 만들기
    Read More
  12. 18
    Dec 2025
    21:40

    CKEditor 4 Toolbar 접고/펴기

    CKEditor 4 의 Toolbar 를 접었다 폈다 할 수 있는 아이콘을 만들고, 기본 상태를 설정합니다. 바로 이렇게요. config.js 파일에 아래의 내용을 추가합니다. // 툴바 접고 펴기 config.toolbarCanCollapse = true; config.toolbarStartupExpanded = true;
    Read More
  13. 17
    Oct 2025
    17:46

    윈도우에 도커 설치

    [ 도커 설치 완벽 가이드 ] https://m.blog.naver.com/hanajava/223170829315?recommendTrackingCode=2 https://developer-guide.com/2024/11/07/window-docker-%EC%84%A4%EC%B9%98-%EA%B8%B0%EB%B3%B8-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%99%84%EB%B2%BD-%EA%B0...
    Read More
  14. 06
    Aug 2025
    10:54

    윈도우에서 WAS 웹서버 구축하기

    1. Apache 설치 : 웹서버 아파치만 설치해도 웹서버로 작동함. https://blog.naver.com/cjs0308cjs/223370079814 2. Tomcat 설치 : 자바 웹 컨테이너 톰캣을 설치하면 톰캣 웹루트가 따로 작동함 즉 아파치는 localhost 톰캣을 localhost:8080 과 같이 별도의 ...
    Read More
  15. 23
    Jul 2025
    19:25

    Task Master AI

    Read More
  16. 23
    Jul 2025
    01:04

    Gemini CLI 설치하기

    Read More
  17. 20
    Apr 2024
    11:09

    심볼릭 링크(Symbolic link)

    다른 위치의 경로를 원하는 위치에서 바로 연결하여 열수 있도록 설정하는 방법입니다. 윈도우의 폴더 바로가기 기능과 비슷하지만, 실제 폴더를 직접 이용하는 것과 같은 효과를 가진다는 면에서는 좀더 편리합니다. 예시) ①E:\DATA\Photos\2024 와 같이 여러...
    Read More
  18. 26
    Mar 2024
    12:43

    Rhymix(XE)의 sketchbook5 방명록형 스킨 사용시 권한없는 사용자에게 "비밀글입니다." 숨기기

    Sketchbook5 방명록형 사용시 비밀글은 읽기 권한이 없는 사용자에게 노출될 필요가 없으므로 "비밀글입니다." 화면까지 완전히 보이지 않게 하여 깔끔한 게시판을 유지할 수 있도록 만드는 방법입니다. 위의 이미지에서 빨강 부분을 완전히 사라지게 합니다. ...
    Read More
Board Pagination Prev 1 2 3 4 5 Next
/ 5