It took me 3 days to make this For a more accurate look turn on 5_1
/* ==UserStyle==
@name 2016 ROBLOX Avatar Customizer for RLOT
@namespace https://codepen.io/210/pen/NjxOaO?editors=1000
@version 1.5
@description It took me 3 days to make this For a more accurate look turn on 5_1
@author Goolbob2
==/UserStyle== */
@-moz-document url-prefix("https://www.roblox.com/my/avatar") {
[data-internal-page-name="Avatar"] .breadcrumb-container {
display: none!important;
}
}
[data-internal-page-name="Avatar"] #wrap.pinned .left-wrapper, [data-internal-page-name="Avatar"] #wrap.pinned .right-wrapper {
position: relative!important;
top: 0px;
}
.avatar-editor-header .btn-primary-md {
padding: 7px 7px;
display: inline-block;
}
.avatar-editor-header .catalog-header div:nth-child(n+1)::after {
width: 150px;
display: inline-block;
position: relative;
text-align: right;
font-size: 14px!important;
line-height: 1.5em!important;
font-weight: 400!important;
left: 6px;
top: 4px;
}
.avatar-editor-header::before {
content: "Avatar Customizer";
font-size: 32px;
font-weight: bold;
margin: 12px;
color: #343434;
letter-spacing: -1px;
position: relative!important;
left: 1px;
top: -20px;
}
.avatar-editor-header h1 {
font-size: 0px!important;
}
#content #avatar-web-app .right-panel.six-column {
width: 570px!important;
}
#avatar-web-app .left-wrapper, .left-wrapper-placeholder {
margin-top: 10px;
width: 375px;
float: left;
height: 600px;
}
#avatar-web-app .avatar-back {
width: 375px;
background: none;
}
#avatar-web-app .avatar-thumbnail {
width: 352px;
height: 352px;
left: -0px;
margin: 0 auto;
}
.section-sliders {
position: relative;
left: 50px;
width: 250px;
display: none;
}
.redraw-avatar {
position: relative;
left: 50px;
width: 250px;
}
#avatar-items-container {
min-width: 675px;
}
#avatar-web-app .items-list.avatar-item-list .item-card .item-card-container {
float: left;
margin: 5px 7px 5px 0;
vertical-align: top;
width: 130px!important;
min-height: 181px!important;
}
#avatar-web-app .items-list .item-card .item-card-thumb-container {
height: 110px;
text-align: center;
width: 128px;
}
#avatar-web-app .items-list .item-card .item-card-caption {
overflow: visible;
padding: 2px 0 6px 0!important;
width: 125px!important;
text-align: center;
height: auto!important;
display: block;
}
.items-list .item-card .item-card-caption .item-card-name-link {
display: inline-block!important;
max-width: 100%!important;
}
#avatar-web-app .item-card-thumb .thumbnail-2d-container img {
width: 90%;
position: relative;
top: -5px;
}
#avatar-web-app .item-card-container .item-card-name {
font-weight: bold;
line-height: 1.5em;
vertical-align: top;
color: #0055B3!important;
font-size: 14px!important;
font-family: 'Source Sans Pro',Arial,Helvetica,sans-serif!important;
}
#avatar-web-app .items-list.avatar-item-list .item-card-container .item-card-thumb-container .item-card-thumb {
border: none!important;
}
#avatar-web-app .items-list.avatar-item-list .item-card .item-card-container .item-card-thumb::before {
content: "Wear";
border-color: #0852b7;
background-color: #0852b7;
background-image: url(/images/Buttons/StyleGuide/bg-btn-blue.png);
color: white;
padding: 1px 7px 0 12px;
height: 22px;
width: 56px;
font-size: 14px;
line-height: 17px;
background-position: left -160px;
margin: 0;
display: flex;
zoom: 1;
text-align: center;
font-weight: normal;
text-decoration: none;
border-width: 1px;
border-style: solid;
cursor: pointer;
position: relative;
left: 74px;
z-index: 2;
}
#avatar-web-app .items-list.avatar-item-list .item-card .item-card-container .item-card-equipped::before {
content: "Wearing";
border-color: #0852b7;
background-color: #0852b7;
background-image: url(/images/Buttons/StyleGuide/bg-btn-blue.png);
color: white;
padding: 1px 7px 0 7px;
height: 22px;
width: 64px;
font-size: 14px;
line-height: 17px;
background-position: left -160px;
margin: 0;
display: flex;
zoom: 1;
text-align: center;
font-weight: normal;
text-decoration: none;
border-width: 1px;
border-style: solid;
cursor: pointer;
position: relative;
left: 66px;
z-index: 4;
}
#avatar-web-app .item-card-equipped-label {
visibility: hidden;
}
#avatar-web-app .item-card-container .item-card-equipped {
border: none!important;
}
#avatar-web-app .item-card-container .thumbnail-2d-container {
position: relative;
top: -20px;
}
#costumes:has(.btn-secondary-xs.btn-float-right) .item-card-caption {
text-align: left!important;
float: left;
width: 100px!important;
height: 170px;
position: relative;
}
#costumes:has(.btn-secondary-xs.btn-float-right) .items-list.avatar-item-list .item-card .item-card-container .item-card-thumb::before {
visibility: hidden;
}
#costumes:has(.btn-secondary-xs.btn-float-right) .item-card-container .item-card-name {
color: #343434!important;
}
#avatar-web-app .section-content.remove-panel {
box-shadow: none!important;
}
#avatar-web-app .item-card-container.remove-panel {
box-shadow: none!important;
}
#avatar-web-app .nav-tabs {
box-shadow: none!important;
}
#avatar-web-app .tab-horizontal-submenu.six-column {
display: inline-block;
border: none;
z-index: 6!important;
box-shadow: none!important;
text-align: center;
}
#avatar-items-container {
position: relative;
top: 80px;
}
#avatar-web-app .tab-horizontal-submenu li {
padding: 3px 6px!important;
margin: 0px;
color: #0055B3;
font-size: 14px;
line-height: 1.5;
font-weight: 400 !important;
border-radius: 0px;
height: 25px;
}
#avatar-web-app .tab-horizontal-submenu li.active {
color: #0055B3;
background-color: #dedede;
}
#avatar-web-app .tab-horizontal-submenu li:hover {
background-color: #efefef;
}
#costumes:has(.btn-secondary-xs.btn-float-right) .items-list.avatar-item-list .item-card .item-card-container {
float: left;
margin: 10px;
width: 100px!important;
height: 170px;
position: relative;
}
#costumes:has(.btn-secondary-xs.btn-float-right) .items-list .item-card .item-card-thumb-container {
float: left;
width: 100px!important;
height: 100px;
position: relative;
}
#costumes:has(.btn-secondary-xs.btn-float-right) .item-card-thumb .thumbnail-2d-container img {
width: 115%!important;
}
#avatar-web-app .items-list .item-card .icon-settings-16x16.edit-outfit {
position: absolute;
top: -100px;
right: -8px;
background-image: url(/images/BuildPage/btn-gear_sprite_27px.png);
height: 21.5px;
width: 40px;
font-size: 13px;
color: #000;
text-align: center;
display: block;
z-index: 2;
background-position: 0 0px;
}
#avatar-web-app .items-list .item-card .icon-settings-16x16.edit-outfit:hover {
background-position: 0 -21.5px;
}
#avatar-web-app .items-list.avatar-item-list .item-card.six-column {
width: 21.6%;
left: -3px;
position: relative;
}
#avatar-web-app .items-list .item-card .item-card-menu {
background-color: #efefef!important;
border: 1px solid #777!important;
color: #343434!important;
border-radius: 0px!important;
position: absolute;
top: -79px;
width: 120px;
left: 68px;
font-size: 12px;
font-weight: normal;
padding: revert!important;
height: 100px!important;
z-index: 1;
}
#avatar-web-app .item-card-menu.active .btn-secondary-xs {
box-shadow: none!important;
text-align: left!important;
}
#avatar-web-app:has(.item-card-menu.active) .items-list .item-card .icon-settings-16x16.edit-outfit {
background-position: 0 -43px;
}
#avatar-web-app .item-card-menu.active .btn-secondary-xs:hover {
background: #0055B3;
margin: revert;
border: none;
border-radius: 0px;
width: 118px;
}
#avatar-web-app .right-wrapper-placeholder-six-column, .right-wrapper-six-column {
width: 567px!important;
position: relative;
left: 1px;
}
#avatar-web-app .right-wrapper-six-column .rbx-tab .text-lead .icon-down {
display: none!important;
}
#avatar-web-app .tab-horizontal-submenu.six-column {
width: 550px!important;
position: relative;
left: 10px;
}
#avatar-web-app .right-panel.six-column .btn-secondary-xs.btn-float-right {
position: relative;
top: 40px;
height: 26px;
line-height: 25px;
font-size: 13px;
padding: 0 7px;
background-image: url(/images/StyleGuide/btn-control-large-tile.png);
border: 1px solid #777;
color: #000;
text-decoration: none;
background-color: #ccc;
text-align: center;
font-weight: normal;
cursor: pointer;
background-position: top;
display: block;
border-radius: 0px;
box-shadow: none!important;
}
#avatar-web-app .right-panel.six-column .btn-secondary-xs.btn-float-right:hover {
background-position: bottom;
}
#avatar-web-app #costumes .btn-secondary-xs.btn-float-right {
font-size: 0px !important;
}
#costumes:has(.btn-secondary-xs.btn-float-right) .btn-secondary-xs.btn-float-right::before {
content: "Create New Outfit";
font-size: 13px;
}
#costumes:has(.btn-secondary-xs.btn-float-right) .items-list .item-card .item-card-caption::after {
display: flex;
content: "Created: 1/1/1970";
color: #343434;
font-size: 14px;
line-height: 1.428;
font-weight: 400;
position: relative;
top: -10px;
}
#avatar-web-app .container-list.layer.recommendations-container {
display: none;
}
#avatar-react-container button.rbx-tab-heading {
background-color: #D6D6D6;
border: 1px solid #9e9e9e;
border-bottom-width: 0;
position: relative;
width: auto;
height: 36px;
padding: 7px;
margin: 4px 2px 0 0px;
box-shadow:none!important;
top: 2px;
}
#avatar-web-app .rbx-tabs-horizontal .rbx-tab {
width: auto;
box-shadow:none!important;
}
#avatar-web-app .rbx-tabs-horizontal .rbx-tab:first-child {
margin-left: 5px;
}
#avatar-web-app .rbx-tabs-horizontal-six-column .nav-tabs {
border-bottom: 1px solid #ccc;
}
#avatar-web-app .rbx-tabs-horizontal .rbx-tab.six-tab.active .rbx-tab-heading {
background-color: #fff!important;
border-color: #ccc!important;
height: 38px;
top: 0px;
}
#avatar-web-app .rbx-tabs-horizontal .rbx-tab.six-tab.active .rbx-tab-heading:hover {
background-color: #fff!important;
border-color: #ccc!important;
}
#avatar-web-app .rbx-tabs-horizontal .rbx-tab.six-tab .rbx-tab-heading:hover {
background-color: #e9e9e9!important;
}
#avatar-web-app .rbx-tab .rbx-tab-heading span {
font-weight: bold;
font-size: 15px;
line-height: 1.428;
color: #343434;
}
#avatar-web-app .avatar-editor-header .catalog-header {
position: relative!important;
left: -13px;
top: -5px;
}
#avatar-web-app .rbx-tab.six-tab:nth-child(1) .text-lead {
font-size: 0px!important;
}
#avatar-web-app .rbx-tab.six-tab:nth-child(1) .text-lead::before {
content: "Wardrobe";
font-size: 15px;
}
#avatar-web-app .rbx-tab.six-tab:nth-child(2) .text-lead {
font-size: 0px!important;
}
#avatar-web-app .rbx-tab.six-tab:nth-child(2) .text-lead::before {
content: "Outfits";
font-size: 15px;
}
#avatar-web-app .rbx-tab.six-tab:nth-child(5), #avatar-web-app .rbx-tab.six-tab:nth-child(4) {
display: block;
}
[data-internal-page-name="Avatar"] .content.six-column {
width: 970px!important;
max-width: 970px!important;
}
#avatar-web-app .redraw-avatar::before {
content: "Something wrong with your avatar?";
color: #343434!important;
font-size: 14px !important;
line-height: 1.428 !important;
font-weight: 400 !important;
}
#avatar-web-app .redraw-avatar .text-link::before {
content: "Click here to re-draw it!";
color: #0055b3!important;
font-size: 14px !important;
line-height: 1.428 !important;
font-weight: 400 !important;
position: relative;
left: -114px;
}
#avatar-web-app .redraw-avatar .text-link {
font-size: 0px !important;
}
#avatar-web-app .redraw-avatar .text-link:hover {
font-size: 0px !important;
text-decoration: none!important;
}
#avatar-web-app .redraw-avatar {
font-size: 0px !important;
position: relative;
left: 70px;
top: -13px;
}
#avatar-web-app .left-wrapper .toggle-three-dee.btn-control.btn-control-small {
height: 20px!important;
line-height: 18px;
font-size: 11px;
background-image: url(/images/StyleGuide/btn-control-small-tile.png);
border: 1px solid #777;
padding: 0 6px;
color: #000;
text-decoration: none;
background-color: #ccc;
text-align: center;
font-weight: normal;
cursor: pointer;
background-position: top;
display: inline-block;
border-radius: 0px;
box-shadow: none!important;
min-height: 20px!important;
position: relative;
left: 245px;
top: -23px;
}
#avatar-web-app .left-wrapper .toggle-three-dee.btn-control.btn-control-small:hover {
background-position: bottom;
}
#avatar-web-app {
margin-top: 50px;
width: auto!important;
}
[data-internal-page-name="Avatar"] .rbx-left-col {
background-color: #f2f2f2;
}
[data-internal-page-name="Avatar"].light-theme {
background: #fff !important;
}
[data-internal-page-name="Avatar"].light-theme .content {
background: #fff !important;
}
#avatar-web-app .color-dot {
transition: none;
margin: 6px;
box-shadow: 0 0 0 1px #fff;
border-radius: 0px;
}
#avatar-web-app .color-dot:hover {
box-shadow: 0 0 0 2px #e1e1e1!important;
}
#bodyColors .section-content {
box-shadow: none!important;
position: relative;
top: 80px;
}
#avatar-web-app .text-link.advanced-link {
color: #0055b3!important;
font-size: 14px !important;
line-height: 1.428 !important;
font-weight: 400 !important;
text-decoration: none!important;
}
#classic-heads-scrollbar-container, .hat-slots {
display: none!important;
}
#advanced-body-colors.MuiDialog-root .MuiDialog-container [class*="-Dialog-paper"] > [class*="-root"], #advanced-body-colors.MuiModal-root .MuiDialog-container [class*="-Dialog-paper"] > [class*="-root"] {
box-shadow: none!important;
padding: 0px!important;
}
#advanced-body-colors.MuiDialog-root:has([class*="-DialogContent-dividers"]) .MuiDialog-container [class*="-Dialog-paper"], #advanced-body-colors.MuiModal-root:has([class*="-DialogContent-dividers"]) .MuiDialog-container [class*="-Dialog-paper"] {
border: 2px solid #888!important;
}
#mui-7.MuiTypography-root.MuiTypography-h6.MuiDialogTitle-root {
font-weight: bold!important;
font-size: 27px!important;
color: #343434!important;
text-align: center!important;
height: 40px;
padding-top: 2px;
line-height: 40px;
}
.bodycolors-list-sm .color-dot {
margin: 2px;
height: 45px!important;
width: 45px!important;
border-radius: 0px;
border: 2px solid #fff;
box-shadow: none!important;
transition: none!important;
}
.bodycolors-list-sm .color-dot:hover {
border: 2px solid #e1e1e1;
}
#advanced-body-colors .bodycolors-radio-list {
position: relative;
left: 15px;
}
[data-internal-page-name="Avatar"] div.MuiDialog-root:not(:first-of-type) .MuiDialog-container {
background-color: rgba(0, 0, 0, 0) !important;
}
#advanced-body-colors .modal-body {
height: 398px!important;
padding: 0px!important;
}
#advanced-body-colors .bodycolors-list-sm {
width: 400px;
}
.color-dot.active::after {
display: none;
}
#advanced-body-colors .web-blox-css-tss-1283320-Button-textContainer {
display: none;
}
#advanced-body-colors .web-blox-css-tss-lo77dr-Button-contained {
display: inline-block;
position: relative;
top: -438px;
box-shadow: none!important;
transform: none!important;
width: 20px;
height: 20px!important;
min-height: 20px!important;
cursor: pointer;
left: 274px;
background: url(/images/Buttons/btn-x.png);
background-repeat: no-repeat;
}
#advanced-body-colors .web-blox-css-tss-lo77dr-Button-contained:hover {
background-position: 0 -21px;
}
#wrap.pinned .right-wrapper::before {
display: none;
}
[data-internal-page-name="Avatar"] .content .rbx-tab {
min-width: auto!important;
}