MyBB Community Forums

I want a little more color on my site. The default Mybb theme. Is it possible to change the color of the Forum Contains New Posts, Forum Contains No New Posts,  Forum is Closed,  and Redirect Forum icons in CSS? Or would I have to do it somewhere else?

I don't need to change the icons, just the colors.

BTW, what's the hex code for the color of the panel above where it says "Post a new Thread"? and what would be the name of that panel in CSS?

Thank you for your time.

(2020-01-09, 10:55 PM)Edward Gestalt Wrote: [ -> ]I want a little more color on my site. The default Mybb theme. Is it possible to change the color of the Forum Contains New Posts, Forum Contains No New Posts,  Forum is Closed,  and Redirect Forum icons in CSS? Or would I have to do it somewhere else?

I don't need to change the icons, just the colors.

BTW, what's the hex code for the color of the panel above where it says "Post a new Thread"? and what would be the name of that panel in CSS?

Thank you for your time.

By default those are sprites (  just for example: https://community.mybb.com/images/forum_icon_sprite.png ) as are a good deal of other images in 1.8.x so you would need to modify them in say photoshop or gimp, or if you perhaps like many others tend to absolutely despise sprites you could modify the board to remove all sprites and set it up for individual images usages taking it back to the retro days of mybb before the introduction of sprite usage and then modify and add your custom images, example of an old theme that has most sprites removed intentionally and replaced with individual images ( https://community.mybb.com/mods.php?action=view&pid=685 noted here just in case you wanted to look at how the css in there is changed from sprites to individual icons) I wrote a tutorial on that process of removing all sprites and replacing with individual images ages ago but removed it. Best bet if you are trying to modify color with css and not touch an image editor or sprites or individual images is to convert your board to use font awesome manually, or use an existing theme as base with font awesome already intact I wrote a rather lengthly tutorial on that ages ago but removed it and opted to release the existing tutorial completed instead as 2 themes (  https://community.mybb.com/mods.php?acti...w&pid=1188 / https://community.mybb.com/mods.php?acti...w&pid=1189 ) or you could add font awesome to your existing theme with say a plugin ( https://community.mybb.com/mods.php?acti...w&pid=1259 FA4 or https://community.mybb.com/mods.php?action=view&pid=909 FA5 ) and color the text icons via css. Nice thing about using fon-awesome is say using before and after styling and all sorts of other css effects to modify the text icons in anyway you so choose...

Example of say edging, stroking, shadow, pulse, etc, etc.


Basic example of say using before and after to style fa icons


etc, etc..., hence why I suggested converting to font awesome if css coloring is your desire...

Anyhoo, also not sure what you mean by the panel above where it says "Post a new Thread"? do you mean the post icon buttons or are you talking about upper or lower panel and or welcomeblock or toplinks, etc, etc, as your question on that part is fairly vague?

(2020-01-09, 11:56 PM)vintagedaddyo Wrote: [ -> ]

(2020-01-09, 10:55 PM)Edward Gestalt Wrote: [ -> ]I want a little more color on my site. The default Mybb theme. Is it possible to change the color of the Forum Contains New Posts, Forum Contains No New Posts,  Forum is Closed,  and Redirect Forum icons in CSS? Or would I have to do it somewhere else?

I don't need to change the icons, just the colors.

BTW, what's the hex code for the color of the panel above where it says "Post a new Thread"? and what would be the name of that panel in CSS?

Thank you for your time.

By default those are sprites (  just for example: https://community.mybb.com/images/forum_icon_sprite.png ) as are a good deal of other images in 1.8.x so you would need to modify them in say photoshop or gimp, or if you perhaps like many others tend to absolutely despise sprites you could modify the board to remove all sprites and set it up for individual images usages taking it back to the retro days of mybb before the introduction of sprite usage and then modify and add your custom images, example of an old theme that has most sprites removed intentionally and replaced with individual images ( https://community.mybb.com/mods.php?action=view&pid=685 noted here just in case you wanted to look at how the css in there is changed from sprites to individual icons) I wrote a tutorial on that process of removing all sprites and replacing with individual images ages ago but removed it. Best bet if you are trying to modify color with css and not touch an image editor or sprites or individual images is to convert your board to use font awesome manually, or use an existing theme as base with font awesome already intact I wrote a rather lengthly tutorial on that ages ago but removed it and opted to release the existing tutorial completed instead as 2 themes (  https://community.mybb.com/mods.php?acti...w&pid=1188 / https://community.mybb.com/mods.php?acti...w&pid=1189 ) or you could add font awesome to your existing theme with say a plugin ( https://community.mybb.com/mods.php?acti...w&pid=1259 FA4 or https://community.mybb.com/mods.php?action=view&pid=909 FA5 ) and color the text icons via css. Nice thing about using fon-awesome is say using before and after styling and all sorts of other css effects to modify the text icons in anyway you so choose...

Example of say edging, stroking, shadow, pulse, etc, etc.



Not sure what you mean by the panel above where it says "Post a new Thread"? do you mean the post icon buttons or are you talking about upper or lower panel and or welcomeblock or toplinks, etc, etc, as your question on that part is fairly vague?

Thank you for that awesome response. Much appreciated. I had an inkling I wouldn't be able to just change the colors. And now I've learned something.
On the main page, the panels I'm wondering about are the 1.8, Development, Extensions, etc. What is that color's hex code? And what would be the names of them in CSS so I could change the color?
Thank you again.

(2020-01-10, 12:54 AM)Edward Gestalt Wrote: [ -> ]

(2020-01-09, 11:56 PM)vintagedaddyo Wrote: [ -> ]

(2020-01-09, 10:55 PM)Edward Gestalt Wrote: [ -> ]I want a little more color on my site. The default Mybb theme. Is it possible to change the color of the Forum Contains New Posts, Forum Contains No New Posts,  Forum is Closed,  and Redirect Forum icons in CSS? Or would I have to do it somewhere else?

I don't need to change the icons, just the colors.

BTW, what's the hex code for the color of the panel above where it says "Post a new Thread"? and what would be the name of that panel in CSS?

Thank you for your time.

By default those are sprites (  just for example: https://community.mybb.com/images/forum_icon_sprite.png ) as are a good deal of other images in 1.8.x so you would need to modify them in say photoshop or gimp, or if you perhaps like many others tend to absolutely despise sprites you could modify the board to remove all sprites and set it up for individual images usages taking it back to the retro days of mybb before the introduction of sprite usage and then modify and add your custom images, example of an old theme that has most sprites removed intentionally and replaced with individual images ( https://community.mybb.com/mods.php?action=view&pid=685 noted here just in case you wanted to look at how the css in there is changed from sprites to individual icons) I wrote a tutorial on that process of removing all sprites and replacing with individual images ages ago but removed it. Best bet if you are trying to modify color with css and not touch an image editor or sprites or individual images is to convert your board to use font awesome manually, or use an existing theme as base with font awesome already intact I wrote a rather lengthly tutorial on that ages ago but removed it and opted to release the existing tutorial completed instead as 2 themes (  https://community.mybb.com/mods.php?acti...w&pid=1188 / https://community.mybb.com/mods.php?acti...w&pid=1189 ) or you could add font awesome to your existing theme with say a plugin ( https://community.mybb.com/mods.php?acti...w&pid=1259 FA4 or https://community.mybb.com/mods.php?action=view&pid=909 FA5 ) and color the text icons via css. Nice thing about using fon-awesome is say using before and after styling and all sorts of other css effects to modify the text icons in anyway you so choose...

Example of say edging, stroking, shadow, pulse, etc, etc.



Not sure what you mean by the panel above where it says "Post a new Thread"? do you mean the post icon buttons or are you talking about upper or lower panel and or welcomeblock or toplinks, etc, etc, as your question on that part is fairly vague?

Thank you for that awesome response. Much appreciated. I had an inkling I wouldn't be able to just change the colors. And now I've learned something.
On the main page, the panels I'm wondering about are the 1.8, Development, Extensions, etc. What is that color's hex code? And what would be the names of them in CSS so I could change the color?
Thank you again.

Ah, I think you are asking about the thead styling? if so on default theme that comes in mybb dist pkg because on the mycomm_default site it is not default and is modified

mycomm_default

.thead {
    color: #fff;
    background: #007fd0;
    border: none;
    font-size: 1.1em;
    padding: 8px 12px;
}

just a quick point to show you the theme here is modified and not default so lets use the default dist pkg theme for examples

Default

.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;
}

Then under thead is tcat

.tcat {
	background: #0f0f0f url(images/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #444;
	border-bottom: 1px solid #000;
	padding: 6px;
	font-size: 12px;
}

.tcat a:link {
	color: #fff;
}

.tcat a:visited {
	color: #fff;
}

.tcat a:hover,
.tcat a:active {
	color: #fff;
}

Then Trows

.trow1 {
	background: #f5f5f5;
	border: 1px solid;
	border-color: #fff #ddd #ddd #fff;
}

.trow2 {
	background: #efefef;
	border: 1px solid;
	border-color: #fff #ddd #ddd #fff;
}

.trow_shaded {
	background: #ffdde0;
	border: 1px solid;
	border-color: #fff #ffb8be #ffb8be #fff;
}

Etc, etc, and so on and so forth above all that is panel upper and lower and below all that is footer upper and lower etc, etc, all fairly easy to understand once you get tinkering and get the general layout/build gist of things...