Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
Dane
Experienced
Topic Author
Posts: 88
Joined: 04 Dec 2020, 15:05

Highlighting in menu

11 Dec 2020, 04:29

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 3022 times
Thank you!
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12880
Joined: 30 Sep 2006, 03:37

Re: Highlighting in menu

11 Dec 2020, 05:27

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;
}
 
User avatar
Dane
Experienced
Topic Author
Posts: 88
Joined: 04 Dec 2020, 15:05

Re: Highlighting in menu

11 Dec 2020, 06:38

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 3016 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12880
Joined: 30 Sep 2006, 03:37

Re: Highlighting in menu

12 Dec 2020, 00:21

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.
 
User avatar
Dane
Experienced
Topic Author
Posts: 88
Joined: 04 Dec 2020, 15:05

Re: Highlighting in menu

12 Dec 2020, 11:05

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 3010 times
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12880
Joined: 30 Sep 2006, 03:37

Re: Highlighting in menu

13 Dec 2020, 01:26

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.
 
User avatar
Dane
Experienced
Topic Author
Posts: 88
Joined: 04 Dec 2020, 15:05

Re: Highlighting in menu

13 Dec 2020, 08:16

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.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 12880
Joined: 30 Sep 2006, 03:37

Re: Highlighting in menu

04 Jan 2021, 05:17

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/
 
User avatar
Dane
Experienced
Topic Author
Posts: 88
Joined: 04 Dec 2020, 15:05

Re: Highlighting in menu

04 Jan 2021, 05:45

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.