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

단순 파일 목록은 기본적으로 웹 사이트의 테마를 사용하기위한 것입니다. 스타일을 수정하지 않으면 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;
}

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

      • 내 단축 코드에서 allowuploads=”NO”를 사용하고 있지만 여전히 프론트엔드에 업로드 영역이 표시됩니다. 목록 표시를 사용하고 해당 페이지에 대해 업로드하지 않고 싶습니다.

        제이슨

        댓글
        • 파일 액세스 관리자 확장을 사용하고 있고 목록을 관리자로 보고 있는 것 같습니다. 이 확장을 사용하면 관리자는 설정에 관계없이 항상 사용 가능한 모든 기능을 볼 수 있습니다. 그들이 보는 것을 보려면 의도한 사용자로 로그인하십시오.

          또한 항상 플러그인 설정을 사용하여 무엇이 표시되는지 여부를 결정하십시오. 모양이 설정과 달라야 하는 보조 위치에 표시되는 목록에 대해서만 단축 코드 속성을 사용하십시오.

  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을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.