MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)

[Legaziofunk]

The stats first:

MiniHero Banner Image v0.5 - (MH)
Template Fruesteg - (Fst.)
WB-Version 2.12.2 r379

First Note:
Yup, Chio Maisrieml mentions it a lot on his page, all his templates are considered "not recommended" for WB higher than 2.10. https://wbce.at/de/topics/template-probleme-wb-classic.php
So, I am not sure, if where I am coming from with my request here, has anyhting to do with it. So, just sayin'...

The Goal
I am installing a single-page-website where MH is basically dividing all the WYSIWYG sections.
Fst. has a border and a main contentbox. Or in other words: the contentbox does NOT reach from left to right. That's what I want.
I also want the background color on the border (retreived from the css for the body)

Code: [Select]

body {
background: #69587A;
be different than the one in the main contentbox

Code: [Select]

.contentbox { background: #787982; }
The Problem:
When the background color for Contentbox (GREY) is active, it also "lies" over the MH and the images can not be seen.


A quick solution would be outcommenting the css-color - but then it takes the same color as the background of the body (PURPLE).

Question

How do I solve this?


P.S.: And while I am at it: I also want that left area (under "SUPA") to disappear and thought, it's the class leftbox in Fst.

Code: [Select]

<!-- <div class="leftbox"></div> -->
But when I out-comment that one, nothing changes... any clues?

Thanyx heeeeeeeaps for your support!

And Merry F***ing Christmas!

[dbs]

F***ing Merry Xmas to you too!
I would help you if you give a link to page.This help is easier.

[Legaziofunk]

Very welcome:

http://www.christianemeusel.de/

here it is!

[dbs]

You should give your body a margin: 0 and padding: 0
Every browser use their own margins, so you have to overwrite this.

[Legaziofunk]

You should give your body a margin: 0 and padding: 0
Every browser use their own margins, so you have to overwrite this.

Thanx, already in it... did not post the entire body code...
...but I think, that's not the actual solution, is it?

body {
   background: #69587A  /*url(img/bodybg.jpg) repeat-x 0 0   (Im Hintergrund liegt eine Grafik am oberen Rand an, die einen Verlauf hat)*/;
   margin: 0; padding: 0;
   height:100%;
   width:100%;
}

[Legaziofunk]

Oooops, just realizing, I posted in the wrong board... this thread should be in WB 2.12.

Sorry 'bout this...!

[dbs]

No problem, i will move this thread.
Can't see any changes in your template. Also body has no style like you wrote.

[Ruud]

The problem is that when parallax is used, the hero images are positioned behind "everything". The trick is that this image is absolute positioned when scrolling the page.
Therefore the layers that become above the parallax image (the contentbox) cannot have a background.

When parallax is not used, the image wil be in the standard order of html layers, and you should not have any problems

Alternative it might work to force the parallax images to a higher z-index using this line in your stylesheet (template.css)

Code: [Select]

.parallax-mirror {
    z-index: 0 !important;
}

[Legaziofunk]

The problem is that when parallax is used, the hero images are positioned behind "everything". The trick is that this image is absolute positioned when scrolling the page.
Therefore the layers that become above the parallax image (the contentbox) cannot have a background.

Yup, I believe to remember this issue from another site before... but back then, I changed the width of the container to 100 % AND kept the background white...

When parallax is not used, the image wil be in the standard order of html layers, and you should not have any problems

Well, I MUST use it here - therefore, not using it is not an option...

Alternative it might work to force the parallax images to a higher z-index using this line in your stylesheet (template.css)

Code: [Select]

.parallax-mirror {
    z-index: 0 !important;
}

Okay... I understand, it does not matter where to enter this code?
So .parallax-mirror is the class MH refers to...?

Let's see...

Okay, WOW!
This seemed to have worked...

Thank you heaps!!

BUT: Since you said "it MIGHT" work:
Do you expect any problems?
If so, in what regard/department?

[Ruud]

Do you expect any problems?
If so, in what regard/department?

No, it just might not work in every template.
Now the <div> for this image has z-index:0 , there could be other elements in the template using higher z-index'es making the trick not work.

If it works, it works

 

[Legaziofunk]

Now the <div> for this image has z-index:0 , there could be other elements in the template using higher z-index'es making the trick not work.

So, if a problem occurs, I am assuming correctly, since this is now index 0 (zero), I may simply search the css for other "z-index" entries and check if they are >1 or so...?

Sounds like an easy fix to me... (right now! LOL)

If it works, it works

Fingers crossed!! 

Again: Heaps of thanx! 

[Legaziofunk]

I may add another issue in the same regard (somewhat):

When I change the padding of .content (which is main content, with e.g. 30px), the MH also receives this padding of 30px as well.

I thought, it's its own class....?

Put as a question: Can MH made independend of the classes which are supposed to ony apply for the WYSIWYG-content?

[Ruud]

WB puts a <div> around every section that generates content with the name of the module that was used.
So if you want to do something special for the wysiwyg blocks you can use that feature.

example WB output:

Code: [Select]

<div id="Sec4" class="section m_wysiwyg" >
 ...your content ...
</div>
In there you can modify the behavour using

Code: [Select]

.content .m_wysiwyg {
  padding: 30px;
}

Alternatively you could use techniques like this to create seperated content.

[Legaziofunk]

WB puts a <div> around every section that generates content with the name of the module that was used.
So if you want to do something special for the wysiwyg blocks you can use that feature.

example WB output:

Code: [Select]

<div id="Sec4" class="section m_wysiwyg" >
 ...your content ...
</div>
In there you can modify the behavour using

Code: [Select]

.content .m_wysiwyg {
  padding: 30px;
}


WOOOW! Heaps of thanx!

That did it!! Awesome!!
 

[Legaziofunk]

I have inserted another image in one of the WYSIWYG-sections including a float command:

<p>
<img alt="Portrait Christiane Meusel" class="img-responsive" src="http://www.christianemeusel.de/media/bilder/portraitcm.png" style="border-style:solid; border-width:0px; float:left; height:415px; margin:15px 25px 25px 0px; width:312px" /></p>

The float is supposed to bring the few text underneath instead to the right side of the pic - which it does.

But the MH-section now also comes "up" on a larger screen.

The new z-level of the parallax has nothing to do with it.

Also, I believe to see the page loading the images of the parallax now. In other word: the area where the MH is supposed to be, is grey at first and then - pretty quickly - the image sort of "flickers in". This looks not very smooth on my eye...

Any idea, where this is coming from?

[Ruud]

Any idea, where this is coming from?

Probably the 13Mb of images that needs to be loaded.
Most hero images you are using are very large (+4000px width). You should make them much smaller. (Your max viewport is 1200px)

Next use an (online) image optimizer to make them as small (in Kb) as possible.

[Legaziofunk]

Any idea, where this is coming from?

Probably the 13Mb of images that needs to be loaded.
Most hero images you are using are very large (+4000px width). You should make them much smaller. (Your max viewport is 1200px)

Next use an (online) image optimizer to make them as small (in Kb) as possible.

Thanx, I'll look into that.
Though this also happens, when the page has already loaded and is just looked at again after switching between two different windows. Does MH always reload images every time?

What about this floating issue? (cf. post before that)

[Ruud]

Using floats always give undesired results.

You could try to clear the floats for every "new" section.

Code: [Select]

.section {
  clear: both;
}
That might help.

[Legaziofunk]

Using floats always give undesired results.

You could try to clear the floats for every "new" section.

Code: [Select]

.section {
  clear: both;
}
That might help.

It did!!

Thanx - I thought, I had seen this already somewhere but forgot about it...