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;
}
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!
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.
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!
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?
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
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:
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:
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?
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?
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.
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:
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.
Did you look at using pallet_top_title() phplugins function? Or are you already using it?
function pallet_top_title() {
// 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;
}
/* pallet top logo*/
function pallet_top_title()
{
echo '
<li class="toppallet-logo"><a href="https://pideja.ca/"></a></li>
';
return false;
}
} ?>
Should I insert the code you suggest just below the <li class= line?
And that reference, “https://pideja.ca”, should I replace it with the url leading to the image I have stored in Backlight? That, would be: *“https://pideja.ca/backlight/designer/page/image/31”
I just did it and now the Logo on the left is gone and no change on the nameplate!
So, I returned the PHP code as it was and still no LOGO on the left and no change in the nameplate.
I would gladly settle for the LOGO on the left with no change in the nameplate…
What I find strange is that the PHP code has been in use for some time without a hitch.
I added the lines, as suggested, to no avail, save for that disappearing logo.
So, I removed those lines, but the logo is still missing.
I looked at the sample file, but I can’t find what’s the problem.
My PHP is “cleaned” of all the commented lines but, unless something escapes me, probably.
