2.1 CSS

[Sir Osis of Liver]

Why would you run it with sidebars?

[Antechinus]

Because that is just the admin home page. That content is not on any other page. But, you could do something similar with the default drop menu system easily enough.

ETA: In general, I think I prefer a sidebar.

[Sir Osis of Liver]

What is this for?  It's causing a problem for me in custom theme.

Code Select Expand


.noup {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin: 0 0 10px 0 !important;
}


Want to add margins in profile summary, but have to comment out margin in .noup to do it.

[Antechinus]

That is there especially to demonstrate the principle that class names should be clearly descriptive.

It's for divs that by default do not have a gap between them and a header bar.

[Sir Osis of Liver]

It overrides margin settings in .roundframe in custom.css, I'd like to change the one without removing the other.

[Antechinus]

Ok, so use your browser's document inspector which is faster thhn posting threads about it, and grab the #profileview from that, then use that to target your CSS for that area.

[Sir Osis of Liver]

I've done that, but .noup overrides margin in .roundframe, I can't change margins unless I remove .noup.

[Sir Osis of Liver]

You can see it here -

[Antechinus]

Well tell us what code you are running and we might have a chance of diagnosing the issue. It's bound to be something trivial.

[Sir Osis of Liver]

.roundframe is in custom.css -

Code Select Expand


.roundframe {
    background: #1A1A1A;
    border-top: 1px solid #0669d5;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}


.noup is in index.css -

Code Select Expand


.noup {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin: 0 0 10px 0 !important;
}


I can fix it with padding in .roundframe (hadn't tried that), will have to see if it causes problems elsewhere.

[Antechinus]

Ok, so if you really have to, use !important on your .roundframe margin in custom.css.

[Sir Osis of Liver]

If they're both !important, which is used?  There's also .roundframe in index.css -

Code Select Expand


.roundframe {
margin: 10px 0 0 0;
padding: 12px 16px;
background: #f8f8f8;
border: 1px solid #c5c5c5;
border-radius: 7px;
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
overflow: auto;
}


How is it decided which is used?

I'll go with padding, it doesn't reposition the container, just the content, so it's less likely to break something else.

[Antechinus]

If they are both equally specific, the one that is last will be used. That's the C in CSS - Cascading. 

[Sir Osis of Liver]

This theme was a bit different for adding your sidebar code.  Usually place it at the end of index.css, but if I do that in custom.css it messes up the entire forum.  It's at the beginning, doesn't affect anything else, just had to fix the formatting to match the theme.

[Antechinus]

Y'know on second thought I think I could get to like the admin menu across the top of each page, with the first drops permanently expanded. It's certainly a convenient layout, with everything available, and with the default 5 sections it's fine down to about 960px wide. So no problems adminning on desktop or tablet, or even on most phones in landscape mode.

Might fall down if mods add too many sections of their own. Not sure I'll be using any mods that do that though.

Need something else on a phone in portrait mode, obviously, but then you can go to a hidden sidebar called by hamburger, or even just split the menu into more rows (again, called by hamburger).

Much easier to scan than the default "Admin CP", which is really too jumbled to be any use, and hardly worth revamping.

[Sir Osis of Liver]

Anything is an improvement over core ACP.

[Arantor]

Do you *really* need to rub it in? We get it that you don't like it already.

[Antechinus]

It really is too jumbled. I had been looking at it, wondering if it was worth trying to do anything with it. The problem is that the icons are large and colourful, the text is small (and not colourful), the text is centre-aligned (which is always harder to read), frequently breaks to two lines (ditto), and comes after the icons.

The result is that if you want to use it as a source of information, you really have to make an effort to search for the information. It does not scan quickly or easily. To make it scan quickly and easily, the presentation would need to be revamped to make the text the main feature and the icons not overpowering the text. IOW, it would have to be redone to be more like a good menu.

At which point I find myself wondering if it doesn't make more sense to just deal with the actual menu and not bother with the CP, since the CP is only available on one page that has no other functionality, while the menu is available on all relevant pages. Really, the admin home page is only useful for seeing update warnings. Nobody ever really cares about anything else on that page. If update warnings were visible elsewhere, like maintenance mode warnings, the whole admin home page would be redundant.

Anyway, the screenshot shows what I'm playing with at the moment.

[davo88]

Like the direction you're heading in there Antechinus. It's just what we need - a full overview of the Admin panel. I often have to hunt around looking for stuff. If that could be done in a single screen, it would be very useful.

[Antechinus]

For the existing CP itself, you could do something like this. It's a quick bash at basic CSS on default markup, to make it more like the cPanel home page (which actually is easy to scan). Haven't bothered doing responsive yet, but it wouldn't be difficult.

Another tweak which would make sense is dropping opacity on the icons to about .8, which would work well on the default colour scheme and be a lot more usable on a dark theme.