[@enacta2 Participant 9 years, 3 months ago]

@robin-w I applied your CSS code for root and forum and it works well. But the top part of the box is missing. I tried to ‘fix’ the button so it’s whole, but I’m unable. I tried many different CSS lines, including the following, and none worked.

Can you please tell me how to make the button so it’s complete?

I don’t have a live site with bbPress. It’s only on my localhost mirror for now, until I get it all setup the way I want.

/* Set breadcrumb from topic to its forum with blue button */
.bbp-breadcrumb-forum {
  background: #6D84B4;
  background-image: -webkit-linear-gradient(top, #6D84B4, #3B5998);
  background-image: -moz-linear-gradient(top, #6D84B4, #3B5998);
  background-image: -ms-linear-gradient(top, #6D84B4, #3B5998);
  background-image: -o-linear-gradient(top, #6D84B4, #3B5998);
  background-image: linear-gradient(to bottom, #6D84B4, #3B5998);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  -webkit-box-shadow: 0px 2px 0px #000000;
  -moz-box-shadow: 0px 2px 0px #000000;
  box-shadow: 0px 2px 0px #000000;
  font-family: Arial;
  color: #000000;
  font-size: 11px;
  padding: 7px 15px 7px 15px;
  text-decoration: none;
}

.bbp-breadcrumb-forum:hover {
  background: #AFBDE1;
  background-image: -webkit-linear-gradient(top, #AFBDE1, #6D84B4);
  background-image: -moz-linear-gradient(top, #AFBDE1, #6D84B4);
  background-image: -ms-linear-gradient(top, #AFBDE1, #6D84B4);
  background-image: -o-linear-gradient(top, #AFBDE1, #6D84B4);
  background-image: linear-gradient(to bottom, #AFBDE1, #6D84B4);
  text-decoration: none;
}

/* Set breadcrumb prepended text for button from topic to its forum */
.bbp-breadcrumb-forum::before {
  content: "Back to the ";
}

/* Set breadcrumb appended text for button from topic to its forum */
.bbp-breadcrumb-forum::after {
  content: " forum";
}

/*-------------------------------------------------------------------------------------------*/

/* Set breadcrumb from forum to its root with blue button */
.bbp-breadcrumb-root {
  background: #6D84B4;
  background-image: -webkit-linear-gradient(top, #6D84B4, #3B5998);
  background-image: -moz-linear-gradient(top, #6D84B4, #3B5998);
  background-image: -ms-linear-gradient(top, #6D84B4, #3B5998);
  background-image: -o-linear-gradient(top, #6D84B4, #3B5998);
  background-image: linear-gradient(to bottom, #6D84B4, #3B5998);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  -webkit-box-shadow: 0px 2px 0px #000000;
  -moz-box-shadow: 0px 2px 0px #000000;
  box-shadow: 0px 2px 0px #000000;
  font-family: Arial;
  color: #000000;
  font-size: 11px;
  padding: 7px 15px 7px 15px;
  text-decoration: none;
}

.bbp-breadcrumb-root:hover {
  background: #AFBDE1;
  background-image: -webkit-linear-gradient(top, #AFBDE1, #6D84B4);
  background-image: -moz-linear-gradient(top, #AFBDE1, #6D84B4);
  background-image: -ms-linear-gradient(top, #AFBDE1, #6D84B4);
  background-image: -o-linear-gradient(top, #AFBDE1, #6D84B4);
  background-image: linear-gradient(to bottom, #AFBDE1, #6D84B4);
  text-decoration: none;
}