How to make admin panel backend FULL Width

General General Questions
1

my admin panel is smaller than my screen
need to make it wider or full width

any help appreciated!

2

At first it is required to add an ability to specify your CSS for admin panel

Then try to use the following code

#main_column {
    .navbar-admin-top, .admin-content-wrap, .content-wrap {
        max-width: none !important;
    }
}

(!) Not tested

3

I am not from developer background, Learned online and w3schools websites.
These code you can try. (For this other developers can asked for more than $200)

design/backend/css/tygh/admin_content.less > Line: 90,
.sidebar {
background: none;
// Comment this, width: 230px;
min-width: 230px;
// Comment this, max-width: 230px;
padding: 15px 0 20px 10px;
height: 100%;
.sidebar-wrapper {
width: 100%;
height: 100%;
}

design/backend/css/tygh/admin_content.less > line: 247,

.content {
    min-height: 100%;
    padding-right: 10px;
	padding-left: 5px; // make padding 
    padding-top: 15px;
    padding-bottom: 20px;
    min-width: 82%; // make 82% 1010px;
    &.no-sidebar {
        width: 100%;
        padding-right: 0;
    }

design/backent/css/tygh/common.less > Line: 6,
// Add this line
#main_column {
.navbar-admin-top, .admin-content-wrap, .content-wrap {
max-width: 100%;
}
}

design/backent/css/tygh/navbars/menu.less > line: 538,
.header-subnav {
background-color: #fff;
box-shadow: 0 0px 2px rgba(0,0,0,0.1);
border-radius: 0;
width: 100%;
max-width:100%; // @wide-width; Remove this with 100%
z-index: 1040;
}

1 Like
4

anyone tested above codes, working or not?

5

There is a typos in ss,41 posts above backent, should be backend

BUT !
this seems to work as my changes v4.18.1 instead of core files
create this file

design/backend/css/addons/my_changes/admin_fullwidth_override.less

/* === Full-width admin overrides for 4.18.1 === */

/* Your menu/header idea */
.navbar-admin-top,
.admin-content-wrap,
.content-wrap {
  max-width: 100% !important;
}

/* Sidebar: remove the fixed 230px cap */
.sidebar {
  background: none;
  /* width: 230px;  -- removed */
  /* max-width: 230px;  -- removed */
  min-width: 230px; /* keep a practical minimum if you keep sidebar visible */
  padding: 15px 0 20px 10px;
  height: 100%;
}
.sidebar .sidebar-wrapper {
  width: 100%;
  height: 100%;
}

/* Content pane: stop forcing an 82% min-width and let it fill */
.content {
  min-height: 100%;
  padding-right: 10px;
  padding-left: 5px;
  padding-top: 15px;
  padding-bottom: 20px;

  min-width: 0 !important;  /* was 82%; */
  width: 100% !important;
}

/* When the page uses 'no-sidebar', keep it truly full width */
.content.no-sidebar {
  width: 100% !important;
  padding-right: 0;
}

/* Subheader under the top bar: uncap width */
.header-subnav {
  width: 100% !important;
  max-width: 100% !important; /* was @wide-width */
}

/* Nuke any lingering container caps */
html body .container,
html body .container-fluid {
  max-width: none !important;
  width: 100% !important;
}

register it by creating this file if you dont already have it

design/backend/templates/addons/my_changes/hooks/index/styles.post.tpl

{style src="addons/my_changes/admin_fullwidth_override.less"}

Dont forget to clear cache and possibly tpl cache

2 Likes