관리자 GNB 색상 변경하기

📌 요구사항 정의 및 분석

• 상점의 아이덴티티를 나타내는 색상이 존재하여, 해당 색상을 상점 관리자의 GNB에 적용하고 싶음.

• 고도몰 상점 관리자 GNB 영역은 수정이 가능한 부분임을 확인하여 해당 부분 색상을 수정하고자 함.

📝 개선안 정리

• 색상을 변경하고자 하는 GNB 범위 선정

• 영역 별로 다른 색상을 적용하며, ➀번은 #213D54으로 ➁번은 #5A86CB 으로 변경

🛠️ 튜닝 진행

• admin/header.php 파일에서 수정하고자 하는 영역의 클래스를 확인합니다.

• 관리자페이지 CSS를 추가할 수 있는 admin/css/admin-custom.css 파일을 엽니다.

admin-custom.css

@charset "utf-8";

/**
 * custom css 입니다. 추가적인 css는 여기에 작성을 해주세요.
 */

• ➀번 클래스의 background-color를 #213D54 로 지정합니다.

admin-custom.css

@charset "utf-8";

#header .navbar {
    background-color: #213D54;
}

• ➁번 클래스의 background-color를 #5A86CB 로 지정합니다.

admin-custom.css

@charset "utf-8";

#header .nav.navbar-nav.reform {
    background-color: #5A86CB;
}

🔖 결과 확인