Hey guys, I am brand new to MyBB and I am building a forum interface. I am stuck on trying to figure out how to add different images to each main forum header...
Take a look at:
http://test.hobbysquawk.com/index.php
Notice the helicopter graphic in both the RC Airplanes and Board Statistics headers.
Here's what I have in the .thead section of the global.css...
.thead {
background: #0066a2 url(images/tcat2a.png) top left repeat-x;
color: #ffffff;
border-bottom: 1px solid #263c30;
padding: 16px;
I want to be able to change the graphic(s) out whenever I have a new forum category. So in this instance RC Airplanes would have a blended image of an airplane, RC Helicopters would have a Helicopter image and so on...I am not sure what code I need to add in the global.css to allow this to occur.
THANK YOU SO MUCH for any help!!
Thank you!!!
Actually I am still stuck on where this code goes...He does not specify precisely where in the CSS code this line goes...
#forum_cat_1 {background:#111;}
Is that in the .thead line somewhere? Thank you again for your help!
You have to modify some theme templates and add new css rules to theme css3.css
Template changes:
Open theme template
"forumbit_depth1_cat" to edit
Search for:
<td class="thead{$expthead}" colspan="5">
Replace that part with:
<td class="thead{$expthead} fid{$forum['fid']}" colspan="5">
Save changes and open theme template
"forumdisplay_subforums" to edit
Search for:
<td class="thead" colspan="5" align="center"><strong>{$lang->sub_forums_in}</strong></td>
Replace that part with:
<td class="thead fid{$fid}" colspan="5" align="center"><strong>{$lang->sub_forums_in}</strong></td>
Save changes and open theme css file
"css3.css" in advanced mode to edit
Add at botton of that file ([x] ist a placeholder for your category forum id)
.thead.fid[x] {
background: xxxx // Your background;
}
Repeat this entry for every category by changing the cat id at the end.
An example:
.thead.fid1 {
background: brown;
}
.thead.fid4 {
background: green;
}
Wow that's a lot of extra steps not covered in the original tutorial...Thank you...I tried all of that and it didn't change anything...Not sure what I am missing...Seems like the .thead section in global.css is still overriding...
Undo the changes from the "original" tutorial and follow my steps above - it works.
This is what I have at the bottom of the css3.css file...
Just adding random colors to see if anything changed and it didn't...
.thead.f1 {
background: #0066a2 url(images/tcatheli.png) top left repeat-x;
}
.thead.f2 {
background: #FFF url(images/tcatheli.png) top left repeat-x;
}
.thead.f3 {
background: #000 url(images/tcatheli.png) top left repeat-x;
}
.thead.f4 {
background: #C3C3C3 url(images/tcatheli.png) top left repeat-x;
}
.thead.f5 {
background: #FFYYFF url(images/tcatheli.png) top left repeat-x;
}
I've edited the tutorial earlier - pls use in css3.css
.thead.fid1 {
background: #0066a2 url(images/tcatheli.png) top left repeat-x;
}
.thead.fid2 {
background: #FFF url(images/tcatheli.png) top left repeat-x;
}
.thead.fid3 {
background: #000 url(images/tcatheli.png) top left repeat-x;
}
.thead.fid4 {
background: #C3C3C3 url(images/tcatheli.png) top left repeat-x;
}
.thead.fid5 {
background: #FFYYFF url(images/tcatheli.png) top left repeat-x;
}
[
attachment=33570]
I missed the fID1...(.thead.fid1...)
THANK YOU IT WORKED!!
Sorry I spoke too soon. I saw the color changes but now when I try to edit images, only the top image is showing and I can't get Board Statistics to change. It must be in the ID category numbering but looking at my catergories, this is how I have it lined up. This is the latest code...
I can't say how much I appreciate your help!
.thead.fid1 {
background: #0258c1 url(images/tcatplane.png) top left repeat-x;
}
.thead.fid2 {
background: #FFF url(images/tcatheli2.png) top left repeat-x;
}
.thead.fid3 {
background: #0258c1 url(images/tcatelect.png) top left repeat-x;
}
.thead.fid4 {
background: #0258c1 url(images/tcatmrc.png) top left repeat-x;
}
.thead.fid5 {
background: #0258c1 url(images/tcatmrc.png) top left repeat-x;
}
Okay I really did get it working this time. The forum category numbering was messing me up...I got it to work. Thank you again and again for all of your help!
Okay, I have begun transferring my data over to the main board at:
http://www.hobbysquawk.com/
Unfortunately, I am running into trouble again, trying to get the individual images to work. For some reason I can only get one sub forum to work (General Topics)...But even though it shows order 4 in the categories, it's only working as .fid3... So confused!
This is the code I have in the css3.css file at the bottom. I have double-checked file names to make sure those are correct and they are...I also have double-checked I have the proper code in the theme templates...
.thead.fid1 {
background: #0066a2 url(images/tcatplane.png) top left repeat-x;
}
.thead.fid2 {
background: #0066a2 url(images/tcatheli2.png) top left repeat-x;
}
.thead.fid3 {
background: #0066a2 url(images/tcatgen.png) top left repeat-x;
}
.thead.fid4 {
background: #0066a2 url(images/tcatelec.png) top left repeat-x;
}
This is what our categories/forums look like...(attached)
Aaaagh! Driving me crazy!! lol...
We figured out how to find the forum IDs so the code worked great.
The next adventure is the same idea, but for all of our forums under their main categories.
For instance, under RC Airplanes we have Propeller, EDF Jets, Gliders and so on. We would like to do the same thing we did with the main category forums. An individualized header image for each forum.
Once again, anyone's help is greatly appreciated!
The site:
http://www.hobbysquawk.com/