Hi Michael

Would you have a URL to an example of this issue?

Ciarán

Yes
http://www.new-life-coaching.com/

Thank you Michael

The markup for the module headers in our Revelation template is slightly different to the default module headers used in Joomla. Rather than using something like the following...

<div class="module_header"> 

Module_header

</div>

It should be...

<div class="module_header">

<div>

<h3>Module Header</h3>

</div>

</div>

Ciarán

Thanks Ciarán!

I have changed the markup to the correct one
It looks now better but still not the same like in the sidecol.

The graphic on the left side gets lost.

In general I would love to understand how that works.
There is only one bg image used that
consists out of the left part with the graphics followed by a transparent space area and the right part.

It seems that using CSS the right part is slided over the transparent area under the left area with the graphics.

http://www.new-life-coaching.com

The module header loads the same background image twice in two divs which overlay each other. One div has the background image positioned right while the other is positioned left. The reasoning been it allows the module header some scalability for the varying module sizes. This however is limited to a maximum 350px wide (approx). The header is set to be 100% of the containing div which is why it seems askew when loaded in the wider content area. A way to fix this is by adding a width to the div inline...

<div class="module_header" style="width:200px;">

<div>

<h3 style="font-size: 14px; padding-top: 0.5em;" >Module Header</h3>

</div>

</div>

Styling added to the h3 is just a reset for some content styling on the template.

Ciarán

Thank you Ciarán,
for the clear explanation.

There is only the last "miracle" left.

Using the module header in a smaller column,
which is not the sidecol, the left part of the bg-image
seems to be fully covered by the right part.

I have attached 2 pictures
The 1st shows the "incorrect" module_header and
the 2nd one shows the missing left image part.

Thank You,
Michael

HI Michael

To amend could you try adding the following to the end of your templates template.css (../templates/j51_revelation/css/template.css)..

div.module_header {padding: 0 0 0 33px !important;}

Ciarán

Thank you Ciarán!

That works.

I assume that the padding got overruled by some other css defintions,
since the 33px padding is anyhow part of the "modul_header" style definittion.

To avoid the duplication of the padding, I have moved the 2 Style definitions for the "module_header" to the bottom of the template.css stylesheet instead of the single padding line. This works as well.

Michael