Demo Templates - Byron Center, MI

Buttons - Colors change to site colors from very start

Assigned to
Kyle Sullivan, Web Development at Diocesan Kyle S.
Notes
.wp-block-button__link {
  background: #f27d42;
  border: 0;
  color: #FFFFFF;
  font-family: "Lato" !important;
}
  .wp-block-button__link:hover, .wp-block-button__link:focus {
    background: #022444;
  }
I used this in the tweaks of Robert and it seemed to work really well and allowed to change the button colors if the user wants. 

Obviously, a few of these attributes should be changed once added to the actual theme and depending on the styling of the homepage buttons. #f27d42 change to $secondary or $primary, font-family: $main. #022444 change to other than the first one. I don't know where to add this, but like the button styling file. and just test to make sure that the text color and the background color can be changed.

https://robert.diocesanweb.org/faith-formation/ I added it to the tweaks, so you will have to switch that out.

Comments & Events

Kyle Sullivan, Web Development at Diocesan
Cody Armock, Web Content Specialist at Diocesan Cody , what do you mean with this to-do? You appear to be asking for SCSS variables, which wouldn't work without compilation.

I can explore firing this on an earlier hook or something, but we'll have to be careful that the colors and fonts have been established before we try to do this.

My main takeaway so far: it sounds like you're asking for immediate updates without compilation, and to the best of my knowledge, that simply isn't possible.
Kyle Sullivan, Web Development at Diocesan
I just used the init hook on Catholic Cemeteries (Grand Rapids, MI), and that may be a better option. I think that fires late enough to have the variables set, but we can explore this in due time.
Kyle Sullivan, Web Development at Diocesan
I've removed what's in the Customized, added the following around Line 280 in custom.php, and this issue seems resolved.
.wp-block-button__link, .wp-block-file__button {
  background: <?= get_field('primary_color', 'options'); ?> !important;
  border: 0;
  color: #FFFFFF;
  font-family: <?= $fontMain; ?> !important;
  transition: 0.25s ease-in;
}
  .wp-block-button__link:hover, .wp-block-button__link:focus,
  .wp-block-file__button:hover, .wp-block-file__button:focus {
    background: <?= get_field('secondary_color', 'options'); ?> !important;
  }
Kyle Sullivan, Web Development at Diocesan
I've added this update to the Dev Site, the Demo Site, the Design Site, the Showcase Site and GitHub.
Kyle Sullivan, Web Development at Diocesan
Kyle Sullivan completed this to-do.