Archived topic

css and new download block

3 replies · Started by Frans on January 12, 2019

Viewing posts 1–4 of 4

January 12, 2019 at 7:37 am #780013

I added a "file-block" with the new block editor (Gutenberg, WP 5.03). It shows a download-button, black background, white text. I tried to adapt the css characteristics of this button:

.wp-block-file__button:link, .wp-block-file__button:visited, .wp-block-file__button:active {
	border: 1px solid #628907;
	border-radius: 5px;
	padding: 5px 10px;
	background-color: #fff;
	color: #628907;
	font-size: 15px;
}
.wp-block-file__button:hover {
	border: 1px solid #90CB0D;
  background-color: #90CB0D;
}

It works, except one: color: #628907; does not work. The text remains white, whatever I choose as color value.

How can I override the standard text color (white) of this button ?

Thanks !

Frans van Ittersum

January 12, 2019 at 8:43 am #780072

Hi there,

Looks like the block library is using these selectors in their CSS:

.wp-block-file a.wp-block-file__button:active, 
.wp-block-file a.wp-block-file__button:focus, 
.wp-block-file a.wp-block-file__button:hover, 
.wp-block-file a.wp-block-file__button:visited {

}

You'll want to use the same selectors to overwrite it.

January 13, 2019 at 4:25 am #780528

Thanks! It works !
Frans

January 13, 2019 at 8:54 am #780760

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.