Search…

X3 Photo Gallery Support Forums

Search…
 
mcrenz
Topic Author
Posts: 3
Joined: 08 Nov 2021, 13:22

How to change menu background color?

08 Nov 2021, 16:11

Hi Karl,
I used the twilight skin to create my website galery (migrating from koken) Then I changed the background color to a deep blue. Some parts of the menue are still black now, as same as the footer and the arrows background. How can I customise these parts of the page so they fit withthe rest of the pages? The site under construction is www.die-schreiner.org
Thank You
Martin - die schreiner GmbH - www.die-schreiner.com
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: How to change menu background color?

08 Nov 2021, 23:40

Hi Martin. Up front I would need to tell you that this isn't a simple procedure. X3 "skins" are made up of lots of colors, with many shades of the main color, and font colors made to work on top, all working together to create the skin. If you change a background-color, it does not affect all the other variations of the color that are designed specifically for the skin. For this to look good, you may need to customize many website elements by CSS, adding new color variations.

With that said, it is possible, and I can help, but I just wanted to let you know what you are getting into. As for the elements you mentioned, in the skins they are purposely given a variation of the skin's background color to give them a contrast to the rest of the page. You want the same blue color as your background? I can make some custom CSS.

In a future version, I was thinking of using CSS variables so it would be much easier to customize styles, but that's something for the future!
 
mcrenz
Topic Author
Posts: 3
Joined: 08 Nov 2021, 13:22

Re: How to change menu background color?

09 Nov 2021, 02:45

Hi Karl. I am aware that it will be a little bit complicated to change all these colors. But as our company colors are blue, I prefer to do this. If I know the css names and places to change or overwrite, I can then vary the colors slightly by myself and find the best looking ones. I would be very thankfull if you will help me. The background of the sidebar can be slightly darker than the background of the main screen.
Thank You.
Martin - die schreiner GmbH - www.die-schreiner.com
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: How to change menu background color?

09 Nov 2021, 04:58

Ok, so to get started, it seems you used the "background plugin" to set the blue background? If you are to re-style the website globally (all pages) with many elements, you might as well do everything from Settings > Custom > Custom CSS instead, first disabling the plugin.

Settings > Custom > Custom CSS:
Code
body, .sb-site-container {
  background-color: #000099;
}
.pagenav-fixed .pagenav-link {
  background-color: #000099;
}
.up-sidebar button {
  background-color: #000099;
}
.sidebar-right a, .sidebar-right li {
  background: none !important;
}
The last one will remove backgrounds entirely. It will be complicated to custom-color the menu, as it has shades of colors based on menu depth, menu open/closed, :hover, :active and variations for different screen sizes.

I'm guessing there will be more, because there are loads of elements with colors in variations of the selected skin. Just le me know! Personally, I would not use a strong background color like that for a website, as it's difficult to read and view in general. Under most circumstances, one would use company/branding colors for primary colors, on logos, buttons and headers, but on a simple light or dark background. It would be easier with X3 also.
 
mcrenz
Topic Author
Posts: 3
Joined: 08 Nov 2021, 13:22

Re: How to change menu background color?

09 Nov 2021, 06:29

I disabled all background plugins at the pages and at Settings > Plugins > Background and inserted the code at Settings > Custom > Custom CSS
The footer is now blue, the rest is still black...??
Martin - die schreiner GmbH - www.die-schreiner.com
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: How to change menu background color?

09 Nov 2021, 06:51

Where is the link to your website? I see some other website.

Perhaps better chat? You can use the chat icon bottom right of this page. I will be available in an hours time.