MyBB Community Forums

I'd like to add a gradient color as my Panel element on the theme. My current panel code is:

#panel {
	background: #efefef;
	color: #000000;
	font-size: 11px;
	border: 1px solid #D4D4D4;
	padding: 8px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

Using an online gradient generator, I generated the following code for my gradient:

background: #f0b7a1; /* Old browsers */
background: -moz-linear-gradient(top, #f0b7a1 0%, #f0b7a1 8%, #8c3310 21%, #8c3310 47%, #752201 82%, #bf6e4e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0b7a1), color-stop(8%,#f0b7a1), color-stop(21%,#8c3310), color-stop(47%,#8c3310), color-stop(82%,#752201), color-stop(100%,#bf6e4e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0b7a1 0%,#f0b7a1 8%,#8c3310 21%,#8c3310 47%,#752201 82%,#bf6e4e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0b7a1 0%,#f0b7a1 8%,#8c3310 21%,#8c3310 47%,#752201 82%,#bf6e4e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f0b7a1 0%,#f0b7a1 8%,#8c3310 21%,#8c3310 47%,#752201 82%,#bf6e4e 100%); /* IE10+ */
background: linear-gradient(top, #f0b7a1 0%,#f0b7a1 8%,#8c3310 21%,#8c3310 47%,#752201 82%,#bf6e4e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=0 ); /* IE6-9 */

Can anyone explain how I merge this code into the panel element so as to display this color?

Just replace this code:

background: #efefef;

With your new code.

Awesome, thanks!

---

I have applied my own CSS gradient and changed font name for links in this manner:

#panel {
background: #f0b7a1; /* Old browsers */
background: -moz-linear-gradient(top, #f0b7a1 0%, #f0b7a1 8%, #8c3310 18%, #8c3310 72%, #bf6e4e 89%, #752201 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0b7a1), color-stop(8%,#f0b7a1), color-stop(18%,#8c3310), color-stop(72%,#8c3310), color-stop(89%,#bf6e4e), color-stop(100%,#752201)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f0b7a1 0%,#f0b7a1 8%,#8c3310 18%,#8c3310 72%,#bf6e4e 89%,#752201 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f0b7a1 0%,#f0b7a1 8%,#8c3310 18%,#8c3310 72%,#bf6e4e 89%,#752201 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f0b7a1 0%,#f0b7a1 8%,#8c3310 18%,#8c3310 72%,#bf6e4e 89%,#752201 100%); /* IE10+ */
background: linear-gradient(top, #f0b7a1 0%,#f0b7a1 8%,#8c3310 18%,#8c3310 72%,#bf6e4e 89%,#752201 100%); /* W3C */
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#752201',GradientType=0 ); /* IE6-9 */
color: #ffffff;
font-size: 11px;
border: 1px solid #D4D4D4;
padding: 8px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

#panel a:link {
color: #f7cf3a;
text-decoration: none;
}

My intent was to change the color of the link in panel to yellow (f7cf3a). However the image below shows what has happened:


It seems to display some of the links yellow, while some are still blue. What should I do additionally to make everything yellow? The link seems to be inherited from a: links even though element inspector shows the parent a: links as striked through (overridden by the panel a:link

---

Ok I solved that myself.

I just had to add another:

#panel a:-webkit-any-link {
color: #f7cf3a;
text-decoration: none;
}


I knew it had top be something simple!