Image (logo) in top pallet

[Pideja]

I already have my nameplate set as a background in the Masthead that is in the top pallet.
/nameplate as background image in top pallet------------------------------------------/
.top-pallet-logo {
background-image: url(“https://pideja.ca/backlight/designer/page/image/27”);
background-repeat: no-repeat, no-repeat;
background-position: center center;
height: 48px;
width: 100%;
}

li.top-pallet-logo a {
display: block;
height: 75%;
width: 75%;
}
I would now like to have an image (logo) on the left side of the top pallet, much like the MENU button on the right side.
I tried thru Backlight at MASTHEAD/Add a Logo Image.
The selected image simply won’t show up!
In previous versions of the site, the logo was inserted along with the nameplate, both of them as background images in the top pallet.

But this sort of “linked” the images together with obvious drawbacks. The right-side logo being “linked” to the nameplate does not respond correctly when changing the page size.
pideja.ca

[rod_barbee]

You’re using phplugins to replace the pallet top title, correct? And it looks like the Primary Masthead is disabled? If so, it’s no wonder why the logo image is not appearing. That needs the Primary Masthead to be enabled.

You’ll probably need to work within the pallet_top_title hook to add the logo image. Maybe add another <li> item before <li class"top-pallet-logo">?

Try giving it a class name and in your custom css add a background image just like you did for the top-pallet-logo and try floating it to the left.

[Pideja]

I added ( I think ) a class “top-pallet-brand” in the php file:

and wrote in the CSS file:

I realize that there are two image #6 but this is a test and I hoped to see two logos but evidently, there is a mistake somewhere.

[rod_barbee]

try clearing browser cache. I’m seeing your logo on the left, menu on the right, and title logo in the middle

[Pideja]

If I remove image #6 from the “top-pallet-logo” CSS and only leave it in the “top-pallet-brand” CSS, the logo does not display and the title moves somewhat to the left.

[Pideja]

As a trial, I inverted the images: image #27 (the name plate) is now in the .top-pallet-brand class and the image #6 (the logo) is in the .top-pallet-logo class. As you can see, the logo now appears but the name plate is gone.

[rod_barbee]

there is currently no list item with the class “top-pallet-brand” in your code.

It seemed to be working as expected earlier (at least on my iPad). Why did you change it?

[Pideja]

This time, I created a class “top-pallet-title” that should control the nameplate or title to go with the class “top-pallet-logo” controlling the logo. For clarity.
Wrote the CSS accordingly. Now, I get a top pallet twice as big! It looks as if the title is on a separate plane from the logo and menu button.

The php:

[rod_barbee]

It looks fine to me, try clearing browser cache.

[Pideja]

It looks like that at full width (1920x1080) but as soon as you change viewport size, the elements (logo, title and menu button) do not react as a unit. Rather the title & the menu button react as they should in a responsive fashion, but not the logo. It’s as if the logo was at a fixed position until you get to the breakpoints and then it assumes an unexpected position.
Just to remind me, does the CSS script override Backlight controls for the Masthead? It sure looks like that because most of the settings I change in Backlight don’t seem to affect the Masthead at all.

[rod_barbee]

custom css will override any backlight css unless the backlight css is more specific.

Looks like you may need to adjust the mobile breakpoint.Try looking at what’s happening to the top pallet width as the viewport gets narrower and narrower.

There’s a point where the spacing to the left and right of the menu and logo doesn’t match. There’s 54px of padding-right applied to the top pallet somewhere in the template.

[rod_barbee]

Actually, that’s not all of it. There’s also 200px of margin-right in your custom css for .page__toggle__buttons label

Took me a while to find that. Since you’ve disabled the mouse right-click option, it’s more difficult to probe the page.

[Pideja]

Sorry about that right-click thing but, call me paranoid, I was thinking security.

But I just checked and in the section marked “.page_toggle_buttons label” I don’t see that 200px margin:

Sorry, I just found it but it’s not in with the other “.page_toggle_buttons label” illustrated above. Could this cause a problem? Why would there be two “.page_toggle_buttons label” sections?

[Pideja]

As I mentioned in my edited comment above, it seems I have multiple entries of “.page_toggle_buttons label”…it seems that you are looking at an alternate CSS file used for testing purposes. Sorry about that. I changed over to the regular CSS file (pideja.css) late last night, hence the confusion.

[rod_barbee]

@Pideja

Why would there be two “.page_toggle_buttons label” sections?

I’d ask the person who wrote the code

there seems to be a lot of duplicate selectors in the custom css.

[Pideja]

You are right. I’ll ask myself why and hope to find a solution.

[rod_barbee]

I think one issue you’re going to have is that Menu button. That .page_toggle_buttons item is outside of the top pallet and is placed using positioning. You can add margin-right to it but that will only look good for certain widths. Once the page starts narrowing towards tablet size, that 200px makes things uneven.

Maybe think about adding the logo the same way that the menu button is placed but use left positioning instead of right. That would mean taking it out of the top pallet title area.

If you want the left logo and the menu button to have some “margin” to the left and right, respectively, try using percent in the position:

top: 0
left: 25%;

[Pideja]

As a test, I am using the pideja-test-MENU.css file and I commented most of the lines (22 to 98) relating to the top pallet and masthead. This section contains the code for the logo image (#6) and the title image (#27). I only kept active the few lines that seem to display the MENU button.
I then went into Backlight and tried alternatively to display the logo and/or the title image in Design Template/Masthead/Primary Masthead/Title Logo and “add a logo image” + “add a background image”
After clearing both the template cache and the browser cache, the result is: no title or logo are displayed!
There seem to be a lot of lines in there. I’m sure I should “prune” the code a bit.

/*------------------------------- Top pallet logo + title--------------------------------------------------------*/
/*.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/27");
background-repeat : no-repeat, no-repeat;
background-position : 150px, center;
height : 48px;
width : 100%;
}
li.top-pallet-logo a {
display : block;
height : 75%;
width : 75%;
}*/
/*-------------------------------- MENU button --------------------------------------------------------------*/
/*.page__toggle__buttons > label:nth-child(1) > p:nth-child(1) {
margin-left : 0px;
margin-right: 100px;
}*/
/*.page__toggle__buttons > label:nth-child(1) {
margin-left : 0;
margin-right: 100px;
}*/
/*----------------------------------MENU button position-------------------------------------------------------*/
.page__toggle__buttons label {
content : 'Menu';
background : #9F191E;
display : inline;
position : absolute;
right : 15%;
top : 0px;
}
/*-----------------------------------MENU button no apparent use -----------------------------------------------*/
.page__toggle__buttons label {
margin-right : 1px;
overflow : hidden;
background-color : #9F191E;
}
/*------------------------------------MENU label text-----------------------------------------------------------*/
.page__toggle__buttons label p {
cursor : pointer;
display : block;
font-size : 1rem;
font-weight : 500;
height : 48px;
line-height : 2.7em;
min-width : 48px;
position : absolute;
top : 5px;
left : 1px;
text-align : center;
}
/*--------------------------------------------------------------------------------------------------------------*/
.page__toggle__buttons label {
margin-right : 1px;
overflow : hidden;
background-color : #9F191E;
}
.page__toggle__buttons label a {
color : #FFF;
text-decoration : none;
font-size : 17px;
display : block;
padding : 14px 16px;
}
.page__toggle__buttons label a:hover {
background-color : #ddd;
color : #000;
}
.active {
background-color : #4CAF50;
color : #FFF;
}
/*--------------------------------------------------------------------------------------------------------------*/

[rod_barbee]

@Pideja

I then went into Backlight and tried alternatively to display the logo and/or the title image in Design Template/Masthead/Primary Masthead/Title Logo and “add a logo image” + “add a background image”
After clearing both the template cache and the browser cache, the result is: no title or logo are displayed!

As I mentioned earlier, the masthead must be enabled in the template to add a logo image or a background image. If yours is disabled, those images will not appear.

[Pideja]

I understand. The Primary Masthead IS in the Header. I now have disabled all the add logo image and add background image in Backlight and actvated the CSS Top Pallet Logo section. Now, I have a logo and a title but the Top Pallet is double in size from 48px (as indicated in the CSS) to 96px!