Simple File List는 기본적으로 웹사이트의 테마 모양을 따르도록 되어 있습니다. 스타일을 수정하지 않아도 WordPress 웹사이트에서 보기 좋게 보여야 합니다.

그러나 모양을 조정하려면 웹사이트 테마 내에서 CSS를 사용할 수 있습니다. 다음 HTML 요소를 타겟팅하면 기본 제공 스타일을 고유한 CSS로 재정의할 수 있습니다.

모든 뷰에서 공통적인 요소

파일 목록 래퍼 및 컨테이너

• .eeSFL: 모든 보기에서 파일 목록을 위한 기본 컨테이너입니다.
• .eeFiles: 파일 항목을 보관하는 컨테이너입니다.

파일 항목 구조

• .eeSFL_Item: 세부 정보, 작업 및 메타데이터가 포함된 개별 파일을 나타냅니다.
• .eeSFL_Thumbnail: 파일의 썸네일 이미지를 저장합니다.
• .eeSFL_FileName: 파일 이름을 표시하고 링크를 제공합니다.
• .eeSFL_FileDetails: 메타데이터(파일 크기, 업로드 날짜)를 포함합니다.
• .eeSFL_ListFileActions: 각 파일에 대한 작업 버튼(열기, 다운로드, 편집, 삭제)을 포함합니다.

---

테이블 뷰 특정 요소

테이블 뷰는 파일을 표시하기 위해 전통적인 HTML 테이블을 사용합니다. 이 뷰는 반응성이 뛰어나며 작은 화면에서는 간단한 인라인 뷰로 전환됩니다.

테이블 컨테이너 및 구조

• .eeSFL 테이블 뷰의 메인 래퍼 역할을 합니다.
• .eeFiles 표 구조를 형성합니다.
• 테이블 열
  • .eeSFL_Thumbnail 썸네일의 열을 나타냅니다.
  • .eeSFL_FileName 파일 이름에 대한 열입니다.
  • .eeSFL_FileSize 파일 크기에 대한 열입니다.
  • .eeSFL_FileDate 날짜에 대한 열입니다.
• 테이블 행
  • .eeSFL_Item 파일의 전체 행을 나타냅니다.
    각 열(축소판, 이름, 크기, 날짜)은 셀입니다. .eeSFL_Item.

---

타일 ​​뷰 특정 요소

타일 ​​보기는 그리드 레이아웃을 사용하여 파일을 왼쪽 위에서 오른쪽 아래까지 표시합니다.

• .eeFiles 타일 ​​요소를 보유합니다.
• .eeSFL_Tile 각 파일을 포함하는 단일 타일의 래퍼 역할을 합니다.
• .eeSFL_FileLink 클릭 가능한 파일 이름.
• .eeSFL_ListFileActions 타일 ​​안에는 열기, 다운로드, 링크 복사 등의 작업이 포함되어 있습니다.

---

Flex View 특정 요소

플렉스 뷰는 포함하는 요소의 너비에 균등하게 퍼지도록 설계되었습니다.

• .eeFiles 파일 항목의 반응형 정렬을 위해 flexbox 레이아웃을 사용합니다.
• .eeSFL_Item 플렉스 레이아웃을 갖춘 파일 컨테이너를 나타냅니다.
• .eeSFL_Thumbnail 파일의 축소판을 유연한 행에 표시합니다.
• .eeSFL_FileInfo 축소판 옆에 파일 세부 정보를 제공합니다.
• .eeSFL_FileDetails 파일 크기와 날짜를 표시합니다.
• .eeSFL_ListFileActions 다운로드, 복사, 삭제와 같은 작업에 대한 링크를 제공합니다.

---

업로드 양식 요소

양식 구조

• #eeSFL_UploadForm 업로드 양식 전체를 포함합니다.
• .eeSFL_UploadFilesTitle 업로드 양식의 제목입니다.

입력 필드

• #eeSFL_Name 파일 업로더의 이름을 입력하기 위한 입력입니다.
• #eeSFL_Email 업로더의 이메일을 입력하기 위한 입력입니다.
• #eeSFL_FileDesc 파일 설명을 위한 텍스트 입력.

파일 업로드 영역

• #eeSFL_FileInput 파일을 선택하기 위해.
• #eeSFL_FileDropZone 드래그 앤 드롭 방식으로 파일을 업로드할 수 있습니다.
• #eeSFL_FileUploadQueue 업로드 대기중인 파일을 표시합니다.

버튼 및 표시기

• #eeSFL_UploadGo 업로드 과정을 시작하는 버튼입니다.
• #eeSFL_UploadProgress 파일 업로드 진행률을 보여줍니다.
• .sfl_instuctions 파일 업로드에 대한 지침이나 참고 사항을 제공합니다.