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:

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.

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?

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.

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.

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>

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

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

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.

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).