[이윰] 대문 색상 변경 > Gnuboard

eyoom/theme/basic/css/style.css

1. 메인 메뉴에 배경색을 넣어봅니다.

749 line
.header-e1.header .navbar-collapse
을 찾아서

background: #배경색;
을 삽입해줍니다.

.header-e1.header .navbar-collapse {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #배경색;
}

2. 1차 메뉴 글자색을 바꿔봅니다.

770 line
.header-e1.header .navbar-default .navbar-nav > li > a
을 찾아서

color: #글자색;
을 삽입해줍니다.

.header-e1.header .navbar-default .navbar-nav > li > a {
    font-size: 13px;
    padding: 11px 30px 10px 20px;
    color: #글자색;
}

3. 1차 메뉴 사이 세로선 삭제

754 line
.header-e1.header .navbar-default .navbar-nav > li
을 찾아서

좌우 border 값을 0px로 바꿉니다.

.header-e1.header .navbar-default .navbar-nav > li {
    margin-left: -1px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

4. 1차 메뉴를 열었을 때의 글자색을 넣어봅니다.

786 line
.header-e1.header .navbar-default .navbar-nav > .active > a
을 찾아서

color: #글자색;
을 삽입해줍니다.

.header-e1.header .navbar-default .navbar-nav > li > a:hover,
.header-e1.header .navbar-default .navbar-nav > .active > a {
    border-top: solid 1px #e33334;
    border-bottom: solid 2px transparent;
    color: #글자색;
}

5. 1차 메뉴 hover와 active 글자색, 배경색 달리하기

위 4번 항목의 변형입니다.

785 line
.header-e1.header .navbar-default .navbar-nav > li > a:hover
786 line
.header-e1.header .navbar-default .navbar-nav > .active > a
을 찾아서

적당히 수정합니다.

.header-e1.header .navbar-default .navbar-nav > li > a:hover,
.header-e1.header .navbar-default .navbar-nav > .active > a {
    border-top: solid 1px #e33334;
    border-bottom: solid 2px transparent;
}

를...

.header-e1.header .navbar-default .navbar-nav > li > a:hover {
    border-top: solid 1px #e33334;
    border-bottom: solid 2px transparent;
    color: #글자색;
    background: #배경색;
}
.header-e1.header .navbar-default .navbar-nav > .active > a {
    border-top: solid 1px #e33334;
    border-bottom: solid 2px transparent;
    color: #글자색;
    background: #배경색;
}

로...


6. 2차 메뉴를 수정하려면...

474 line
.header .dropdown-menu li a
과

483 line
.header .dropdown-menu li > a:hover
을 찾아서

적절히 수정하세요.

.header .dropdown-menu li a {
    color: #687074;
    font-size: 13px;
    font-weight: 400;
    padding: 9px 15px;
    border-bottom: solid 1px #eee;
}
 
.header .dropdown-menu .active > a,
.header .dropdown-menu li > a:hover {
    color: #fff;
    filter: none !important;
    background: #e33334 !important;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

7. 푸터 좌우에 배경색을 넣어봅니다.

1061 line
.footer-e1 .footer
을 찾아서

배경색을 바꿔줍니다.
참고로...
.footer .container
배경색은 #f8f8f8입니다.

.footer-e1 .footer {
    background: #배경색;
    border-top: 1px solid #ddd;
}

사이의 세로선을 없애려면...
937 line
.footer .container
찾아서
좌우 border 값을 0px로 바꾸거나 라인색을 배경색과 일치시키면 됩니다만
선이 있는 편이 더 이쁘더군요.


8. 카피라이터 부분의 배경색과 글자색을 바꿔봅니다.

1109 line
.footer-e1 .copyright
와

1115 line
.footer-e1 .copyright p
을 찾아서

적절히 바꿔줍니다.

.footer-e1 .copyright {
    border-top: none;
    background: #eee;
    border-top: 1px solid #ddd;
}
 
.footer-e1 .copyright p {
    color: #555;
}

9. 오른쪽 아웃로그인이 있는 부분의 배경색도 푸터 콘테이너와 동일합니다.

수정하려면...

eyoom/theme/basic/css/basic_bs.css

59 line
.basic-bs .basic-bs-side
을 찾아서

적절히 수정합니다.

.basic-bs .basic-bs-side {
    margin-top: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: 0 0 0 1px #ddd;
    background: #f8f8f8;
}

추천0 비추천 0