How to set image in the top menu bar

Help / Discuss
1

Hi All,

I would like to set image as background of top menu bar (as attached image. I am not a developer and newbie also.

Could any one help me?
Img bgr

Appreciate for any helps
Thanks

2

Hello, yes it possible. To perform it, you need to find the CSS selector which is responsible for this and overwrite it, by writing custom Skin Extension . Which you shall apply for entire Wiki or on root XWiki page “XWiki.WebHome”.

The CSS rule will look like this:

[css selector] {
    background-image: url("[path_to_image]");
}

Note, that search, notification, avatar, and drawer are buttons. That’s why after applying a custom background-image or background-color when you hover those buttons the color will change to blue (default). Then you shall also overwrite extra CSS for that.

Which class or element is responsible for background, you can find by inspecting element in devtools or looking directly into GitHub code of xwiki-platform.

3

Could you let me know which is [css selector] please?

Thanks and appreciated

4

Here what I’ve done to my instance

image

with this CSS stylesheet

.container-fluid {
  background-image: url("https://images.unsplash.com/photo-1610730260505-0b9ed7f06293?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmljZSUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60");
}

#globalsearch .btn[aria-expanded='false'] {
  background-image: url("https://images.unsplash.com/photo-1610730260505-0b9ed7f06293?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmljZSUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60");
}

#tmNotifications>button {
  background-image: url("https://images.unsplash.com/photo-1610730260505-0b9ed7f06293?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bmljZSUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=600&q=60");
}

Note, as I mentioned above, if I press on search button to activate search the blue background around button will be displayed. Also, you can use the internal URL path, if the image is located in your XWiki permanent folder.

Hope, this helps you.

1 Like
5

Wow
Amazing support. Thank you very much for your support

Thanks
John