Solved Static banner above forum list

Solved Static banner above forum list - Printable Version

+- Curves UI (https://www.curvesui.com)
+-- Forum: Product Support (https://www.curvesui.com/forumdisplay.php?fid=12)
+--- Forum: Support (https://www.curvesui.com/forumdisplay.php?fid=4)
+--- Thread: Solved Static banner above forum list (/showthread.php?tid=55)

Static banner above forum list - DonDickers - 19-03-2024

Hello again, I'm trying to add static banner above forum list (not in header, I don't want to broke the responsive design).

So I copied div from the bottom and set it on top:

Code:
{$header}

 <div class="container-md">

 <div class="card body bg-white shadow-sm mt-3 border-0">

<div class="card-body border-0 p-2 p-sm-2 p-md-2 p-lg-5 p-xl-5 p-xxl-5 rounded" style="width: 100%)">

 <img src="./images/banner.jpg" style="width: 100%; height: 100px" />

 </div>

 </div><br>

 {$forums}

Managed to put image into it but it's with big margin. Trying to set that image as background of the div to fullfill the space but I'm lack of css skills. Will be nice to have banner in future release but how to set up now?

Inspired (Dark)

It looks like this, it's sample image so proportion doeasn't fit:

RE: Static banner above forum list - Matty Wjeisz - 20-03-2024

Code:
<div class="card-body border-0 p-0 rounded" style="background-image: url('images/banner.jpg'); min-height: 120px">

Change '120px' to your desired height.

RE: Static banner above forum list - DonDickers - 20-03-2024

Thank you. Maybe I'm doing something wrong but managed it to work only with that code:

Code:
{$header}

<div class="container-md">

<div class="card body bg-white shadow-sm mt-3 border-0">

<div class="card-body border-0 p-0 rounded" style="background-image: url('images/banner.jpg'); min-height: 120px">

<img src="./images/banner.jpg" style="width: 100%; height: 300px" />

</div>

</div><br>

 {$forums}

Do I really need to set the same jpg twice?

RE: Static banner above forum list - Matty Wjeisz - 20-03-2024

Code:
<div class="container-md">

<div class="card body bg-white shadow-sm mt-3 border-0">

<div class="card-body border-0 p-0 rounded" style="background-image: url('images/banner.jpg'); min-height: 120px">

</div></div></div>

That is all you need.

RE: Static banner above forum list - DonDickers - 20-03-2024

Doesn't work at all and broke responsive when I close the third div before forums line. With two closed divs there is no background, only empty place.

RE: Static banner above forum list - Matty Wjeisz - 20-03-2024

Because you're using code that shouldn't be there. Remove the third div from breaking the container.

Add this to global.css

Code:
.logo {

  width: 100%;

  min-height: 150px;

  background-image: url('images/banner.jpg');

}

Then add this where you want the banner (be sure it's underneath container-md

Code:
<div class="logo"></div>

RE: Static banner above forum list - DonDickers - 20-03-2024

Thanks a lot! Now it's working. I know how to modify css (with inspect function then copy and paste) but never wrote a single one stylesheet Smile

RE: Static banner above forum list - Matty Wjeisz - 20-03-2024

There’s plenty of good resources out there. Never too late to learn Smile

RE: Static banner above forum list - DonDickers - 21-03-2024

Maybe a dumb question, but where to modify templates for different language pack? I completed costumisation for English, next installed another pack and some parts looks weird, for example <navigation> is doubled (I moved it to the top, now it's on top and in the usual place), also PM counter in the new navbar looks like default.

RE: Static banner above forum list - Matty Wjeisz - 21-03-2024

That theme was unfortunately limited in that in order to modify the appearance of certain elements, it meant modifying the language pack (which is why it was included).

I'll find the time to make a small plugin to carry out the necessary changes once I've finished with this current project (1.9).