Simple File List는 기본적으로 웹사이트의 테마 모양을 따르도록 되어 있습니다. 스타일을 수정하지 않아도 WordPress 웹사이트에서 보기 좋게 보여야 합니다.
그러나 모양을 조정하려면 웹사이트 테마 내에서 CSS를 사용할 수 있습니다. 다음 HTML 요소를 타겟팅하면 기본 제공 스타일을 고유한 CSS로 재정의할 수 있습니다.
이러한을 확인 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
파일 업로드에 대한 지침이나 참고 사항을 제공합니다.