Forum Display Banner Image per Forum

Forum Display Banner Image per Forum - Printable Version

+- Xucce (https://xucce.com)
+-- Forum: Forums (https://xucce.com/forum-1.html)
+--- Forum: MyBB Development (https://xucce.com/forum-4.html)
+---- Forum: Tutorials (https://xucce.com/forum-11.html)
+---- Thread: Forum Display Banner Image per Forum (/thread-30.html)

Forum Display Banner Image per Forum - Erik - 05-26-2025

Quote:

Step 1: Add Custom CSS Rule
Go to:
ACP → Templates & Style → Themes → YOUR THEME → global.css

Scroll to the bottom and add this:

Code:
.forumnameonavatarcs {

    text-align: center;

    color: #fff;

    font-size: 30px;

    height: 115px;

    margin-top: -151px;

}

Step 2: Edit forumdisplay Template
Go to:
ACP → Templates & Style → Templates → YOUR THEME → Forum Display Templates → forumdisplay

Find `{$header}` and add the following code directly below it:

Locked Content

Guests cannot view hidden content. Please log in.

Step 3: Upload Forum Banner Images
Using FTP or your file manager, navigate to:

images/forums/

If this folder does not exist, create it manually.

Upload your images using the forum ID as the filename:

Code:
<style>

.forumsimagesbg1 {

    opacity: 0.3;

    height: 230px;

    background: url("images/forums/{$foruminfo['fid']}.jpg") center center no-repeat #292929;

    background-size: cover !important;

    background-repeat: no-repeat;

    overflow: hidden;

}

</style>

<table width="100%" height="200" cellspacing="0" cellpadding="25" border="0" class="forumsimagesbg1"></table>

<div class="forumnameonavatarcs">

    {$foruminfo['name']}

</div>

Where `1`, `2`, `3` are the forum IDs (found in ACP → Forum Management).

Tips:
- Make sure the images are large enough for display.
- If the position doesn’t look right, tweak the CSS (`margin-top`, `height`, `font-size`, etc.) to suit your theme.