Top pallet logo, title and menu

I’m back at, doing an audit, of sorts, of my site.

https://pideja.ca/

My main concern, for now, are the three buttons and title in the top pallet.
On the left is my logo, then there should be my name and on the right, the menu button.

  1. the LOGO should be at equal distance from the edge than the MENU button;
  2. the NAME should be centred and at the same level as the two buttons. See green box.

In Backlight: Top Pallet has height on desktop and mobile;
Masthead/ Top pallet titleis visible on desktop and mobile;
Primary Mastheadis disabled and Title/Logo has a logo image.
There is no name visible.
So, I cooked up some CSS:

.top-pallet-logo {
  background-image: url("https://pideja.ca/backlight/designer/page/image/6");
  background-repeat: no-repeat;
  background-position: 7% 15%;
  height: 48px;
  margin-left: 20px !important;
  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%;
}

The top-pallet-logo image is the same as stated in Backlight. Is this redundant?
Although there is a top-palette-title, it does not appear on the page.

Frankly, I know we’ve covered this a while ago. But it’s frustrating that most changes I make in Backlight or the CSS do not seem to work.

Update: this morning, I fire up the site and, what do you know? No logo and no name! Makes me want to holler…

This is why you’re not seeing the logo:

image

I think the error might be the space between url and the parentheses: url (
try url(

Thanks, Rod.
The title still is invisible, so I checked the corresponding CSS and everything seems ok.

When that is fixed, I’ll get back to the original project: aligning the logo, name and menu buttons.

The reason the name is not aligned is because it’s not in the top pallet, it’s in the main content > masthead-secondary > img: identity plate.

The Top Pallet Title is visible on both desktop and mobile;
the Main Masthead is now in the Header;
Same for Secondary Masthead.
Either header or main column, same result;
I removed the “add a logo image” and the Title generated by MASTHEAD/Identity (I think) appeared. It’s in the Secondary Masthead.
But, I still can’t get in the Top Pallet:

I am aware of this…Both in the TOP PALLET and in the MASTHEAD :slight_smile:

Capture d'écran_ 2025-11-27 à 11.18.25


But still, I can’t place the name plate in the Top Pallet.

I think you can have text in the top pallet title or a logo image.
There’s also the phplugins pallet_top_title hook that you might be able to use.

I use phplugins to put my logo in the top palette.

function pallet_top_title( ) { 
	echo '	<li style="display:none;" class="masthead_pallet_top">
		<a tabindex="-1" href="/"><img src="
https://danielleu.com/backlight/designer/page/image/7" alt="Daniel Leu Photography logo" height="30" width="190"></a>
	</li>';
    return false;		
}

I’ll have to look into the php angle, because I have no image indicated in Backlight. The title is the identity but I’m not sure if it’s the one displayed.
I have both the logo and the title in the CSS. I guess this would override anything in Backlight, no?

Speaking of php, I found that I already have this code in php:

function pallet_top_title()
    {
        echo '
        <li class="top-pallet-logo"><a href="https://pideja.ca/"></a></li>
       

  ';
        return false;
    }
} ?>

That will override anything you’ve set for top-pallet title in Backlight.
Have you thought of adding another list item that contains the text you need? That probably would require more css to place the list item text inline with rather than below the list item containing the logo.

Well, i’ve been at it for a few hours now…this the php code I’m using:


function pallet_top_title() {
    echo '	<li style="display:none;" class="masthead_pallet_top">
        <a tabindex="-1" href="/"><img src="https://pideja.ca/backlight/designer/page/image/31" alt="Pierre Desjardins logo" height="30" width="190"></a>
    </li>';
    return false;
}

function pallet_top_logo() {
    echo '<li class="top-pallet-logo"><a href="https://pideja.ca/"></a></li>';
}
}

But it doesn’t do anything…and I lost the logo!

pallet_top_logo is not a phplugins hook