Comment styliser la liste et l'apparence de l'uploader

La liste de fichiers simple est conçue pour prendre par défaut le thème de votre site Web. Sans aucune modification du style, il devrait avoir l'air présentable sur votre site Web WordPress.

Cependant, si vous souhaitez ajuster l'apparence, vous pouvez utiliser du CSS simple.

CONSEIL - Assurez-vous que tous vos caches sont désactivés ou en mode développement lors du test des modifications CSS. Sinon, ils risquent de ne pas être vus tout de suite.

Conteneur principal

La liste des fichiers et le téléchargeur sont inclus dans un . Utilisez CSS dans votre propre thème pour créer votre propre style

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

La liste des fichiers

La liste des fichiers est constituée d'un tableau HTML. Vous pouvez utiliser ces styles pour remplacer l'apparence par défaut.

/* 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 {
         
}

L'uploader

L'uploader utilise ces styles:


/* 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%;
}

Formulaire d'informations sur le téléverseur

Ces styles contrôlent le formulaire facultatif Informations sur le téléverseur:

/* 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 réflexions sur "Comment styliser la liste et l'apparence du téléchargeur"

    • Utilisez la classe eeSFL_FileDesc pour styliser le texte de description.

      CONSEIL: Utilisez la fonction «Inspecter l'élément» de votre navigateur Web pour trouver facilement les classes ou les ID affectant un élément spécifique.

      Répondre
  1. Hi

    J'ai trouvé que les miniatures étaient beaucoup trop grandes, j'ai donc dû ajouter ceci

    #eeSFL td.eeSFL_Thumbnail, #eeSFL td.eeSFL_Thumbnail img {
    largeur: 20px;
    hauteur: 20px;
    }

    à mon thème css

    Pourriez-vous ajouter un paramètre pour la taille des miniatures dans l'administrateur?

    Répondre

Laisser un commentaire

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..