Button Color – Wellness Theme

[Roadturn]

I want to change the color of the call to action button in Front Page 1.

In css, I changed #000 to #FFE303 ... but it looks funky, with weird edges. Also, the white text won't work with yellow. For now, I've changed it back to the original.

Has anyone performed the magic successfully? I'm a css first-grader.

https://boomalive.com

[Roadturn]

Anyone?

[carasmo]

<img src="https://christinacreativedesign.com/studiopressforum/Screen%20Shot%202017-10-26%20at%203.54.37%20PM.png
" alt=" " />

---

Genesis Theme Customization and Help

[carasmo]

Geesh this forum has a hard time with images:

Link to image:

https://christinacreativedesign.com/studiopressforum/Screen%20Shot%202017-10-26%20at%203.54.37%20PM.png

Use the additional css in the customizer:

/* -- default state front-page 1 button */

.front-page-1 .button {
background: #ffe303;
color: #222;
}

.front-page-1 .button:before {
border-bottom-color: #ffe303;
}

.front-page-1 .button:after {
border-top-color: #ffe303;
}

/* -- hover/focus state front-page 1 button */

.front-page-1 .button:hover,
.front-page-1 .button:focus {
background: #222;
color: #fff;
}

.front-page-1 .button:hover:before,
.front-page-1 .button:focus:before {
border-bottom-color: #222;
}

.front-page-1 .button:hover:after,
.front-page-1 .button:focus:after {
border-top-color: #222;
}

---

Genesis Theme Customization and Help

[carasmo]

https://christinacreativedesign.com/studiopressforum/Screen%20Shot%202017-10-26%20at%203.54.37%20PM.png

/* -- default state front-page 1 button */

  .front-page-1 .button {
      background: #ffe303;
      color: #222;
  }

  .front-page-1 .button:before {
      border-bottom-color: #ffe303;
  }

  .front-page-1 .button:after {
      border-top-color: #ffe303;
  }

  /* -- hover/focus state front-page 1 button */

  .front-page-1 .button:hover,
  .front-page-1 .button:focus {
      background: #222;
      color: #fff;
  }

  .front-page-1 .button:hover:before,
  .front-page-1 .button:focus:before {
      border-bottom-color: #222;
  }

  .front-page-1 .button:hover:after,
  .front-page-1 .button:focus:after {
      border-top-color: #222;
  }

---

Genesis Theme Customization and Help

[Roadturn]

Much appreciated, Christina. I will reverse-engineer to see where I was missing a gear.

[Roadturn]

Hmmm... Christina, do I just paste that code into the css without changing anything already there? Do I replace something with it? ...

[carasmo]

You would just paste this additional CSS panel. They are specific to that front-page area, not site wide.

---

Genesis Theme Customization and Help

[Author]

Posts