Button Style: Secondary?

Foundry
1

The button stack has the option for Secondary in syles, but I can’t see where in the Foundry stack to define the colour scheme for “secondary”. So how do I set it?

2
3

Eh?

I get the not configurable bit, but the next bit reads like it’s been put thru an online translator c1998! Could you explain that it again, please?

4

Thew Secondary style is not one that is user configurable. It is a preset I’ve added to the button stack for a specific button styling that is used quite often. You can set the other styles (Primary, Info, Success, etc) how you like in the Foundry Control Center stack, or you can use the color picker to customize styling on a button, or other element, on an individual basis.

1 Like
5

An old post, I know, but here’s how to style the Secondary button using CSS.

The style to select is .btn-secondary and here’s the code to do it:

/*	Style the Foundry preset Secondary
	button in Button stack, Card stack, etc. */

/* default (unvisited link) */
.btn-secondary {
	color: #373A3C;
	background-color: #E5E5E5;
	border: 1px solid #E5E5E5;
}

/* visited link - same as default */
.btn-secondary:visited {
	color: #373A3C;
	background-color: #E5E5E5;
	border: 1px solid #E5E5E5;
}

/* mouse over */
.btn-secondary:hover {
	color: #FFFFFF;
	background-color: #617940;
	border: 1px solid #617940;
}

/* selected link (mouse down) */
.btn-secondary:active {
	color: #FFFFFF;
	background-color: #B5C99A!important;
	border: 1px solid #B5C99A!important;
}

Note that the selectors must be in the order shown.

Simply paste the code in the CSS pane of the Inspector for page-specific styling or in the Code tab for the entire site.

BTW: If you want to use this across the entire site, you will need !important for every selector.

6

Best not to resurrect 4 year old posts like zombies from The Walking Dead. :woman_zombie: :man_zombie:

7