사용하는 테마 의 css 파일을 수정 합니다.
아래 적용한 테마는 Devryan 테마 입니다.
수정할 파일과 경로
xe3 설치폴더/ plugins/ devryan/ Components/ Themes/ Devryan/ assets/ css/ theme.css
해당 파일 제일 하단에 아래의 코드를 넣어면 배경색은 엷은 하늘색 / 구분선은 조금 짙은 색으로 출력됩니다.
/* 1. 헤더 전체 영역 배경색 및 하단 선 설정 (마진 제거) */
#header.xe-theme__header {
background-color: #f7f9fa !important; /* 연한 회색 배경 */
border-bottom: 1px solid #d1d5db !important; /* 하단 경계선 */
margin-bottom: 0px !important; /* 기존 마진 초기화 */
position: relative !important;
display: block !important;
}
/* 2. 내부 박스 및 메뉴판의 흰색 배경 투명화 (유지) */
#header.xe-theme__header .header-inner-box,
#header.xe-theme__header nav,
#header.xe-theme__header .xe-theme__gnb,
#header.xe-theme__header .gnb {
background-color: transparent !important;
background: transparent !important;
}
/* 3. 로그인 정보와 메뉴가 겹치지 않도록 블록 구조 유지 */
#header.xe-theme__header .header-inner-box {
display: block !important;
}
/* 4. 오직 PC 메뉴의 위쪽 여백만 움직여서 로고와 수평 맞춤 */
#header.xe-theme__header .gnb--pc {
margin-top: 5px !important;
}
/* 5. ⚠️ [핵심 수정] 기존 마진/패딩을 지우고, 헤더 가상 요소를 이용해 아래 목록을 30px 강제로 밀어내기 */
#header.xe-theme__header::after {
content: "" !important;
display: block !important;
clear: both !important;
height: 30px !important; /* 이 높이만큼 아래 목록 영역이 무조건 밑으로 밀려납니다 */
background-color: transparent !important; /* 투명한 여백 공간 */
}
/* 6. 본문 영역의 중복 패딩 초기화 */
main#container.xe-theme__content-container {
padding-top: 0px !important;
}