Skip to content

Instantly share code, notes, and snippets.

@KittenCodes
Created January 8, 2025 07:13
Show Gist options
  • Save KittenCodes/491bb41f19910c8c1e96eef923207f9d to your computer and use it in GitHub Desktop.
Save KittenCodes/491bb41f19910c8c1e96eef923207f9d to your computer and use it in GitHub Desktop.
Fix Large Oxygen Edit Button
<?php
add_action('admin_head', 'oxygen_support_fix_editor_icon');
function oxygen_support_fix_editor_icon() {
echo '<style>
/* fix the Grid for non-full screen */
.editor-header edit-post-header {
@media (min-width: 782px) {
.editor-header:has(>.editor-header__center) {
grid-template: auto / 60px 60px minmax(min-content, 1fr) 2fr minmax(min-content, 1fr) 60px;
}
}
}
/* fix the grid items for non-full screen */
.editor-header__toolbar {
grid-column: 2 / 4;
}
.editor-header__center {
grid-column: 4 / 5;
}
.editor-header:has(>.editor-header__center) .editor-header__settings {
grid-column: 5 / -1;
}
/* fix the grid for full screen */
@media (min-width: 782px) {
.editor-header:has(>.editor-header__center) {
grid-template: auto / 60px 60px 60px minmax(min-content, 1fr) 2fr minmax(min-content, 1fr) 60px;
}
}
/* fix the grid items for full screen */
.editor-header__toolbar {
grid-column: 3 / 5;
}
.editor-header__center {
grid-column: 5 / 6;
}
.editor-header:has(>.editor-header__center) .editor-header__settings {
grid-column: 6 / -1;
}
/* make the edit button square */
.oxygen-edit-mode-button, .oxygen-edit-mode-button img {
aspect-ratio: 1 / 1;
}
</style>';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment