La liste de fichiers simple est conçue pour adopter l'apparence du thème de votre site Web par défaut. Sans aucune modification du style, elle devrait être présentable sur votre site Web WordPress.
Cependant, si vous souhaitez ajuster l'apparence, vous pouvez utiliser CSS dans le thème de votre site Web. En ciblant les éléments HTML suivants, vous pouvez remplacer les styles intégrés par votre propre CSS.
Éléments communs à toutes les vues
Wrapper et conteneur de liste de fichiers
.eeSFL:Le conteneur principal pour les listes de fichiers dans toutes les vues..eeFiles:Un conteneur contenant les éléments du fichier.
Structure des éléments du fichier
.eeSFL_Item:Représente un fichier individuel avec des détails, des actions et des métadonnées..eeSFL_Thumbnail: Contient l'image miniature du fichier..eeSFL_FileName: Affiche le nom du fichier et fournit un lien..eeSFL_FileDetails:Contient des métadonnées (taille du fichier, date de téléchargement)..eeSFL_ListFileActions:Contient les boutons d'action pour chaque fichier (ouvrir, télécharger, modifier, supprimer).
Éléments spécifiques à la vue de tableau
La vue tableau utilise un tableau HTML traditionnel pour afficher les fichiers. Cette vue est réactive et passera à une vue simple en ligne sur les petits écrans.
Conteneur et structure de table
.eeSFLagit comme le wrapper principal pour la vue de table..eeFilesforme la structure de la table.- Colonnes du tableau
.eeSFL_Thumbnailreprésente une colonne pour la vignette..eeSFL_FileNamecolonne pour le nom du fichier..eeSFL_FileSizecolonne pour la taille du fichier..eeSFL_FileDatecolonne pour la date.
- Ligne de tableau
.eeSFL_Itemreprésente la ligne entière d'un fichier.
Chaque colonne (vignette, nom, taille, date) est une cellule dans.eeSFL_Item.
Éléments spécifiques à la vue des tuiles
La vue en mosaïque utilise une disposition en grille pour afficher les fichiers, du haut à gauche vers le bas à droite.
.eeFilescontient les éléments de tuile..eeSFL_Tileagit comme un wrapper de tuile unique, contenant chaque fichier..eeSFL_FileLinkpour les noms de fichiers cliquables..eeSFL_ListFileActionsau sein de la tuile, des actions telles que Ouvrir, Télécharger, Copier le lien sont incluses.
Éléments spécifiques à Flex View
La vue flexible est conçue pour s'étendre uniformément sur toute la largeur de l'élément contenant.
.eeFilesutilise une mise en page flexbox pour un alignement réactif des éléments de fichier..eeSFL_Itemreprésente le conteneur de fichiers avec une disposition flexible..eeSFL_Thumbnailaffiche la miniature du fichier dans une ligne flexible..eeSFL_FileInfofournit les détails du fichier à côté de la vignette..eeSFL_FileDetailsaffiche la taille du fichier et la date..eeSFL_ListFileActionsfournit des liens pour des actions telles que télécharger, copier et supprimer.
Télécharger les éléments du formulaire
Structure du formulaire
#eeSFL_UploadFormenveloppe l'intégralité du formulaire de téléchargement..eeSFL_UploadFilesTitleest l'en-tête du formulaire de téléchargement.
Champs de saisie
#eeSFL_NameEntrée pour saisir le nom du téléchargeur de fichiers.#eeSFL_EmailEntrée pour saisir l'e-mail du téléchargeur.#eeSFL_FileDescsaisie de texte pour la description du fichier.
Zone de téléchargement de fichiers
#eeSFL_FileInputpour sélectionner des fichiers.#eeSFL_FileDropZonepour les téléchargements de fichiers par glisser-déposer.#eeSFL_FileUploadQueueaffiche les fichiers en file d'attente pour le téléchargement.
Boutons et indicateurs
#eeSFL_UploadGoLe bouton qui lance le processus de téléchargement.#eeSFL_UploadProgressmontre la progression des téléchargements de fichiers..sfl_instuctionsfournit des directives ou des notes pour les téléchargements de fichiers.
Bonjour,
Est-il possible d'ajouter plus de champs à l'uploader ? comme le pays ?
Pas en ce moment.
Est-il possible de placer le téléchargeur sous la liste des fichiers?
Oui, vous devrez utiliser deux codes courts comme celui-ci…
[eeSFL showlist = "OUI" allowuploads = "NON"]
[eeSFL showlist = "NO" allowuploads = "OUI"]
J'utilise allowuploads = "NO" dans mon shortcode, mais il affiche toujours la zone de téléchargement sur le frontend. Je veux juste utiliser l'affichage de la liste et ne pas télécharger pour cette page.
Jason
Il semble que vous utilisiez l'extension File Access Manager et que vous consultiez la liste en tant qu'administrateur. Avec cette extension, l'administrateur voit toujours toutes les fonctionnalités disponibles, quels que soient les paramètres. Connectez-vous en tant qu'utilisateur prévu pour voir ce qu'il voit.
De plus, utilisez toujours les paramètres des plugins pour déterminer ce qui s'affiche ou non. Utilisez uniquement les attributs de code court pour les listes affichées dans un emplacement secondaire où l'apparence doit être différente des paramètres.
Comment pouvez-vous styliser le texte de description?
Sur la base de la documentation, je peux styliser le nom du fichier et les liens d'action.
Comment stylisez-vous les boutons de pagination?
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.
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?
Oui, cela fonctionnera.
Je prévois d'ajouter bientôt un onglet de style dans les paramètres. Plus que la taille du pouce.
J'ai utilisé le site Web suivant pour obtenir des instructions pour rendre le tableau réactif: https://css-tricks.com/responsive-data-tables/
Voici la règle que j'ai ajoutée à mon css:
@media only screen et (max-width: 1024px) {
Table .eeFiles, tête .eeFiles, corps .eeFiles, .eeFiles th, .eeFiles td, .eeFiles tr {
bloc de visualisation;
}
}
Bonjour
Est-il possible d'utiliser des téléphones? Je ne trouve pas de paramètre réactif. THX!
Oui, ce plugin fonctionnera sur les appareils mobiles, bien qu'il n'y ait pas de style intégré pour cela. Simple File List utilisera les règles de votre thème.