abda53
Member
- Jun 10, 2022
- 84
- 92
- 18
ACF is great, but sometimes it's hard to tell what is what in the admin. This is a CSS file I'm using on a currently project to help break elements up (at least for my needs)
Feel free to use/modify it. You will need to create a CSS file and enqueue it into your admin
Feel free to use/modify it. You will need to create a CSS file and enqueue it into your admin
CSS:
.acf-flexible-content .ui-sortable .layout:nth-child(even){
background-color: #e6e6e6;
}
.acf-flexible-content .ui-sortable .layout:hover > .acf-fc-layout-handle{
font-weight: 700;
background-color: #f44;
color: #fff;
}
.acf-flexible-content .ui-sortable .layout:hover > .acf-fields{
background-color: #f5f1f1;
}
.um-tooltip{
display: none !important;
}
.inside.acf-fields .acf-flexible-content .layout .acf-fields > .acf-field .acf-label label{
font-weight: 700;
font-size: 13px;
color: #236192;
}
.postbox-header{background-color: #d8e5f0 !important;}
#side-sortables .acf-postbox .postbox-header{
background-color: #fffb00 !important;
}
[data-name="faqs_repeater"] .acf-table tbody tr:nth-child(even) td{background-color: #ea6262; color: #FFF;}
[data-name="faqs_repeater"] .acf-table tbody tr:nth-child(odd) td{background-color: #52aee6; color: #FFF;}
[data-name="faqs_repeater"] .acf-table tbody tr td label{color: #000}
/* TOP */
.acf-tooltip.acf-fc-popup.top{
left: 40% !important;
height: 300px;
min-width: 600px;
}
.acf-tooltip.acf-fc-popup.top::before{
right: 10px;
}
.acf-tooltip.acf-fc-popup.top ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
padding: 20px;
}
.acf-tooltip.acf-fc-popup.top ul li{
width: calc(25% - 20px);
}
/* BOTTOM */
.acf-tooltip.acf-fc-popup.bottom{
left: calc(1338.74px - 600px) !important;
min-width: 600px;
}
.acf-tooltip.acf-fc-popup.bottom::before{
right: 10px;
}
.acf-tooltip.acf-fc-popup.bottom ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
padding: 20px;
}
.acf-tooltip.acf-fc-popup.bottom ul li{
width: calc(25% - 20px);
}
