Search…

X3 Photo Gallery Support Forums

Search…
 
trpgforum
Experienced
Topic Author
Posts: 105
Joined: 05 Jul 2019, 03:40

Formating a menu item with CSS

10 Jul 2023, 03:51

Hello Karl

Is there a way that I can use CSS to display the AUSSTELLUNG menu item on my website https://www.thomas-ruf.ch/ in a different color?
That would be very helpful, as this menu item is a time-limited event that should be immediately noticeable in the menu.

Best regards from Basel
Thomas
THOMAS RUF PHOTOGRAPHY
Landscape - Nature - Macro
4132 Muttenz
Switzerland
www.thomas-ruf.ch
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13998
Joined: 30 Sep 2006, 03:37

Re: Formating a menu item with CSS

10 Jul 2023, 06:08

There are a few ways, but the simplest approach is to select and style the element by href. Settings > Custom CSS:
Code
[href="/ausstellung/"] {
  background: var(--primary-color);
  color: white;
  font-weight: bold;
}
This requires that you don't change the url (folder name). If you are going to change the name, you would need to use a slightly more complicated method, pre-assigning a custom class.

Image
 
trpgforum
Experienced
Topic Author
Posts: 105
Joined: 05 Jul 2019, 03:40

Re: Formating a menu item with CSS

10 Jul 2023, 08:16

Many thanks Karl, just great, your support!
I wish you a nice week!

Best regards
Thomas
THOMAS RUF PHOTOGRAPHY
Landscape - Nature - Macro
4132 Muttenz
Switzerland
www.thomas-ruf.ch
 
metallissimus
Experienced
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Formating a menu item with CSS

11 Jul 2023, 04:40

mjau-mjau wrote:
Code
[href="/ausstellung/"] {
  background: var(--primary-color);
  color: white;
  font-weight: bold;
}
I see you used a CSS variable here. Where can I find a an overview of which variables exist in X3?
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13998
Joined: 30 Sep 2006, 03:37

Re: Formating a menu item with CSS

11 Jul 2023, 06:08

metallissimus wrote: I see you used a CSS variable here. Where can I find a an overview of which variables exist in X3?
Except for --primary-color (which is assigned from Settings>Style anyway), CSS variables aren't really used in X3, because browser support was not adequate when I started the project. Now of course, CSS variables are supported by all modern browsers, and you can be sure I would use CSS vars extensively in X4, allowing easy CSS adjustments (unlike now, where you may need to search out complex selector combinations to re-style elements).
 
metallissimus
Experienced
Posts: 331
Joined: 17 Oct 2019, 06:54

Re: Formating a menu item with CSS

11 Jul 2023, 06:20

Great, looking forward to it!
www.danielbollinger.de – corporate photography
hochzeiten.danielbollinger.de – wedding photography