목록 및 업 로더 모양의 스타일을 지정하는 방법

단순 파일 목록은 기본적으로 웹 사이트의 테마를 사용하기위한 것입니다. 스타일을 수정하지 않으면 WordPress 웹 사이트에서 볼 수 있습니다.

그러나 모양을 조정하려면 간단한 CSS를 사용할 수 있습니다.

팁 – CSS 변경을 테스트 할 때 모든 캐시가 꺼져 있거나 개발 모드에 있는지 확인하십시오. 그렇지 않으면 즉시 보이지 않을 수 있습니다.

메인 컨테이너

파일 목록과 업 로더는 모두 . 자신 만의 테마에 CSS를 사용하여 자신 만의 스타일을 적용하세요

#eeSFL {
     background-color: black;
     color: white;  /* Text Color */
}

파일리스트

파일 목록은 HTML 테이블로 구성됩니다. 이 스타일을 사용하여 기본 모양을 재정의 할 수 있습니다.

/* Values Shown are the defaults */

/* The list container */
#eeSFL table.eeFiles {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #999;
	text-align: center;
}

/* Change the color of a row's background on hover */ 
#eeSFL .eeFiles tr:hover {
	background: #FFF;
}

/* The appearance of the table's header row */ 
#eeSFL .eeFiles th {
	text-align: center;
	background: #555;
	color: #EEE; 
	cursor: pointer;
}

/* The appearance of the table cells */ 
#eeSFL .eeFiles td {
	padding: .25em 0;
	border-bottom: 1px solid #999;
	text-overflow: clip;
	overflow: hidden;
        vertical-align: middle;
        text-align: center;
}

/* The appearance of the file name */ 
#eeSFL td.eeSFL_FileName {
	text-align: left;
	padding-left: 3px;
}

/* The appearance of the file link  */ 
#eeSFL .eeFiles td a {
	text-decoration: none;
}

/* The appearance of the file list actions area */ 
.eeSFL_ListFileActions {
         
}

/* The appearance of the file list actions link */
.eeSFL_ListFileActions a {
         
}

업 로더

업 로더는 다음 스타일을 사용합니다.


/* Values Shown are the defaults */

/* The upload form container */
#eeUploadForm {

}

/* The appearance of the browser's file input */
#eeSFL input[type=file] {
	float: left;
	margin-right: 2em;
	font-size: 120%;
}

/* The visability of the spinner */
#eeSFL #eeUploadingNow {
	display: none;   /* Hide until an upload begins */
}

/* The appearance of the spinner */
.eeSFL_UploadingImg,
.entry-content .eeSFL_UploadingImg {
	margin-right: 1em;
	box-shadow: none !important;
	border-radius: 32px;
}

/* The appearance of the upload information text */
#eeSFL p.sfl_instuctions {
	float: right;
	text-align: right;
	width: 50%;
}

업 로더 정보 양식

이러한 스타일은 선택적 업 로더 정보 양식을 제어합니다.

/* Values Shown are the defaults */

/* The upload form container */
#eeUploadInfoForm {

}

/* The appearance of form labels */
#eeSFL label {
	float: left;
}

/* The appearance of the form inputs */
#eeSFL input[type=text],
#eeSFL input[type=tel],
#eeSFL input[type=email],
#eeSFL input[type=file],
#eeSFL textarea {
	float: left;
	clear: left;
	width: 100%;
	margin-bottom: 20px;
}

/* The appearance of the form's submit button */
#eeSFL input[type=submit] {
	float: right;
	clear: both;
	margin-top: 30px;
}

"목록 및 업 로더 모양 스타일 지정 방법"에 대한 9 개의 생각

  1. 설명 텍스트의 스타일을 어떻게 지정할 수 있습니까?

    문서에 따라 파일 이름과 작업 링크의 스타일을 지정할 수 있습니다.

    또한 페이지 매김 버튼의 스타일을 어떻게 지정합니까?

    댓글
    • 설명 텍스트의 스타일을 지정하려면 eeSFL_FileDesc 클래스를 사용하십시오.

      팁 : 웹 브라우저의 "요소 검사"기능을 사용하여 특정 요소에 영향을주는 클래스 또는 ID를 쉽게 찾을 수 있습니다.

      댓글
  2. Hi

    미리보기 이미지가 너무 커서 이것을 추가해야했습니다.

    #eeSFL td.eeSFL_Thumbnail, #eeSFL td.eeSFL_Thumbnail img {
    폭 : 20px;
    높이 : 20px;
    }

    내 테마 CSS에

    관리자에서 미리보기 이미지 크기 설정을 추가 할 수 있습니까?

    댓글
  3. 다음 웹 사이트를 사용하여 테이블을 반응 형으로 만드는 지침을 얻었습니다. https://css-tricks.com/responsive-data-tables/

    내 CSS에 추가 한 규칙은 다음과 같습니다.

    @ 미디어 전용 화면 및 (최대 너비 : 1024 픽셀) {
    .eeFiles 테이블, .eeFiles thead, .eeFiles tbody, .eeFiles th, .eeFiles td, .eeFiles tr {
    디스플레이 : 블록;
    }
    }

    댓글

코멘트를 남겨

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.