Download button background color

[openvoiceschoir]

Question 1:

To add a PDF file to my webpage, I select a FILE block and opt to show the DOWNLOAD button.  The background color of the Download button is black and the button text is dark blue.  Unfortunately, the black background makes it hard to read the button text.  I would like the button to have a white background with a black border while keeping the button text dark blue.  I have looked through the Appearance > Customize menu and can’t find where to make the changes I want.

 

Question 2:

Can I create a LIST block and then add a FILE block to the first item in the list?

 

 

[scrambler]

We need a link to the page with the button to offer custom CSS to change its styling

[openvoiceschoir]

You can find an example of the download button on openvoices.ca

This is on a public page so you do not need to login as a member.

[openvoiceschoir]

And while you are looking at this page, I find the font size is too small when I use the FILE block.  Is there any way to have it be the same font size as all the content?

[User]

@openvoiceschoir

I’m not up to date on WP Blocks, but does this help?

File block

Regards.

[openvoiceschoir]

The video suggested changing the File block into a group and then changing the background color of the group.  While I could change the background color of the group, it had no impact on the background color of the Download button.

[scrambler]

This reply has been accepted as the best answer.

If there is no styling option in the block, The rule below added to the Theme Global Custom CSS Rule box should change it for the block file

.wp-block-file__button {background:white;border:2px solid black;}

If that does not work, try adding important
.wp-block-file__button {background:white !important;border:2px solid black;}

If you ever want to change the text color, the text color comes from the default wrapper link.
You can change that globally, using the theme setting for the wrapper area link.
or use the rule below
.wrapper .wp-block-file a {color:red;}

[scrambler]

For the font can you be more specific.

Which text are we speaking of? Is it the text before the button ?

If so the font size is done by the rule below, so add that rule to the theme global custom CSS rule box with a different value

.wp-block-file:not(.wp-element-button) {font-size: .8em}

If any of the CSS does not seem to work, please leave the rule in and post back so we can check why

[openvoiceschoir]

Thank you.  Your “guess” what correct.  I was wanting to change the text font size before the ‘Download’ button.  Both your suggestions worked!

[Author]

Posts