QUICK NEWS

{NEW} - A new css video is up.

{OLD} - New video courtesy of Skhilled, Thanks for posting it up.

Video of the moment:


Internal Links

SMF Sites

Quick Info

Menu Question

Started by Skhilled, Sep 03, 2022, 06:08 AM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

Skhilled

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?

Bigguy

Like a different color for each button on the main menu. :???
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

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.

Bigguy

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

.dropmenu li:hover li a, .dropmenu li li
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

shawnb61

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.

Skhilled

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

shawnb61

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;
}

Skhilled

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! :rflmao 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:
: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;
}

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

Skhilled

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

Bigguy

Is your cache on or did you minify files or anything.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

#10
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...

shawnb61

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.

Skhilled

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.