2.1 CSS

[Sir Osis of Liver]

Think I'll just go with margin-top: 100px.  Doesn't seem to break anything in mobile view.  The custom header pushes everything down the page, so with 100px margin it's actually higher than it is on forum only.  Don't want to mess with header code more than necessary, and I can do this with forum css.  The basic problem here is browser loads forum and header css, and tries to apply both to both, so there've been some conflicts.  Trying to minimize collateral damage.

[Sir Osis of Liver]

Ant's sidebars don't inherit css formatting from custom themes, it's always Curve2.  Would be nice if it did, save a lot of hunting and pecking.

[Antechinus]

Then stop ******ing about it and rewrite the CSS. That's what I did.

[Sir Osis of Liver]

Well, I fixed it for the theme I'm working on, but would have to repeat the process for every theme.  Is there any way to rewrite it so it's more global?  I'd imagine it would be difficult to do, as custom css varies quite a bit.

[Antechinus]

Well you could strip out all the eye candy, and just leave the structural stuff. Then it should pick most of the eye candy up from the theme in question.

ETA: One point though is that because it is a presentation override of the default drop menus, it will never automatically match any theme completely. For example, the sidebar is actually top level menu buttons + first level drop menus, re-styled to suit a sidebar look.

So if you take all the eye candy out, it will inevitably want to style the section headers like top level menu buttons, and the list of sections like drop menus. That's what it will pick up from any theme, because that's what it is as far as any theme knows.

So you will still have some work to do cleaning it all up. Best option is probably to strip out as much as you can, and comment the thing very heavily so you know exactly what each bit of CSS is doing. Then you can just copy in eye candy to suit the rest of the theme.

[Sir Osis of Liver]

Maybe will give it a try.  Other thing is, once you've installed sidebars everything else in ACP is superfluous or redundant.  But how do you fill up all that space?  Can sidebars be columnated?

[Antechinus]

Not sure what you mean there.

[Sir Osis of Liver]

Sidebars occupy around 25% left side, if you remove welcome message (not needed), smf news (nobody reads news), support info block (you get more in support & credits), and new cpanel style menu (nice idea, but it's offscreen and redundant), you end up with a lot of blank space.  Can sidebars be rearranged to fill it?

[Antechinus]

Ah. In that case you mean not bother making it a sidebar, and just display the first level drop menus all the time (with eye candy to suit). Which, yes, is very easy to do in principle. I haven't played with that idea yet, but it may have potential.

And there's no need to remove any default stuff. The drop menus display across the top anyway. You'd just be making them look a bit different.

[Sir Osis of Liver]

The dropmenus as they are don't display like the sidebars, you have to drop them to see what's in there.  Sidebars give you all the top level <li>s so you don't have to hunt around for them, that's what makes them easier to use.  There are five main categories, if you could put them two or three across it would consolidate everything into a compact arrangement and eliminate a lot of dead space.

[Arantor]

And you have to retool a LARGE amount of the admin panel to do that. It's not just presentational.

[Antechinus]

Yes I knew what you meant. My point is the sidebars ARE the drop menus. Just with different eye candy. So, sticking them in a row horizontally instead of vertically is very easy. Same with putting them in a grid of blocks. Still easy.

The catch is that depending on area, permissions, mods installed, etc, there will be different numbers of "buttons" and "drop menus", so a nifty "looks perfect with any content" arrangement is going to be pretty much impossible. There are going to be spaces left at the end of the last row sometimes.

[Antechinus]

And you have to retool a LARGE amount of the admin panel to do that. It's not just presentational.

He's just talking about frigging with the menus. I think he has been talked out of frigging with the rest (I hope so).

[Arantor]

Yes, just moving things between menus is a chronically bad idea and requires serious surgery to actually do.

[Antechinus]

I wasn't thinking of moving things between menus. As I understand it, he was saying that he likes the idea of arranging the five main sections of the sidebar (which are really just the five default admin buttons and their associated first level drops) and putting them in a row or grid across the top of the page (which is where they are by default) instead of floating them in a sidebar.

That's a pretty trivial presentation tweak.

[Sir Osis of Liver]

Yes, that's what I was thinking.  Would it be too difficult to accommodate additional first levels or blocks from mods?

[Antechinus]

No that would not be difficult as such, but see the caveat earlier: with varying numbers of first level "buttons" you aren't going to be able to guarantee a fully-filled grid all the time. For example, if you set it to three across and you have five sections, there will only be two in the second row.

[Sir Osis of Liver]

You could center two under three, but you'd have to be able to add more first levels to the grid for mods that add them.

[Antechinus]

Yes, you could do that, or you could use any other of the standard flex options. Any of which can deal with adding more buttons, as long as you set flex-wrap: wrap; on the parent ul.

Code Select Expand

/* Positional alignment */
justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */

/* Normal alignment */
justify-content: normal;

/* Distributed alignment */
justify-content: space-between; /* Distribute items evenly
                                   The first item is flush with the start,
                                   the last is flush with the end */
justify-content: space-around;  /* Distribute items evenly
                                   Items have a half-size space
                                   on either end */
justify-content: space-evenly;  /* Distribute items evenly
                                   Items have equal space around them */
justify-content: stretch;       /* Distribute items evenly
                                   Stretch 'auto'-sized items to fit
                                   the container */


[Antechinus]

Here ya go. This is just a quick presentation revamp of the standard admin CP mess, with superfluous stuff shunted out of the way. Can be run with or without sidebar.