Author Topic: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)  (Read 264 times)

Offline Legaziofunk

  • Posts: 134
  • Gender: Male
MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« on: December 29, 2019, 04:58:33 PM »
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!
________
WB 2.10.x (installed)/WB 2.12.x (installed)
PHP 7.2
MySQL 5.6.36-82.0-log

Offline dbs

  • Betatester
  • **
  • Posts: 8193
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #1 on: December 29, 2019, 05:48:25 PM »
F***ing Merry Xmas to you too!
I would help you if you give a link to page.This help is easier.

Offline Legaziofunk

  • Posts: 134
  • Gender: Male
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #2 on: December 29, 2019, 06:35:35 PM »
Very welcome:

http://www.christianemeusel.de/

here it is!
________
WB 2.10.x (installed)/WB 2.12.x (installed)
PHP 7.2
MySQL 5.6.36-82.0-log

Offline dbs

  • Betatester
  • **
  • Posts: 8193
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #3 on: December 29, 2019, 07:51:51 PM »
You should give your body a margin: 0 and padding: 0
Every browser use their own margins, so you have to overwrite this.

Offline Legaziofunk

  • Posts: 134
  • Gender: Male
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #4 on: December 29, 2019, 07:58:39 PM »
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?

Quote
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%;
}
________
WB 2.10.x (installed)/WB 2.12.x (installed)
PHP 7.2
MySQL 5.6.36-82.0-log

Offline Legaziofunk

  • Posts: 134
  • Gender: Male
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #5 on: December 29, 2019, 08:04:59 PM »
Oooops, just realizing, I posted in the wrong board... this thread should be in WB 2.12.

Sorry 'bout this...!
________
WB 2.10.x (installed)/WB 2.12.x (installed)
PHP 7.2
MySQL 5.6.36-82.0-log

Offline dbs

  • Betatester
  • **
  • Posts: 8193
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #6 on: December 29, 2019, 09:07:03 PM »
No problem, i will move this thread.
Can't see any changes in your template. Also body has no style like you wrote.

Offline Ruud

  • Posts: 3658
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #7 on: December 29, 2019, 10:31:06 PM »
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;
}

Offline Legaziofunk

  • Posts: 134
  • Gender: Male
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #8 on: December 29, 2019, 11:07:11 PM »
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...

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

Quote
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?
________
WB 2.10.x (installed)/WB 2.12.x (installed)
PHP 7.2
MySQL 5.6.36-82.0-log

Offline Ruud

  • Posts: 3658
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #9 on: December 29, 2019, 11:17:30 PM »
Quote
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 :-)

 

Offline Legaziofunk

  • Posts: 134
  • Gender: Male
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #10 on: December 30, 2019, 12:48:05 AM »
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)

Quote
If it works, it works :-)
Fingers crossed!!  (Y) :evil:

Again: Heaps of thanx!  :-)
________
WB 2.10.x (installed)/WB 2.12.x (installed)
PHP 7.2
MySQL 5.6.36-82.0-log

Offline Legaziofunk

  • Posts: 134
  • Gender: Male
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #11 on: December 30, 2019, 01:08:13 AM »
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?
________
WB 2.10.x (installed)/WB 2.12.x (installed)
PHP 7.2
MySQL 5.6.36-82.0-log

Offline Ruud

  • Posts: 3658
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #12 on: December 30, 2019, 11:53:14 AM »
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.

Offline Legaziofunk

  • Posts: 134
  • Gender: Male
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #13 on: January 02, 2020, 06:48:19 PM »
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!!
 (Y) (Y) (Y) (Y)
________
WB 2.10.x (installed)/WB 2.12.x (installed)
PHP 7.2
MySQL 5.6.36-82.0-log

Offline Legaziofunk

  • Posts: 134
  • Gender: Male
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #14 on: January 03, 2020, 02:43:19 PM »
I have inserted another image in one of the WYSIWYG-sections including a float command:

Quote
<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?
________
WB 2.10.x (installed)/WB 2.12.x (installed)
PHP 7.2
MySQL 5.6.36-82.0-log

Offline Ruud

  • Posts: 3658
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #15 on: January 03, 2020, 03:36:29 PM »
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.

Offline Legaziofunk

  • Posts: 134
  • Gender: Male
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #16 on: January 03, 2020, 04:23:31 PM »
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)
________
WB 2.10.x (installed)/WB 2.12.x (installed)
PHP 7.2
MySQL 5.6.36-82.0-log

Offline Ruud

  • Posts: 3658
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #17 on: January 03, 2020, 04:38:16 PM »
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.

Offline Legaziofunk

  • Posts: 134
  • Gender: Male
Re: MiniHero vs. Template Fruesteg: Contentbox bgrd Color (Issues)
« Reply #18 on: January 03, 2020, 05:17:23 PM »
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...

 (Y) (Y) (Y) (Y)
________
WB 2.10.x (installed)/WB 2.12.x (installed)
PHP 7.2
MySQL 5.6.36-82.0-log