PAGES and GALLERIES layout glitches

pideja · 2015-09-14 04:08:03

On CE4 PAGES, I get this "extra" background color over the masthead.

No such extra overhead in the GALLERIES pages though. Just a fine white line between the masthead and the navigation bar.

Any hints as to a fix to this?

www.pideja.ca/vapotion

Thank you

rod barbee · 2015-09-14 08:42:24

the masthead on all pages looks the same to me

pideja · 2015-09-19 04:20:35

I have a 1920 x 1080 display. When viewing this site http://vapotion.com I get an extended section of beige colored background(like if the masthead was too wide) as well as the top sections, left and right, that seem to protrude from the masthead.

Also there is a very slight discrepency in color between the masthead and the background although both are fff4e6.

Where did I fumble the ball?

I'm trying to implement a dynamic masthead but I think the "old" CE3 CSS for this effect doesn't work.

pideja · 2015-09-19 06:48:08

As a matter of fact, the galleries don't even have quite the same layout.

Must I re-do everything or can I edit some file?

rod barbee · 2015-09-19 06:57:28

It looks like perhaps your Core widths need adjusting.
Or perhaps you orphaned the masthead?

pideja · 2015-09-19 22:13:07

Yes, I have the masthead "orphaned". The core width is "auto" at 1140px. I'm trying to implement a dynamic masthead using the CSS suggested for CE4:

@media only screen and (max-width: 1920px) { /* set max-width as width of masthead graphic */
.masthead .mantle {
   float: left;
   height: 0;
   overflow: visible;
padding: 0;
   padding-bottom: 19%; /* our height percentage, calculated by our ratio in Step 2 */
   position: relative;
   width: 100%;
}
.masthead .core {
height: 100%;
position: absolute; left: 0; top: 0;
width: 100%;
}
.masthead h1 {
background-position: center center;
background-size: cover;
height: 100% !important;
}
} /* max-width: 1140px */

The image I use for the graphic identity plate is 1920px x 362px. This image is part of the series of identity plates I produced for the dynamic masthead.

pideja · 2015-09-19 22:59:35

I edited the custom CSS as per your suggestion in a another post as illustrated on your site. I ajusted the padding so that the "overhead" tint is almost invisible. Also, there is no more "gap" between the navigation area and the masthead. I

Now to take care of the excess "beige" areas on either top side...Anyway I can adjust this directly on one of the php files?

Also, why won't the galleries follow the same CSS as the main Page?

What bothers me is that none of this shows up in Lightroom (web module).

Last edited by pideja (2015-09-19 23:15:13)

rod barbee · 2015-09-20 00:54:08

the link you provided above doesn't work. I can't tell anything without being able to see the site.

Off the top of my head, the only reason I can think of for your gallery pages not using the same css is that you might be sending them a different file. But I can't tell without being able to see it.

pideja · 2015-09-20 21:39:01

Sorry about the broken link. I must have been fiddeling with the files, looking for a clue...

By the way, the galleries link is called SAVEURS on this site.

It should be on line now : http://vapotion.com

Last edited by pideja (2015-09-20 21:40:22)

rod barbee · 2015-09-20 23:06:20

looks like you have different colors set for the masthead background color.
for the galleries, it's set to #FFFFFF and for Pages it's set to #FFF4E6

pideja · 2015-09-22 00:00:18

The scheme for the masthead is to have the lower part in FFF4E6 (Beige) and the top part FFFFF (White) and that's how they are in Pages and in Galleries. The page container is also FFF4E6 but the page body is FFFFF. Should give a masthead, navigation bar and container all the same hue.
What I can't figure out is where do these "protruding" FFF4E6 section come from? I can't see them while in Lightroom but on line they show up. The pattern is not the same in Pages and in Galleries. In Pages, it seems like their are "ears" on each top side of the masthead. These sections vary in size when reducing the browser window (I don't have a tablet). Looking at one of the three galleries, it's almost the reverse : the page container is much larger and the masthead seems smaller with no beige top sections.

I guess I'll have to redo all of it...

rod barbee · 2015-09-22 08:43:20

part of the problem may be that your masthead image is only 960 px wide for the desktop version
http://vapotion.com/phplugins/images/vap.png

pideja · 2015-09-22 23:56:48

I edited the CSS to reflect the true size of the images and it works better now. However, I'll eventually redo all these images at better sizes.

But, the main problem persists : extra "beige" areas on each side and over the top of the masthead. These zones don't even show up in Lightroom.

Desktop and (simulated)tablet

rod barbee · 2015-09-23 00:12:41

well since you're replacing the masthead with custom css, I wouldn't expect the masthead online to exactly match the masthead in Lightroom.

this looks like a possible mismatch in mantle/core widths between the masthead and the rest of the body of the page.

and again, the masthead background color is different in CE4 Gallery and CE4 Pages. In fact, using the inspector, if I disable the masthead background color on any of the Pages pages, the masthead area then matches that of the Gallery pages.

(the block width is still different between Pages and Gallery though, so the beige area is wider in the block for Gallery than it is for Pages.

My suggestion would be to decide which design you're going to use (Gallery or Pages) and then use the template sharing technique to match them up.

pideja · 2015-09-24 00:08:02

In my Chrome browser, the masthead colors are FFFFF white and FFF4E7 beige. However, using Chrome's Color Pick Eyedropper, I noticed that the beige color altrough the site was FFF4E6. So, I harmonized everything to FFF4E7;

Playing around with the Mantle/Core settings, in Lightroom, I can see that if I put As for the Core/Mantle widths, I put everything at auto; seems to get right of the "extra" panels but I still get that beige overhead. I can live with this until I find out how to control this.

When I get the PAGES right, I'll do as you suggest and do the template copy/paste thing.

By the way, I already noticed that the Mantle/Core settings don't show up in Lightroom as they do in the browser.
Here is another example:
There is a rather large difference between the Lightroom and the browser's rendition of these PAGES/gallery buttons. Strange.
These buttons are set to ICONIC mode at a ratio of 7/1 in a 3 colum set-up. Album info height of 5p and album spacing at 30p.
I can live with the way the browser renders these settings, but I am curious as to the reason for this.

http://vapotion.com

Last edited by pideja (2015-09-24 00:31:27)

rod barbee · 2015-09-24 00:31:33

when using the Iconic layout, the images you provide will be resized to fill the available space. So what you see in Lightroom may not necessarily be what you get in the browser. Your thumbnail images are being stretched to fill the available space.
This is what the Iconic layout does.

So you have a couple of options.
-Create the button images large enough so they don't lose resolution when filling the iconic space.
-Create button images that have the beige color around the blue, making the entire image large enough to fill the space that will be provide for them.

Community @ The Turning Gate

#1 2015-09-14 04:08:03

PAGES and GALLERIES layout glitches

#2 2015-09-14 08:42:24

Re: PAGES and GALLERIES layout glitches

#3 2015-09-19 04:20:35

Re: PAGES and GALLERIES layout glitches

#4 2015-09-19 06:48:08

Re: PAGES and GALLERIES layout glitches

#5 2015-09-19 06:57:28

Re: PAGES and GALLERIES layout glitches

#6 2015-09-19 22:13:07

Re: PAGES and GALLERIES layout glitches

#7 2015-09-19 22:59:35

Re: PAGES and GALLERIES layout glitches

#8 2015-09-20 00:54:08

Re: PAGES and GALLERIES layout glitches

#9 2015-09-20 21:39:01

Re: PAGES and GALLERIES layout glitches

#10 2015-09-20 23:06:20

Re: PAGES and GALLERIES layout glitches

#11 2015-09-22 00:00:18

Re: PAGES and GALLERIES layout glitches

#12 2015-09-22 08:43:20

Re: PAGES and GALLERIES layout glitches

#13 2015-09-22 23:56:48

Re: PAGES and GALLERIES layout glitches

#14 2015-09-23 00:12:41

Re: PAGES and GALLERIES layout glitches

#15 2015-09-24 00:08:02

Re: PAGES and GALLERIES layout glitches

#16 2015-09-24 00:31:33

Re: PAGES and GALLERIES layout glitches

Board footer