QUICK NEWS

{NEW} - A new css video is up.

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

Video of the week


Internal Links

SMF Sites

Quick Info

See-Through Menus?

Started by Skhilled, May 16, 2022, 08:16 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Skhilled

I'm not sure what the heck I did but my menus seem to show "behind" menus lower than they are such as the main menu dropdown over the Admin menu. See the images...

You cannot view this attachment. You cannot view this attachment.

It's one of the weirdest things. LOL

Bigguy

You have to change or add a z-index in there to one of the menu's
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

Ah! I never knew what a z-index was. LMAO Thanks! :rgton

Bigguy

Hey, no problem at all. Glad I could help. :rgton
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

That was a bust...unless I was doing something wrong...again! LMAO

Bigguy

No, that should work. I have had that happen as well and that's how I fix it. By adding to editing the existing z-index code. The numbers for the z-index can go up to 100 or so as far as I know.

https://www.w3schools.com/cssref/pr_pos_z-index.asp
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

Ah! Now I know how it works and you've been holding out on me! It only works with the position or flex elements. And I thought you were my friend! LMAO

Bigguy

Lol, I was trying to be, lol. I've done a lot of editing in the past but haven't played with the menus in awhile. :emb
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

I'm a bit busy cooking today but I'll check it out tomorrow. :)

Bigguy

Quote from: Skhilled on May 17, 2022, 09:25 AMIt only works with the position or flex elements.
I was just thinking....you can change and separate things in SMF. I've had to do it a few times to get things right. I may not be explaining it right but I know what I'm sayin in my head, lol. Just thought I would put this out there.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

Yeah, I know. When a new version of SMF is released I create a modified version of the default with certain elements/styles separated to make things easier for updating the themes. I haven't don't it for 2.1.x yet cause I was anxious to get the theme done. Then I just use that to start with.

Skhilled

Yeahhhhh, fixed! I got smart and used a clean default index.css to compare it to the one in the theme. Something was commented out that should not have been.

#main_menu .popup_container, #genericmenu > .popup_container {
 
/* display: block;
position: relative; */
background: none;
margin: 0;
height: auto; /* In case anything fishy happens in the situations where this used make sure it stays still */
}

Skhilled

Ok, so it is not all of the way fixed. LOL The main menu is fixed but the admin menu still does it. >:(  Crap! I may have to start over just to make sure it is all fixed. :(

Bigguy

At least ya figured it out. :rgton
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

Only part of it. I've compared it over and over and still don't see what's wrong! :dontknow

Bigguy

Is the admin menus in a different css file :???
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

I've checked admin.css and there's no problem there.

Bigguy

I'll have to download a fresh copy of SMF and take a look in a bit.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Bigguy

How's this goin for ya :???
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

I was waiting for you to take a look...remember? LOL But I'll just go over to smf and ask over there.

Bigguy

Well, ask over there and I will download it today. I have been really busy with my business lately. Everyone seems to want windows washed this year. Sorry for not being around a whole lot.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

The problem seems to be with the main admin menus hiding behind the adm_submenus.

Bigguy

Out of curiosity....is there anything in the index.css file about admin menus. Around line 921 possibly. Just using the inspector in FF so the line # might be off.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Bigguy

Does this help at all for css for menus: (Line 894, index.css)

/* Levels 2 and 3 submenu wrapper. */
.dropmenu li ul, .top_menu {
    z-index: 90;
    position: absolute;
    display: none;
    min-width: 18.2em;
    padding: 0.5em;
    font-weight: normal;
    border: solid 1px #999;
    border-left: solid 1px #bbb;
    border-top: solid 1px #ccc;
    border-radius: 4px;
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
    background: #fff;
}
/* Level 2 link background. */
.dropmenu li li {
    margin: 0;
    padding: 0;
    width: 17em;
    font-size: 1em;
    border-radius: 3px;
    border: 1px solid transparent;
}
/* Necessary to allow highlighting of 1st level while hovering over submenu. */
.dropmenu li:hover li a, .dropmenu li li a {
    background: none;
    padding: 0 9px;
    color: #346;
    border: none;
    line-height: 2.2em;
}

.dropmenu li li a > img {
    vertical-align: middle;
}
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

#24
Quote from: Bigguy on May 28, 2022, 03:41 PMOut of curiosity....is there anything in the index.css file about admin menus. Around line 921 possibly. Just using the inspector in FF so the line # might be off.

There is a "#main_menu", "#genericmenu", and a "#adm_submenus" in a few locations.

EDIT: That code didn't help.

Skhilled

Ok, I've redone the theme from scratch cause I figured it would be faster to get it done than waiting for a fix. LMAO I think it's ready for release. 8)

https://docskillz.com/skins

Bigguy

The second category there were the "testing, testing testing" is should maybe have a bit more space between itself and the title of the cat but other than that it looks real good. :rgton
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

#27
Actually, it looked worse than that. I think it's a smf issue but not sure. It's one of the things I noticed when I first installed 2.1.2. There's a couple of other things that are slightly off but I fixed them so they lined up better.

EDIT: The other thing I forgot to mention is that the toggle up/down also does not line up correctly with the text and is quite hard to adjust it.

Skhilled


Bigguy

It's this bit here, I think it's to close together. Just my opinion though.

You cannot view this attachment.
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled

That's how smf designed it. How does it look now?

Bigguy

Quote from: Skhilled on Jun 03, 2022, 08:17 PMHow does it look now?
Alot better. Looks good. :rgton
"It's the American dream....cause ya have to be asleep to believe it." - George Carlin

Skhilled