I've noticed that in SMF 2.0 the main menu is #topnav and the admin menu is .dropmenu. But in 2.1.x they are both .dropmenu. I would like to make the menu's different colors, etc. My thinking would be to add .dropmenu to the admin.css file but I'm pretty sure I'd be wrong about it. LOL

How would I go about doing that?

Like a different color for each button on the main menu.

Well, not quite but something like that. The original theme has a different color for the main menu. The admin menu uses a slightly different color for that menu and the active one is even yet another similar color. To make matters worse, (or different, lol) the UL for the main menu is completely different from the admin one!

Here's the main menu showing the UL dropdown:

You cannot view this attachment. 

And here's the admin menu and dropdown:

You cannot view this attachment.

index.css on line 921 has a background attribute that will change the menu color.

.dropmenu li:hover li a, .dropmenu li li

Both the main menu & the admin menu are in index.css. 

In addition to ~921, look ~750-780 for the admin menu.

Also look at ~3950+.  Note that the same color may be treated with a dark gradient, making it look like a darker color.

Thanks guys. I'll check it out after I eat and take a nap. LOL

As usual, I assumed I was looking at it the wrong way. Such is the life of us left-handers. LMAO

If you want 'em to use the same color, use a variable...  That way, you can make all the changes in one place.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Short version: Declare the variable near the top of your .css.  It's common to stuff them in :root so they're universal:
:root {
  --menu_bg_color: "#fcdfa3";
  --font_color: "#633896";
  --border_color: "#6d386c";
}
Then you use 'em like this:
/* the active one */
.button.active {
    background: var(--menu_bg_color);
    color: var(--font_color);
    font-weight: bold;
    border: 1px solid var(--border_color);
    text-shadow: 0 0 1px #000;
}

Quote from: Bigguy on Sep 03, 2022, 11:08 AMindex.css on line 921 has a background attribute that will change the menu color.

.dropmenu li:hover li a, .dropmenu li li

Quote from: shawnb61 on Sep 03, 2022, 11:42 AMBoth the main menu & the admin menu are in index.css. 

In addition to ~921, look ~750-780 for the admin menu.

Also look at ~3950+.  Note that the same color may be treated with a dark gradient, making it look like a darker color.

Guys, I've officially have lost my marbles! I must've been really tired and hungry and rushing to get it done and just wasn't thinking. I actually knew those things. LOL

Quote from: shawnb61 on Sep 03, 2022, 12:40 PMIf you want 'em to use the same color, use a variable...  That way, you can make all the changes in one place.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Short version: Declare the variable near the top of your .css.  It's common to stuff them in :root so they're universal:

Code Select Expand

:root {
  --menu_bg_color: "#fcdfa3";
  --font_color: "#633896";
  --border_color: "#6d386c";
}
Then you use 'em like this:

Code Select Expand

/* the active one */
.button.active {
    background: var(--menu_bg_color);
    color: var(--font_color);
    font-weight: bold;
    border: 1px solid var(--border_color);
    text-shadow: 0 0 1px #000;
}

I saw a page about a month or two ago explaining something similar. I forget where but probably have it bookmarked somewhere. Thanks, again.

Ok, something is very wrong because no matter what line I change the main and admin menus all change.

Is your cache on or did you minify files or anything.

I turned off the minify when I started the theme and first built the test site. I always leave it off for all of my sites so I don't forget to turn it off or on. LOL

But even if I had the cache on it shouldn't change it for all of them. It would just not show any change at all.

EDIT: Yeah, something is not right. Maybe I've deleted/edited something I should not have or something...

IIRC, at least one of those had no bg color specified, so it uses a default...

Consider adding an explicit background-color ~760, ~2863 for popup_heading.

Also experiment with 3960+...   Note that background-image overrides the background color.

Sorry, been very busy lately and didn't have time for it.

Btw, I think I may have deleted something by mistake or made a bad edit that is causing this.