默认情况下,“简单文件列表”将采用您网站的主题。 无需对样式进行任何修改,它就可以在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 {
}
上载器
Uploader使用以下样式:
/* 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%;
}
上传者信息表
这些样式控制可选的Uploader Information表单:
/* 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;
}
你好,
是否可以向上传器添加更多字段? 比如国家?
目前不行。
是否可以将上传器放置在文件列表下方?
是的,您需要使用两个这样的短代码…
[eeSFL showlist =“ YES” allowuploads =“ NO”]
[eeSFL showlist =“ NO” allowuploads =“ YES”]
我在我的简码中使用了 allowuploads=”NO”,但它仍然在前端显示上传区域。 我只想使用列表显示,而不是为该页面上传。
杰森
听起来您正在使用文件访问管理器扩展并以管理员身份查看列表。 使用此扩展程序,无论设置如何,管理员始终可以看到所有可用功能。 以预期用户身份登录以查看他们看到的内容。
此外,始终使用插件设置来确定显示与否。 仅对显示在外观需要与设置不同的辅助位置的列表使用简码属性。
如何为描述文字设置样式?
根据文档,我可以设置文件名和操作链接的样式。
另外,您如何设置分页按钮的样式?
使用类eeSFL_FileDesc设置描述文本的样式。
提示:使用Web浏览器的“检查元素”功能可以轻松查找哪些类或ID影响任何特定元素。
Hi
我发现缩略图太大了,所以必须添加它
#eeSFL td.eeSFL_Thumbnail,#eeSFL td.eeSFL_Thumbnail img {
宽度:20px;
高度:20px;
}
到我的主题CSS
您可以在管理员中添加缩略图大小设置吗?
是的,那可以。
我计划很快在设置中添加样式标签。 超过拇指大小。
我使用以下网站获取有关使表格响应的说明: https://css-tricks.com/responsive-data-tables/
这是我添加到CSS中的规则:
@仅限纯媒体屏幕和(最大宽度:1024像素){
.eeFiles表,.eeFiles thead,.eeFiles tbody,.eeFiles th,.eeFiles td,.eeFiles tr {
显示:块;
}
}
您好
可以使用手机吗? 我找不到响应式设置。 谢谢!
是的,尽管没有内置样式,但此插件将在移动设备上运行。 简单文件列表将使用您主题的规则。