Page 1 of 1

Highlighting in menu

Posted: 11 Dec 2020, 04:29
by Dane
Hi!

How can I configure it to have a hover effect in the menu? I would like to display the menu item in a lighter font when hovering the mouse over it. 

And can it also be set that the active menu is also displayed brighter? So when I open the contact form, that it is also displayed brighter in the menu?
2020-12-11 10_23_13-Galerie.jpg
2020-12-11 10_23_13-Galerie.jpg (18.47 KiB) Viewed 11377 times
Thank you!

Re: Highlighting in menu

Posted: 11 Dec 2020, 05:27
by mjau-mjau
Dane wrote:How can I configure it to have a hover effect in the menu? I would like to display the menu item in a lighter font when hovering the mouse over it. 
"Lighter" you mean lighter color? In X3, there are not settings for menu hover effects, but it can be done with Custom CSS (Settings > Custom > Custom CSS). If the requests are feasible and uncomplicated, I can offer custom CSS solutions here in the forums on request.
Dane wrote:And can it also be set that the active menu is also displayed brighter? So when I open the contact form, that it is also displayed brighter in the menu?
With custom CSS yes. X3 already have "active" classes for active menu items, but they are obscured in your case because you have selected the "filled" background for the topbar (which contains the menu). With default "clear" style, it would look like this for selected items:
Image

You could for example add this to Settings > Custom > Custom CSS:
Code
.menu > li > .active {
  background: #222 !important;
  color: white;
  font-weight: bolder;
}
If you want to change color on hover also:
Code
.menu > li > a:hover {
  color: white !important;
}

Re: Highlighting in menu

Posted: 11 Dec 2020, 06:38
by Dane
Hi Karl! Thank you, the first code is perfect, i like this. But on one menu pount, it dont work. On "Über mich" it has no function, but in the other menu points it works. But is this normal that the highlight comes only up when the mouse left the area of the menu?

The second code for highlightning in white doest work. I dont know why. 
2020-12-11 12_36_48-X3 Panel.jpg
2020-12-11 12_36_48-X3 Panel.jpg (21.26 KiB) Viewed 11371 times

Re: Highlighting in menu

Posted: 12 Dec 2020, 00:21
by mjau-mjau
Dane wrote:But on one menu pount, it dont work. On "Über mich" it has no function, but in the other menu points it works.
This looks like a bug. Your URL contains special encoded characters (/Über-mich/ becomes /%C3%9Cber-mich/), which is blocking X3 from targeting the "active" menu item. I will try to solve it in next X3 release in a few weeks!
Dane wrote:But is this normal that the highlight comes only up when the mouse left the area of the menu?
"normal" probably not, but there are existing :hover effects from the X3 skin, and there are styles for both "active" state and "hover" state. With custom CSS styles overriding existing styles, these are issues you will run into. You can try this to make sure custom styles are prioritized:
Code
body[class*="topbar"] .menu>li>a:hover {
  color: white !important;
}
body[class*="topbar"] .menu>li>a.active {
  background: #222 !important;
  color: white;
  font-weight: bolder;
}
Dane wrote:The second code for highlightning in white doest work. I dont know why.
The above should resolve that also. X3 CSS styles are complex, because they have to adjust to the specific skin and layout, and under special circumstances when "intro" plugins are used. Then, these styles need to be overridden by custom CSS.

I believe this will be much easier in a future version of X3.

Re: Highlighting in menu

Posted: 12 Dec 2020, 11:05
by Dane
Hi Karl,

thank you, that works fine for me. I hope you can fix the bug in the next update. I am looking forward to it!

How can i chance the size of the font in the gallery by CSS? I want to make the titel a little bit smaler, and the desciption aa little bit larger. 
2020-12-12 17_06_31-Window.jpg
2020-12-12 17_06_31-Window.jpg (212.18 KiB) Viewed 11365 times

Re: Highlighting in menu

Posted: 13 Dec 2020, 01:26
by mjau-mjau
Dane wrote:I hope you can fix the bug in the next update. I am looking forward to it!
It's fixed already in the new release, which will be out within a couple of weeks.
Dane wrote:How can i chance the size of the font in the gallery by CSS? I want to make the titel a little bit smaler, and the desciption aa little bit larger.
There is already a page setting > gallery > captions > title size, but it only affects the title:
Image
It's a bit clumsy overriding font sizes per CSS, as you are also forcing font sizes on mobile devices. Custom overrides will apply for all galleries/layouts, and will also block the setting above. Here is an example of custom CSS:
Code
.images .title {
  font-size: 1.5rem !important;
}
.images a p {
  font-size: 1rem !important;
}
It will be much easier to custom style X3 gallery in a future version using CSS variables. Currently, it is a bit clumsy, and risks causing unwanted side-effects.

Re: Highlighting in menu

Posted: 13 Dec 2020, 08:16
by Dane
Thank you so much. That helped. I have thus made the title a little smaller.To avoid problems, I did not change anything in the CSS.

Re: Highlighting in menu

Posted: 04 Jan 2021, 05:17
by mjau-mjau
mjau-mjau wrote:This looks like a bug. Your URL contains special encoded characters (/Über-mich/ becomes /%C3%9Cber-mich/), which is blocking X3 from targeting the "active" menu item. I will try to solve it in next X3 release in a few weeks!
This was resolved in X3.30.0 / forum
photo.gallery/blog/photo-gallery-x3-30-popup/

Re: Highlighting in menu

Posted: 04 Jan 2021, 05:45
by Dane
Thank you! I have found a workaround:

https://www.linsenschuss.de/ueber-mich/

Umlauts like Ü, Ö, Ä can also be rewritten like e.g. for Ü also Ue

But its good to know that this is fixed.