Sửa icon bị lệch trọng giao diện tùy chỉnh WordPress theme Flatsome

Nhiều bạn sử dụng Theme Flatsome 3.18.5 hoặc một số version khác bị lỗi icon nhảy lung tung rất thiếu thẩm mỹ đúng không? Cách sửa đơn giản thôi, bạn chỉ cần dán đoạn mã này vào Function.php là có thể fix lại thẩm mỹ hơn rồi:

// Cân đều hai bên của admin bar bằng Flexbox

function lp_balance_admin_bar() {
    echo '<style>
      /* Biến container .quicklinks thành flex và đẩy hai nhóm ul ra hai đầu */
      #wpadminbar .quicklinks {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      }

      /* Các <ul> con cũng flex để các <li> liền nhau hơn */
      #wpadminbar #wp-admin-bar-root-default,
      #wpadminbar #wp-admin-bar-top-secondary {
        display: flex;
      }
    </style>';
}
add_action( 'admin_head', 'lp_balance_admin_bar' );
add_action( 'wp_head',    'lp_balance_admin_bar' );



// Thêm vào cuối functions.php của theme (hoặc plugin riêng)

add_action( 'customize_controls_enqueue_scripts', 'lp_align_customizer_icons' );
function lp_align_customizer_icons() {
    // Chèn CSS inline lên bộ style customize-controls
    wp_add_inline_style( 'customize-controls', '
        /* Dùng flex để cả button và nội dung luôn nằm ngang */
        .wp-full-overlay-sidebar .accordion-section-title {
            display: flex !important;
            align-items: center !important;
            padding-left: 8px !important; /* sửa indent nếu cần */
        }

        /* Icon (dashicons hoặc svg) */
        .wp-full-overlay-sidebar .accordion-section-title .dashicons,
        .wp-full-overlay-sidebar .accordion-section-title .customize-section-title-icon {
            display: inline-flex !important;
            align-self: center !important;
            margin-right: 6px !important;  /* khoảng cách giữa icon & text */
            top: auto !important; /* reset nếu bị lệch */
        }

        /* Phần text tiêu đề */
        .wp-full-overlay-sidebar .accordion-section-title .customize-section-title-text,
        .wp-full-overlay-sidebar .accordion-section-title h3 {
            display: inline-block !important;
            line-height: 1 !important;
            margin: 0 !important;
        }
    ' );
}





// Tuỳ biến giao diện admin

add_action('admin_head', 'lamphuc_admin_ui_gradient_clean');
function lamphuc_admin_ui_gradient_clean() {
    echo '<style>
        /* Nền trắng toàn menu */
        #adminmenu, #adminmenu .wp-submenu, #adminmenu .wp-submenu-head {
            background-color: #ffffff !important;
        }




#wpadminbar .quicklinks,
.button.button-primary {
background: linear-gradient(90deg, #1c2127, #0e554d) !important;
}

.button.action {
}


#adminmenuwrap{
background-color: white !important;
}

        /* Thiết lập icon + chữ căn đều */
        #adminmenu a.menu-top {
            display: flex !important;
            align-items: center !important;
            gap: 10px;
            padding: 8px 8px !important;
            height: 20px !important;
            white-space: nowrap !important;
            overflow: hidden;
            border-radius: 0px !important;
            background: none !important;
            box-shadow: none !important;
            transition: all 0.25s ease;
        }




        #adminmenu .wp-menu-image {
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 20px !important;
            margin: 0 !important;
        }




        #adminmenu .wp-menu-image:before {
            font-size: 15px !important;
            color: #1e3a8a !important;
            transition: color 0.25s ease;
        }




        #adminmenu .wp-menu-name {
            font-weight: 500;
            font-size: 13px;
            color: #1e3a8a !important;
            transition: color 0.25s ease;
padding: 0 !important;
        }



        /* BO TRÒN + GRADIENT CHO TẤT CẢ menu khi hover/active */
        #adminmenu li.menu-top:hover > a.menu-top,
        #adminmenu li.menu-top.focused > a.menu-top,
        #adminmenu li.wp-has-current-submenu > a.menu-top,
        #adminmenu li.current > a.menu-top,

.postbox-header {
            background: linear-gradient(90deg, #1c2127, #0e554d) !important;
            color: #ffffff !important;
            border-radius: 10px !important;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
        }


.hndle.ui-sortable-handle {
color: white !important;
}

.postbox,
.postbox-header {
color: #127e76 !important;
border-radius: 10px !important;
}

        #adminmenu li.menu-top:hover,
        #adminmenu li.menu-top.focused,
        #adminmenu li.wp-has-current-submenu,
        #adminmenu li.current {
            background: none !important;
        }


        /* Đảm bảo chữ và icon trắng khi hover/active */
        #adminmenu li.menu-top:hover > a.menu-top .wp-menu-name,
        #adminmenu li.menu-top:hover > a.menu-top .wp-menu-image:before,
        #adminmenu li.wp-has-current-submenu > a.menu-top .wp-menu-name,
        #adminmenu li.wp-has-current-submenu > a.menu-top .wp-menu-image:before,
        #adminmenu li.current > a.menu-top .wp-menu-name,
        #adminmenu li.current > a.menu-top .wp-menu-image:before {
            color: #ffffff !important;
        }


        /* Submenu gradient */
        #adminmenu .wp-submenu {
            background: #f1f5f9 !important;
            padding: 0 !important;
        }


        #adminmenu .wp-submenu a {
            color: #1e3a8a !important;
            padding: 7px 20px !important;
            display: block;
            transition: all 0.3s ease;
        }


        #adminmenu .wp-submenu a:hover,
        #adminmenu .wp-submenu .current {
            background: linear-gradient(90deg, #1c2127, #0e554d) !important;
            color: #ffffff !important;
border-radius: 10px !important;
        }


        /* Xoá toàn bộ nền đen cứng đầu từ WordPress */
        #adminmenu li.menu-top:hover,
        #adminmenu li.wp-not-current-submenu:hover,
        #adminmenu li.wp-has-current-submenu,
        #adminmenu li.menu-top.focused {
            background: none !important;
        }


        #adminmenu li {
            margin: 0 !important;
        }


.page-title-action,
#doaction.button.action, #doaction2.button.action, #doaction3.button.action,
#post-query-submit.button,
#search-submit.button,
#save-post.button, 
#post-preview.preview.button,
#insert-media-button.button.insert-media.add_media,
.button.media-button.select-mode-toggle-button,
#plupload-browse-button.button,
#changeit.button, #changeit2.button,
.button.wp-generate-pw.hide-if-no-js, #destroy-sessions.button, #do_new_application_password.button.button-secondary {
background: linear-gradient(90deg, #329D9C, #56C596) !important;
            color: #ffffff !important;
border: none !important;
}

    </style>';
}


add_action('admin_head', function() {
    echo '<style>
/* Tăng khoảng cách giữa menu và submenu */
        #adminmenu .wp-has-current-submenu .wp-submenu {
            margin-top: 3px !important;
        }


        /* Ẩn mũi tên mặc định của submenu */
        #adminmenu .wp-has-submenu > a:after {
            display: none !important;
        }


        /* Vị trí chuẩn bị cho dấu chấm */
        #adminmenu .wp-has-submenu > a.menu-top {
            position: relative;
        }


        /* Mặc định: không hiển thị dấu chấm */
        #adminmenu .wp-has-submenu > a.menu-top::before {
            content: "";
            position: absolute;
            top: 50%;
            right: 12px;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            background: linear-gradient(90deg, #88CDF6, #FFFFFF) !important;
            border-radius: 50%;
            display: none; /* Ẩn mặc định */
        }

        /* Khi menu đang active hoặc được nhấp – hiển thị chấm */
        #adminmenu .wp-has-current-submenu > a.menu-top::before,
        #adminmenu li.menu-top.open > a.menu-top::before {
            display: block;
        }
    </style>';
});