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.
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;
}.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).
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.
:o
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.
;)
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...
ScreenHunter 458.jpg
EDIT: Never mind. Once I committed the edit and checked out the site all icons appeared.
:)
Looking awesome BTW!
ScreenHunter 459.jpg
Question... note the bottom "Arcade" section... how do I adjust so the text appears to the right rather than below? My OCD triggers slightly... ;)
ScreenHunter 460.jpg
You mean to the right of the icon?
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.
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.
Does this help?
ScreenHunter 461.jpg
ScreenHunter 462.jpg
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;
}
...nope. That stretched the icons a bit it seems... maybe some space between icon and text below...
ScreenHunter 463.jpg
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?
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.
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.
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.
;)
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.
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.
Attach them here and I'll take a look.
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
Odd. Is it a free mod? If it is, I can try it on local myself and take a closer look.
Sure is... get it at https://web-develop.ca/index.php
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. :)
It's pretty compatible with everything (minus this css it seems) FWIW...
:)
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 (https://www.simplemachines.org/community/index.php?topic=580228.0) theme.
Thank you Antechinus
Sure, it's just a tweak to admin.css. Just edit colours to suit your theme.
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
Put it in custom.css then. Should work.
...adding the css above to the bottom of the custom.css gets you close... very close...
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.
Likely because neither admin.css or in this case custom.css define an order to load, and definitely admin.css is loading later.
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
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.
bendadmin.png
Hope this helps.