Trying to simplify - The top pallet / Masthead

Backlight 4, 5 & 6 Support
#1

First off, I notice that I have two pages in the PAGES TEMPLATE section of Backlight. One is the main page ( Pages-pideja ) and the other is the About page ( Pages-a propos ). Is there a valid reason for this? Is it because there is text in Backlight/Designer/Pages/Design/Page Copy that needed to be isolated?
Anyway, the main problem now is in the Top pallet / Masthead: I cleaned up that section by removing the black background and placed my name to the right of the logo. But, around 970px, the name starts to disappear behind the logo!
Related to this problem, is my discovery of this css:

/------------------------------- Top pallet logo --------------------------------------------------------/
.page__pallet__top > .content > ul > li {
height: 48px;
margin: 0;
}

.top-pallet-logo {
background-image: url(“https://pideja.ca/backlight/designer/page/image/6”), url(“https://pideja.ca/backlight/designer/page/image/31”);
background-repeat: no-repeat, no-repeat;
background-position: 7%, 15% center;
height: 48px;
width: 100%;
}

li.top-pallet-logo a {
display: block;
height: 75%;
width: 75%;
}
/---------------------------------Top Pallet title-------------------------------------------------------------/
.top-pallet-title {
background-image: url(“https://pideja.ca/backlight/designer/page/image/31”);
background-repeat: no-repeat, no-repeat;
background-position: 50%, center;
height: 48px;
width: 100%;
}

li.top-pallet-title a {
display: block;
height: 75%;
width: 75%;
}

undefined {
margin-left: 0px;
margin-right: 100px;
}

The image #6 is the logo, on the extreme left side. Image #31 is my nameplate. Why did I put two images in the top-pallet logo section? The image #31 in the top-pallet top-pallet-title sections doesn’t seem to do anything
The “undefined” lines, for some reason, dictate the red MENU button’s position.
This is some quirky code!

#2

Those are page templates, not pages. That is, if they are found in this area:

image

#3

Maybe something like this was your reason?

#4

As a follow-up on the CSS top-pallet-logo: if I remove the part about image #6 (the logo), only the nameplate appears in the masthead, the logo is gone.
But, if I remove the part with image #31, only the logo appears.

Where do I put this line, then: ,url(“https://pideja.ca/backlight/designer/page/image/31”) because it also appears in the top-pallet-title section, although it doesn’t appear to do anything.

Because if they are both on the same line, they are fused together, so to speak. To be independent, I guess they should have their respective lines.

In Backlight, in the MASTHEAD section, I have added a logo image that is precisely image #6.
Backlight should be generating the image. But if I remove it from the CSS, it’s gone!


#5

I have now added a secondary Masthead logo image, and I succeeded in separating the logo from the nameplate.
I still don’t know why Backlight won’t generate the primary masthead logo image. Could it be the CSS?

#6

Read that link I posted to W3Schools.

in their example, the urls to the images are separated by a comma
And the background positions are separated by a comma. The first position corresponds to the first image

#7

Backlight does not generate image logos, you need to provide those files.
The secondary masthead appears when the Visibility conditions you set with the image are met:

image

#8

It looks better, now.

I removed all mention of image #31 in the CSS, while creating a secondary masthead logo-image in Backlight, using image #31.

Not perfect, but looks better.

For now.

Thanks Rod

#9

I guess I should have left “well enough” alone;

trying to place the logo on the Mobile, I fiddle around with Backlight and CSS and came up with: no Logo on the Mobile and on the monitor, it’s way on the left, on the edge of the page!

In Backlight, I have:
Primary Masthead Location :Disabled
Visibility: Mobile
The logo image location has been indicated correctly.
The CSS for this is:

.top-pallet-logo {
background-image: url(“https://pideja.ca/backlight/designer/page/image/6”);
background-repeat: no-repeat;
background-position: 30px, 95px;
height: 38px;
width: 100%;
}

li.top-pallet-logo a {
display: block;
height: 100%;
width: 100%;
}

Tweaking either yields no change.

Any ideas?

#10

UPDATE: out of ideas and discouraged, I commented out the whole @media query code. All of it!

Well, low-and-behold, it looks pretty good.

There is one issue that lingers: the logo is still on the extreme left. And I still can’t find it in the inspector. Could this be solved by Backlight, sans CSS code?

#11

It’s all about CSS Specificity. Using !important you can overwrite the margin settings.

    background-image: url(https://pideja.ca/backlight/designer/page/image/6);
    background-repeat: no-repeat, no-repeat;
    background-position: 7% 15% center;
    height: 48px;
    margin-left: 20px !important;
    width: 100%;
}
#12

Thank you, Daniel, but there is one thing: looking at the page, the red MENU button and the LOGO do not react similarly when changing the viewport size. Why do you think this is?

I’d like that both buttons react the same way.

#13

what do you mean by “react differently”?

#14

The issue you see is that the menu button and your logo are not part of the same div. So you have to apply the css code separately. I guess with some javascript code, you could move the menu button, but that would be yet another thing that complicates your site.

image
image900×614 62.7 KB

#15

Thank you for this, Daniel.

One last thing about that top pallet: I put the name plate in the secondary Masthead in Backlight. Might not have been the greatest idea bacause now, the name has disappeared on the monitor and on the mobile, you have to “pull” down the page to see it.
Would it be better to put it in:

.top-pallet-title {
background-repeat: no-repeat,
no-repeat;
background-position: 50% center;
height: 48px;
width: 100%;
}

li.top-pallet-title a {
display: block;
height: 75%;
width: 75%;
}

#16

In Backlight, whether I indicate an image or not in the TOP-PAGE TITLE or the PRIMARY MASTHEAD has no effect! My name-plate only appears if I turn on “add a logo” in the SECONDARY MASTHEAD and then only in the header, not in the top pallet.

I sort of like this, but would prefer my name be in the Top pallet.

#17

Did you look at using pallet_top_title() phplugins function? Or are you already using it?

	// Below, the default markup for the title. The LI wrapping element is mandatory;
	// replace the inner HTML as you see fit. Retain the "masthead_pallet_top" class and styling,
	// or assign a new class, with styling defined in custom CSS.
	// Take note, the top pallet height is a 48px fixed value.
	echo '

	<li class="masthead_pallet_top">
		<h1><a href="/">Your Site Title</a></h1>
	</li>

	';
	return false;
}