News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

2.1 admin CP: alternate layout

Started by Antechinus, May 16, 2022, 07:14:44 PM

Previous topic - Next topic

Antechinus

Quick revamp to make it more like the cPanel home page layout, which is much easier to scan in a hurry and (IMO) looks better too.

Code ("admin.css - Find:") Select
fieldset.admin_group legend {
    background: #eaf1f4;
    border: 1px solid #cacdd3;
    padding: 1px 5px;
    border-radius: 3px;
}
fieldset.admin_group a {
    display: inline-block;
    width: 100px;
    font-size: 85%;
    text-align: center;
    vertical-align: top;
}
fieldset.admin_group .inactive {
    opacity: 0.4;
}

/* The update warning. */
#update_section {
    margin: 6px 0;
}

/* The icons. */
.large_admin_menu_icon_file {
    margin: 0 auto;
    display: block;
    width: 32px;
    height: 32px;
}
.large_admin_menu_icon::before {
    background: url(../images/icons/admin_sprite.png) no-repeat -5px -47px;
    margin: 0 auto;
    display: block;
    content: '';
    width: 32px;
    height: 32px;
}
Code ("admin.css - Replace:") Select
.admin_group {
    display: flex;
    flex-wrap: wrap;
    padding: 4px;
    background: #f8f8f8 !important;
    border-radius: 0;
}
.admin_group#group_forum {
    margin-top: 10px;
}
.admin_group legend {
    display: block;
    width: calc(100% + 10px);
    margin-left: -5px;
    padding: 5px 9px;
    background: #f0f4f7;
    font-size: 1rem;
    font-weight: 400;
    border: 1px solid #cacdd3;
    border-radius: 4px 4px 0 0;
}
.admin_group a {
    width: calc(25% - 8px);
    margin: 4px;
    padding: 5px 9px;
    background: #f0f4f7;
    font-size: .875rem;
    line-height: 2rem;
    border: 1px solid #ccc;
}
.admin_group a:hover {
    text-decoration: none;
    border-color: #9ac;
}
.admin_group .inactive {
    opacity: 0.4;
}

@media screen and (max-width:72rem) {
    .admin_group a {
        width: calc(33% - 6px);
    }
}
@media screen and (max-width:56rem) {
    .admin_group a {
        width: calc(50% - 8px);
    }
}
@media screen and (max-width:36rem) {
    .admin_group {
        flex-direction: column;
    }
    .admin_group a {
        width: auto;
    }
}
/* @WIP: Kludge for default meh. :P */
@media screen and (max-width:480px) {
    .admin_group a {
        float: none !important;
        width: auto !important;
    }
}

/* The icons. */
.large_admin_menu_icon_file {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
}
.large_admin_menu_icon {
    float: left;
    padding-right: 8px;
    opacity: .8;
}
.large_admin_menu_icon::before {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background: url(../images/icons/admin_sprite.png) no-repeat -5px -47px;
    content: '';
}

Result looks like the screenshot, and is fully responsive down to phone size (< 400px width).

Aleksi "Lex" Kilpinen

I understand you are not being all serious - but I must say, I don't believe this should have been approved as it is, and would like you to think of a better name for this topic.
Slava
Ukraini!


"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

How you can help SMF

FrizzleFried


Antechinus

Ok, go ahead and change it to whatever you like. I can't edit it now anyway. I mean sure, I can think of "better" topic titles. No problem there, but you may not want to know. :D

TBH, although the CP is "usable" in default form, in that it is possible to use it, it is so awkward to scan in default form that I very much doubt anyone ever bothers.

Aleksi "Lex" Kilpinen

Slava
Ukraini!


"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

How you can help SMF

FrizzleFried

Just tried in the CSS editor built in to SMF and while everything looks good... none of the ICONS are showing up minus the ARCADE ones...

Of course that's only the way it looks in the built-in editors "window"... I've not committed the change as of yet...

You cannot view this attachment.

EDIT: Never mind.  Once I committed the edit and checked out the site all icons appeared.

:)

Looking awesome BTW!

You cannot view this attachment.

FrizzleFried

Question... note the bottom "Arcade" section... how do I adjust so the text appears to the right rather than below? My OCD triggers slightly...  ;)

You cannot view this attachment.

Steve

You mean to the right of the icon?
Autocorrect is my worst enema.

FrizzleFried

Quote from: Steve on May 17, 2022, 10:36:30 AMYou mean to the right of the icon?

Correct... like the rest (see examples above my post)... :)

All my icons look like the example above my post... icon then text to the right... except for the Arcade section which appears as I posted.

Antechinus

#9
Must be using different markup in that section. I'd need to know which classes and elements it is using.

ETA: Get me a shot of what your document inspector says about those arcade icons.

FrizzleFried

Does this help?

You cannot view this attachment.

You cannot view this attachment.

Antechinus

Ok, try find this:
.large_admin_menu_icon_file {
display: inline-block;
vertical-align: middle;
width: 32px;
height: 32px;
}

Replace with this:
.large_admin_menu_icon_file {
float: left;
width: 32px;
height: 32px;
padding-right: 8px;
opacity: .8;
}

FrizzleFried

...nope.  That stretched the icons a bit it seems... maybe some space between icon and text below...

You cannot view this attachment.

Antechinus

Ah. Effing border-box. This will fix the stretching:
.large_admin_menu_icon_file {
float: left;
width: 40px;
height: 32px;
padding-right: 8px;
opacity: .8;
}

The misalignment is odd. What extra CSS is being applied by the Arcade mod?

FrizzleFried

No idea.  It's just an admin entry and it looks the same as the rest when normal.

One odd thing... making edits via the SMF editor and the update "preview" doesn't show icons for any of your edits... until I commit and then check the actual admin page.  BUT... the Arcade icons (and only the arcade icons) are there.


Antechinus

Well it obviously ain't the same as the rest, so it has something odd being applied somehow.

I just ran a quick test, by adding a fake extra section with hard-coded markup, calling in the default cake.png as an image with that class. It works. :)

So, yer arcade mod is playing silly games somewhere.

Idea! Does the mod have CSS that is applying clear: both; to those images? That would screw it.

FrizzleFried

No idea... I looked for "clear" in the admin css and found one entry nothing to do with the arcade css...

My OCD will have to deal with it.

;)


Antechinus

No, it would not be in admin.css unless the mod bungs its own CSS into admin.css. If the mod has its own CSS file, it would be in that.

FrizzleFried

Yeah,  there is plenty of css for the Arcade mod... but none of it seems to be for the admin section except one file which is specifically for the ARCADE ADMIN section...

I'll live.

Antechinus

Attach them here and I'll take a look.

FrizzleFried

Arcade-Admin.css

/*
 * SMF Arcade
 *
 * @package SMF Arcade
 * @version 2.6
 * @license https://web-develop.ca/index.php?page=arcade_license_BSD2 BSD 2
 */
/* ************************************* */
/* styles for admin templates            */
/* ************************************* */
select {
   display: inline-block;
}

arcade.css

/*
 * SMF Arcade
 *
 * @package SMF Arcade
 * @version 2.6
 * @license https://web-develop.ca/index.php?page=arcade_license_BSD2 BSD 2
 */
/* ************************************* */
/* styles from Arcade.template           */
/* ************************************* */
.game_suggest
{
   border: 1px solid black;
   position: absolute;
   visibility: hidden;
}

/* An auto suggest item */
.game_suggest_item
{
   background-color: #DDDDDD;
}

.game_suggest_item a
{
   color: black;
   display: block;
}

/* hovered auto suggest item */
.game_suggest_item a:hover
{
   background-color: #888888;
   cursor: pointer;
   color: #EEEEEE;
   text-decoration: none;
}

.arcade_up_contain {
   overflow: hidden;
   box-sizing: border-box;
   border: 1px solid #DDD;
   margin-bottom: 3px;
   margin-top: -1px;
}

/* ************************************* */
/* styles from ArcadeList.template       */
/* ************************************* */
.game_table table
{
   width: 100%;
}
.game_table td.icon
{
   padding: 5px 7px;
   width: 8%;
}
.game_table td.icon img
{
   width: 60px;
}
.game_table td.info
{
   vertical-align: top;
}
.game_table td.info h4
{
   padding: 0.4em 0.4em 0 0.4em;
   margin: 0;
}
.game_table td.info h4 a
{
   float: left;
}
.game_table td.info h4 span
{
   float: right;
}
.game_table td.info p
{
   padding: 0 0.4em 0.5em 0.4em;
   margin: 0;
}
.game_table td.info p span.game_left
{
   float: left;
   text-align: left;
}
div.game_list_left
{
   float: left;
   text-align: left;
}
div.game_buttons
{
   display: block;
}
.game_table td.info p span.game_right
{
   float: right;
   text-align: right;
}
.game_table td.score
{
   width: 15%;
   text-align: center;
   vertical-align: middle;
}
.game_table td.score2
{
   width: 30%;
   text-align: center;
   vertical-align: middle;
}
.roundframe ul
{
   padding: 0.5em;
}

/* ************************************* */
/* styles from ArcadeGame.template       */
/* ************************************* */
#game_panel img.thumb
{
   width: 60px;
   margin-left: 10px;
}
#game_panel div.scores
{
   margin-left: 10px;
}
#game_panel div.rating
{
   margin-right: 10px;
}
.score_table table
{
   width: 100%;
   font-size: small;
}
.score_table td
{
   padding: 0.5em;
}
.arcade_edit {
   width: 16px;
   height: 16px;
   display: inline-block;
   background: url(../images/arc_icons/arcade_edit.gif) no-repeat;
   vertical-align: middle;
}
.arcade_own_score
{
   font-style: oblique;
}
#gamearea
{
   text-align: center;
   padding: 0.5em 0.7em;
}
.escgamediv {
   position: absolute;
   top: 30px;
   right: 15px;
   z-index: 100;
}
.escgame {
    background-color: #920205;
    border: 0px;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    cursor: pointer;
   position: static;
}
.escgame:hover {
    background-color:     #FF6347;
    color: red;
   position: static;
}
/* ************************************* */
/* styles from ArcadeArena.template      */
/* ************************************* */
.arc_button
{
   padding: 5px;
   margin: 5px;
   text-decoration: none;
}
.arc_button:hover
{
   text-decoration: none;
}
.arc_button span
{
   padding-right: 10px;
}

table.playerlist
{
   width: 100%;
}
table.playerlist th.catbg3
{
   text-align: left;
}
table.playerlist td
{
   padding: 0.5em;
}

table.gameslist
{
   width: 100%;
}
table.gameslist th.catbg3
{
   text-align: left;
}
table.gameslist td
{
   padding: 0.5em;
}

/* general styles */
.arcade_vert_mid
{
   vertical-align: middle;
}
.arcade_gamesearch
{
   width: 440px;
}
.arcade_div_stats
{
   clear: right;
   padding:8px 7px 0px 0px;
   float: right;
   display: inline;
}
.arcade_above
{
   clear: both;
   padding-top: 25px;
}
.arcade_login_container
{
   border: 1px solid;
   padding: 5px;
   border-radius: 3px;
   width: 30%;
}
.arcade_login_table
{
   display: table;
   border: 0px;
   width: 100%;
}
.arcade_login_row
{
   display: table-row;
}
.arcade_login_cell
{
   display: table-cell;
   text-align: right;   
}
.arcade_login_cell_padding
{
   padding-top: 5px;
}

arcade-buttons.css

/*
 * SMF Arcade
 *
 * @package SMF Arcade
 * @version 2.6
 * @license https://web-develop.ca/index.php?page=arcade_license_BSD2 BSD 2
 */
/* ************************************* */
/* styles for css buttons                */
/* ************************************* */
.arcade_games {
   background: url(../images/icons/arcade_games.png) no-repeat;
   border:none;
}


Those are the tree most likely but I doubt buttons has anything to do with it.  The other css files are called:

arcade-arena.css
arcade-arena-mobile.css
arcade-mobile.css
arcade-skin-b.css
arcade-uploads.css
arcade-xframe.css


Antechinus

Odd. Is it a free mod? If it is, I can try it on local myself and take a closer look.

FrizzleFried


Antechinus

Complicated little mongrel. :D Can't see anything obvious.
I'll install it later. Might make a new 2.1, just to save any issues with my existing test site. :)

FrizzleFried

It's pretty compatible with everything (minus this css it seems) FWIW...

:)


lord alibaski

It does make it look much easier to look at, can this be done with other themes? would love to add this to the Bend theme.

Thank you Antechinus

Antechinus

Sure, it's just a tweak to admin.css. Just edit colours to suit your theme.

lord alibaski

This is what got me there is no admin.css inside the Bend theme there is a custom,index & responsive inside the css folder.

None have the fieldset.admin_group code inside I can only find this in the responsive css file

}
fieldset.admin_group a {
width: 50%;
float: left;
margin: 0 0 5px 0;

I have attached all 3 css files

Antechinus

Put it in custom.css then. Should work.

FrizzleFried

...adding the css above to the bottom of the custom.css gets you close... very close...



Antechinus

Nope, that's screwed. Is custom.css loaded after admin.css? Because if it's loaded before admin.css it will be useless.

I don't know why it would be loaded before any other CSS file, because that's just begging for your custom overrides to not work, but from your screenshot I am guessing it is.

If custom.css is useless, just copy the default admin.css to your theme and edit colours where you need to.

Diego Andrés

Likely because neither admin.css or in this case custom.css define an order to load, and definitely admin.css is loading later.

SMF Tricks - Free & Premium Responsive Themes for SMF.

live627

a custom theme without admin.css falls back to the one in the default theme

you could copy it if you want to leave the default alone

TwitchisMental

Quote from: lord alibaski on May 22, 2022, 08:23:30 PMThis is what got me there is no admin.css inside the Bend theme there is a custom,index & responsive inside the css folder.
None have the fieldset.admin_group code inside I can only find this in the responsive css file
}
fieldset.admin_group a {
width: 50%;
float: left;
margin: 0 0 5px 0;

I have attached all 3 css files

A bit of a bump here

I have uploaded a new version of Bend which includes the admin.css.  Tried Ants trick and it does work afterwards.

You cannot view this attachment.

Hope this helps.
My SMF Themes - Remixed Breadcrumb Tutorial -
My SMF 2.1 Themes Demo
Need a Custom SMF Theme? Send me a message.

Advertisement: