Simple Machines Community Forum

Customizing SMF => SMF Coding Discussion => Topic started by: Sir Osis of Liver on June 27, 2022, 01:29:59 PM

Title: 2.0 css glitch
Post by: Sir Osis of Liver on June 27, 2022, 01:29:59 PM
Just noticed this, apparently it's been in the theme for a while.  Dropmenus display behind cat bars only on some pages, others are fine.  All use same css for dropmenus and cat bars, all cat bars are in <h3 class="catbg">...</h3>, inspect is no help.  Can't find what's causing it.

em_ss1.jpg

em_ss2.jpg

em_ss3.jpg   
Title: Re: 2.0 css glitch
Post by: Sir Osis of Liver on June 27, 2022, 02:03:26 PM
Ok, problem seems to be here:


.dropmenu {
box-shadow:0 2px 2px rgba(0,0,0, .5);
display:inline-block;
width:100%;
padding:0;
border: 1px #000 solid;
opacity: 0.7;
}


If I remove opacity: 0.7; dropmenu displays on top of catbg on all pages.  If I replace it with this:


.dropmenu {
box-shadow:0 2px 2px rgba(0,0,0, .5);
display:inline-block;
width:100%;
padding:0;
border: 1px #000 solid;
background: rgba(238,238,238,0.7);
}


  same problem.  No idea why it only happens on some pages, not others.
Title: Re: 2.0 css glitch
Post by: Sir Osis of Liver on June 27, 2022, 11:00:43 PM
Interestingly (or not, apparently :P ), does the same thing in Curve.
Title: Re: 2.0 css glitch
Post by: TwitchisMental on June 28, 2022, 02:22:48 PM
Quote from: Sir Osis of Liver on June 27, 2022, 02:03:26 PMOk, problem seems to be here:


.dropmenu {
box-shadow:0 2px 2px rgba(0,0,0, .5);
display:inline-block;
width:100%;
padding:0;
border: 1px #000 solid;
opacity: 0.7;
}


If I remove opacity: 0.7; dropmenu displays on top of catbg on all pages.  If I replace it with this:


.dropmenu {
box-shadow:0 2px 2px rgba(0,0,0, .5);
display:inline-block;
width:100%;
padding:0;
border: 1px #000 solid;
background: rgba(238,238,238,0.7);
}


  same problem.  No idea why it only happens on some pages, not others.

If I am understanding you correctly, the solution would be to put opacity: 1; at the bottom and that will solve the issue.

For curiosity sake I made a local smf 2.0 install, but I am not getting this issue on the default curve theme. This may mean that your default theme has the opacity set in its css.
Title: Re: 2.0 css glitch
Post by: Dhayzon on June 28, 2022, 05:20:16 PM
z-index, and positions  it's the key
Title: Re: 2.0 css glitch
Post by: Sir Osis of Liver on June 28, 2022, 06:12:59 PM
Tried several variations of z-index, they're ignored.

Squeaky clean install, new database -

drop_ss1.jpg


 .dropmenu
{
padding: 0 0.5em;
opacity: 0.7;
}

Title: Re: 2.0 css glitch
Post by: Antechinus on June 28, 2022, 06:22:04 PM
Ok, an obvious question: why do you want to use opacity there anyway?
Title: Re: 2.0 css glitch
Post by: Sir Osis of Liver on June 28, 2022, 06:34:12 PM
Because it looks nice.  It's a custom transparent theme.
Title: Re: 2.0 css glitch
Post by: Antechinus on June 28, 2022, 06:41:25 PM
The .dropmenu class is the ul that holds everything else. It's not actually visible. The visible bits are the anchors (.dropmenu > li > a) and the child ul's (.dropmenu ul). Try putting the opacity on those instead.
Title: Re: 2.0 css glitch
Post by: Sir Osis of Liver on June 28, 2022, 06:57:49 PM
Hmm, well this works in core Curve -


.dropmenu li ul
{
z-index: 90;
display: none;
position: absolute;
width: 19.2em;
font-weight: normal;
border-bottom: 1px solid #999;
background: url(../images/theme/menu_gfx.png) 0 -130px no-repeat;
padding: 7px 0 0 0;
opacity: 0.7;
}


But if I add this to theme css -


.dropmenu li ul {
opacity: 0.7;
}


 it doesn't display opacity.  Not a big deal, only admins will see main menu so it's not important, just annoying.
Title: Re: 2.0 css glitch
Post by: Antechinus on June 28, 2022, 07:48:00 PM
In that case the declaration in your theme's CSS is being overridden by something else, which should be visible in the document inspector.
Title: Re: 2.0 css glitch
Post by: Sir Osis of Liver on June 29, 2022, 12:57:01 PM
Inspector is not showing me anything wrong (or I'm not seeing it).  Opacity is active in dropmenu, and is working.  There's nothing in catbg that should cause menu to drop behind it.  You can try it in Curve, does same thing.
Title: Re: 2.0 css glitch
Post by: Sir Osis of Liver on June 29, 2022, 01:36:13 PM
Ant, where is your code for placing boards in columns on board index?
Title: Re: 2.0 css glitch
Post by: Antechinus on June 29, 2022, 05:07:20 PM
/* ------------------ */
/* SMF site-specific. */
#board_12_children > p {
position: relative;
padding-top: 2em;
column-count: 5;
}
#board_12_children > p > strong {
position: absolute;
top: 0;
}
#board_12_children > p > span {
display: block;
overflow: hidden;
padding: 2px 8px 2px 0;
white-space: nowrap;
text-overflow: ellipsis;
}
#board_12_children > p > span:nth-child(4) {
display: none;
}
#board_12_children span::after {
content: '';
}
/* ------------------------------ */
@media screen and (max-width: 1024px) {
#board_12_children > p {
column-count: 3;
}
}
/* ------------------------------ */
@media screen and (max-width: 720px) {
#board_12_children > p {
column-count: 2;
}
}

Obviously you can use that for all child boards, by removing the board ID and substituting the .children class, or you can tweak it for specific boards by using whatever ID's you like.
Title: Re: 2.0 css glitch
Post by: Sir Osis of Liver on June 29, 2022, 10:18:52 PM
Don't need it for child boards.  I've done a workaround with TCB mod but it screws up linktree.  Would like to make all children parent boards and display them in columns.  Thought you had posted code for that.


I hacked the linktree. (https://thekrashsite.com/pics/fp.gif)