MyBB Community Forums

Hi, you see a panel named test. By default it comes with blue background and white text. I would like to change those two on my own. How?

You will need CSS knowledge for this.

Go to ACP -> Templates & Style -> Themes -> *Your Theme* -> global.css

The 'panel' class is .trow1 in this case, so you can search for that using CTRL + F5 and then change the background color.
The blue text is in this case a:link.

(2018-11-22, 10:44 AM)ElBitardo Wrote: [ -> ]Hi, you see a panel named test. By default it comes with blue background and white text. I would like to change those two on my own. How?

That is not panel styling as panel upper and lower panel is at the top of the forum and is not blue background by default, nor is it trow1 or trow2 as previously suggested as trow1 and trow2 also do not have a blue background by default, so, the blue background you mentioned is actually thead and is styled by #hex color and background image.


In global.css find:

.thead {
	background: #0066a2 url(images/thead.png) top left repeat-x;
	color: #ffffff;
	border-bottom: 1px solid #263c30;
	padding: 8px;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover,
.thead a:active {
	color: #ffffff;
	text-decoration: underline;
}

The best way to remind yourself of the order of styling in that area would be for example:

Table head = thead
Table category = tcat
Table row 1 = trow1
Table row 2 = trow2
Table footer = tfoot
Etc, etc...

Now you can look at the included css color files as an example of changing the thead like let us take a look at color_sun.css for example:

.thead {
	background: #ffdd4d url(images/colors/sun_thead.png) top left repeat-x;
	border-bottom: 1px solid #ffaf1a;
	color: #000;
}

.thead a:link,
.thead a:visited,
.thead a:hover,
.thead a:active {
	color: #000;
}

.thead input.textbox,
.thead select {
	border: 1px solid #ffaf1a;
}