Center Logo in Running Head/Background Image

Backlight 4 & 5 Support
#1

Hi,

in Pangolin there is an option to center the logo image in Masthead.
I cannot find a similar option in Kookaburra.

How can I center the logo in Kookaburra?

Another question? Is it possible to define a background image in Kookaburra?

Best,
Joe

#2

Hi Joe,

You can add a background image to the Header and an image to the Running Head.
Adding a background image elsewhere looks like it would require custom css.
If you could be more specific, someone here could probably come up with the css.

centering a logo probably needs custom css as well.
A link to a page with an uncentered logo would help.

#3

Thanks Rod,

Please look at Joes Essay - Augenblicke.

I want the logo and the background of the blog (Kookaburra) to look like the rest of the page (pangolin).

#4

@Matthew will need to chime in. Kookaburra is a lot different than Pangolin. I’m pretty decent at figuring out css for Pangolin, but Kookaburra uses the css flexbox layout and I’m not all that familiar with it.

as far as the page background image, I can inspect and copy the css from the Pangolin page and apply it to what looks to be the appropriate selector for Kookaburra.

It may not be an exact match, but this is what I found to work:

.page {
  background-attachment: scroll;
  background-image: url('/backlight/designer/page/image/3?v=36');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

Then you’d need to set backgrounds for other areas to transparent, which I believe will take more custom css. Like:

.running-head {
  background-color: transparent;
}

and

.main {
background: transparent;
}
#5

The running head isn’t mean to be used the way you’re using it, and you’ve made a bit of a mess of your mobile experience with whatever customizations you’ve done.

Screenshot 2024-03-08 at 17.01.43
Screenshot 2024-03-08 at 17.01.43800×1708 136 KB

For a header that large, you would be better off using the Header options in the template.

#6

Thanks Rod and Mat,

The css solutions works except one thing. How can I set a transparent background for the main navigation menu?

#7

try this:

@media screen and (min-width: 1025px) {
  .main-navigation > ul > li:not(.drop-item), .main-navigation > ul > li.drop-item + li.drop-trigger button {
    background-color: transparent;   
  }
}
#8

Great. Now I switched to Kookaburra :grinning:
Thanks for all the help.

Btw: Thanks for the Info about Wordpress selling user data. I´ll be switching to the backlight essay .

1 Like