リストとアップローダーの外観のスタイルを設定する方法

シンプルファイルリストは、デフォルトでWebサイトのテーマを引き継ぐことを目的としています。 スタイルを変更せずに、WordPressWebサイトで見栄えがするように見えるはずです。

ただし、外観を調整する場合は、簡単な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つの考え

    • はい、このようなXNUMXつのショートコードを使用する必要があります…

      [eeSFL showlist = "YES" allowuploads = "NO"]

      [eeSFL showlist = "NO" allowuploads = "YES"]

      返信
      • ショートコードでallowuploads =” NO”を使用していますが、フロントエンドにアップロード領域が表示されます。 そのページにアップロードするのではなく、リスト表示を使用したいだけです。

        ジェイソン

        返信
        • File Access Manager拡張機能を使用していて、リストを管理者として表示しているようです。 この拡張機能を使用すると、管理者は設定に関係なく、使用可能なすべての機能を常に表示できます。 対象ユーザーとしてログインして、表示内容を確認します。

          また、プラグインの設定を常に使用して、何が表示されるかを判断します。 外観を設定と異なる必要があるセカンダリロケーションに表示されるリストには、ショートコード属性のみを使用してください。

  1. 説明テキストのスタイルを設定するにはどうすればよいですか?

    ドキュメントに基づいて、ファイル名とアクションリンクのスタイルを設定できます。

    また、ページネーションボタンをどのようにスタイリングしますか?

    返信
    • クラスeeSFL_FileDescを使用して、説明テキストのスタイルを設定します。

      ヒント:Webブラウザの「要素の検査」機能を使用して、特定の要素に影響を与えるクラスまたはIDを簡単に見つけることができます。

      返信
  2. Hi

    サムネイルが大きすぎるので、これを追加する必要がありました

    #eeSFL td.eeSFL_Thumbnail、#eeSFL td.eeSFL_Thumbnail img {
    幅:20px。
    高さ:20px。
    }

    私のテーマCSSに

    管理者にサムネイルサイズの設定を追加してもらえますか?

    返信
  3. 次のWebサイトを使用して、テーブルを応答可能にするための手順を取得しました。 https://css-tricks.com/responsive-data-tables/

    これが私のcssに追加したルールです:

    @media only screenおよび(max-width:1024px){
    .eeFilesテーブル、.eeFiles thead、.eeFiles tbody、.eeFiles th、.eeFiles td、.eeFiles tr {
    表示:ブロック;
    }
    }

    返信
    • はい、このプラグインはモバイルデバイスで動作しますが、組み込みのスタイルはありません。 シンプルファイルリストは、テーマのルールを使用します。

      返信

コメント

このサイトでは、スパムを減らすためにAkismetを使用しています。 コメント処理方法.