By default, this block doesn’t look the best. The good news is we can easily apply custom styling, and in this case, we’re making the files appear as buttons.
- Add the Files block to your Listing Type.
- Add #fileblock to the Custom Block ID field of the block.
- Add the CSS below to your website.
- Adjust the colors (e.g., var(-canvas-white)) to your own colors.
/**** FILE BLOCK BUTTON ****/
#fileblock .file-list a {
background: var(--accent);
color: var(--canvas-white);
border-radius: 5px;
padding: 15px !important;
text-transform: uppercase;
}
#fileblock .file-list a:hover {
color: var(--canvas-white) !important;
background: var(--accent10);
}
/** FILENAME **/
#fileblock .file-name {
color: transparent !important;
}
#fileblock .file-name::before {
content: "View/Download File"; /* Change the text between the quotes as desired. */
color: var(--canvas-white) !important;
}
/** ICON **/
#fileblock .file-icon i {
display: none;
}
/** FILE VIEW LINK **/
#fileblock .file-link {
display: none;
}
The option below is if you’d like to keep the icon that appears before the button text and style it up.
/**** FILE BLOCK BUTTON ****/
#fileblock .file-list a {
background: var(--accent);
color: var(--canvas-white);
border-radius: 5px;
padding: 15px !important;
text-transform: uppercase;
}
#fileblock .file-list a:hover {
color: var(--canvas-white) !important;
background: var(--accent10);
}
/** FILENAME **/
#fileblock .file-name {
color: transparent !important;
}
#fileblock .file-name::before {
content: "View/Download File"; /* Change the text between the quotes as desired. */
color: var(--canvas-white) !important;
}
/** ICON **/
#fileblock .file-icon i {
border: none;
color: var(--canvas-white);
}
/** FILE VIEW LINK **/
#fileblock .file-link {
display: none;
}