ACF Custom and Admin Customized Styles WP 5.5

/* Force height below of Gutenberg Editor to be only 50px vs. 40vh, and force the Gutenberg block to be fullwidth */ .wp-block, .edit-post-visual-editor, .block-editor-writing-flow__click-redirect { flex: none; min-height: 50px; max-width: 100vw; } .edit-post-visual-editor>.block-editor__typewriter>div>.block-editor-writing-flow{ padding: 0 40px 0 40px; } /* Force height below of Gutenberg Editor to be only 50px vs. 40vh, and force the Gutenberg block to be fullwidth */ .wp-block, .edit-post-visual-editor, .block-editor-writing-flow__click-redirect { max-width: calc(100vw - 80px); } /*Chnage The Gutenberg Editor Font. Font's also must me included in functions.php file.*/ .block-editor-block-list__layout, .editor-post-title__block .editor-post-title__input { font-family: 'Montserrat', sans-serif; } /* ACF Accordion Titles and Label colors */ .acf-field.menu-title, .edit-post-meta-boxes-area #poststuff .stuffbox>h3, .edit-post-meta-boxes-area #poststuff h2.hndle, .edit-post-meta-boxes-area #poststuff h3.hndle, #editor .acf-label.acf-accordion-title { background-color: #f6f6f6; } /* Make the entire background of Page and Post editor white if the page content section is Dynamic*/ .edit-post-layout .interface-interface-skeleton__content{ background-color: #fff; } /* Hide the higher and lower handles in ACF this can create confusion by when used by the client.*/ .handle-order-higher, .handle-order-lower{ display: none; } /* Hide ACF Sorting Options For ACF fields attatched to a Post Type*/ .postbox-header .handle-actions { flex-shrink: 0; display: flex; justify-content: center; align-content: center; } /* Make attached ACF Files Title's to display cleaner and align with vertical centering */ .postbox-header { display: flex; align-items: center; justify-content: space-between; } /* Make the ACF header look like WordPress 5.5 buttons*/ #editor .postbox>.inside { border-bottom: 1px solid #ddd; } .postbox .handlediv { margin-top: 0; } .edit-post-meta-boxes-area .postbox .handlediv { background-color: #007cba; color: #fff; } .toggle-indicator{ color: #fff; } #poststuff .stuffbox>h3, #poststuff h2, #poststuff h3.hndle { font-size: 14px; padding: 0 0 0 10px; margin: 0; line-height: 0 ; background-color: transparent; } .edit-post-meta-boxes-area #poststuff h2.hndle { background-color: transparent; } .acf-postbox .acf-hndle-cog{ padding: 0 10px 0 10px; transition: all 0.25s; } .acf-postbox .acf-hndle-cog:hover{ padding: 0 10px 0 10px; background-color: #007cba; color: #fff; } /* Tweaked the Edit Field Group on the Sidebar */ #side-sortables .handle-actions a{ display: flex; width: 30px; justify-content: center; align-content: center; padding: 0; opacity: 0; } #side-sortables .handle-actions a:hover{ opacity: 1; } /* Added this to hide an ACF Label if we don't to see it. */ .hide-label .acf-label{ display: none; } /* This hides the logout and links to User Settings. I added this becuase kept accidentally clicking the link and going to the admin section. */ .ab-top-secondary.ab-top-menu{ display: none; } /* Created a custom logout button for the sidebar attached to logged in users via ACF. */ .logout_btn .button{ border:none; background-color: #a00000; color: #fff; font-weight: 600; text-align: center; padding: 5px 0 5px 0; } .logout_btn .button:hover{ background-color: #ff0000; color: #fff; transition: all 0.3s; }

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.