테마 변경하기

가이드/tokii at whale2017.09.04 00:11

테마 색상을 변경하여 나만의 테마를 만들어보세요.


테마를 변경하기 전에

  1. 이 설정은 어두운 테마에서도 사용이 가능합니다.
  2. 메인 페이지(티에디션)을 사용할 경우 테마 변경하기(메인 페이지)도 같이 변경해주세요.
  3. 아래 코드에서 하이라이팅된 모든 색상코드를 변경하고자 하는 색상코드 값으로 변경해주세요. (ex: #ff8360)

주석 제거방법

  1. 주석은 /*로 시작하여 */로 끝납니다.
  2. 앞 또는 뒤의 주석을 해제하지 않을 경우 정상적으로 동작하지 않을 수 있습니다.
    /* 색 변경 */
    /* 변경하시려면 주석을 해제해주세요
    ...
    */
    

1. 사이드바, 모바일 상단메뉴 배경색 변경하기

  • 하이라이팅된 모든 색상코드를 변경하고자 하는 색상코드 값으로 변경해주세요.
    /* 사이드바, 모바일 상단메뉴 > 배경색 */
    /* [1] 변경하시려면 주석을 해제해주세요
    body:before {
      background-color: #f7f5f2 !important;
    }
    
    @media (max-width: 960px) {
      .sidebar {
        background-color: #f7f5f2 !important;
      }
    }
    */

2. 본문 대표색 변경하기

  • 하이라이팅된 모든 색상코드를 변경하고자 하는 색상코드 값으로 변경해주세요.
    
    /* 대표색 */
    /* [2] 변경하시려면 주석을 해제해주세요
    .button {
      background-color: #78b92c !important;
    }
    
    .comment-item > .comment .comment-body > header .details > span.date a,
    .comment-item > .comment .comment-body > footer a,
    .search-header > h2 > em,
    .entry-article.tag .taglist li > a.cloud1,
    .entry-article.tag .taglist li > a.cloud2,
    .entry-article > header .details > span.primary,
    .entry-article > header .details > span.primary a,
    .entry-article .article a,
    .entry-section.tag > .section-content a,
    .entry-section.related-article .related-more,
    .entry-section.related-article .related-more a,
    .entry-section.comment .comment-toggle em,
    .entry-article > header .details > span a:hover,
    .entry-article .moreless_fold,
    .entry-article .moreless_top,
    .entry-article .moreless_bottom,
    .tt_more_preview_comments_wrap .tt_more_preview_comments_text,
    .comment-item > .comment .comment-body > header .author a:hover,
    .site .taglist li a.cloud3:hover,
    .site .taglist li a.cloud4:hover,
    .site .taglist li a.cloud5:hover,
    .entry-article > header > h2 a:hover,
    .entry-article > header > .details > span a:hover,
    .related-items > .related-item a:hover .details > header h3,
    .entry-section.comment .activity a:hover,
    .navigation .nav-item:hover span:not(.selected),
    .footer-nav a:hover,
    .footer address a:hover {
      color: #78b92c !important;
    }
    
    .navigation .nav-end:not(.no-more-prev):not(.no-more-next):hover > svg {
      fill: #78b92c !important;
    }
    
    @media (min-width: 641px) {
      .navigation .nav-item span.selected {
        color: #78b92c !important;
      }
    }
    
    .entry > .article-item .details > footer > span.primary a,
    .entry > .article-item .details > header > h3 a:hover,
    .entry > .article-item .details > .summary:hover,
    .entry > .article-item .details > .summary:hover p,
    .entry > .article-item .details > footer > span a:hover {
      color: #78b92c !important;
    }
    */
    

3-1. 사이드바 대표백 변경하기(배경색이 밝은 경우)

  • 하이라이팅된 모든 색상코드를 변경하고자 하는 색상코드 값으로 변경해주세요.
    
    /* 사이드바 > 대표색(배경색이 밝은 경우) */
    /* [3-1] 검은색 글씨가 잘 보일 경우 이 주석을 해제해주세요.
    .sidebar input[type="text"],
    .sidebar input[type="email"],
    .sidebar input[type="url"],
    .sidebar input[type="password"],
    .sidebar input[type="search"],
    .sidebar .taglist li a.cloud1,
    .sidebar .taglist li a.cloud2,
    .sidebar .module.recent-comment li,
    .sidebar .module > a,
    .sidebar .module li > em,
    .sidebar .module.listbox a,
    .sidebar .module.category .link_sub_item,
    .sidebar .site-profile > article > .site-title a:hover,
    .sidebar .taglist li a.cloud1:hover,
    .sidebar .taglist li a.cloud2:hover,
    .sidebar .taglist li a.cloud3:hover,
    .sidebar .taglist li a.cloud4:hover,
    .sidebar .taglist li a.cloud5:hover,
    .sidebar .module.menubox a:hover,
    .sidebar .module.listbox a:hover,
    .sidebar .module.category .link_tit:hover,
    .sidebar .module.category .link_item:hover,
    .sidebar .module.category .link_sub_item:hover {
      color: #78b92c !important;
    }
    */
    

3-2. 사이드바 대표백 변경하기(배경색이 어두운 경우)

  1. 배경색이 어두운 경우(검은색 글씨가 잘 안보일 경우) bodysidebar-dark 클래스를 추가합니다.
    <body class="site-blog sidebar-dark">
    ...
    <body>
    
  2. CSS 탭으로 이동하여 하이라이팅된 모든 색상코드를 변경하고자 하는 색상코드 값으로 변경해주세요.
    
    /* 사이드바 > 대표색(배경색이 어두운 경우) */
    /* [3-2] 하얀색 글씨가 잘 보일 경우 이 주석을 해제해주세요.
    body.sidebar-dark .sidebar input[type="text"],
    body.sidebar-dark .sidebar input[type="email"],
    body.sidebar-dark .sidebar input[type="url"],
    body.sidebar-dark .sidebar input[type="password"],
    body.sidebar-dark .sidebar input[type="search"],
    body.sidebar-dark .sidebar .module {
      border-color: #78b92c !important;
    }
    
    body.sidebar-dark .sidebar input:-ms-input-placeholder {
      color: #78b92c !important; }
    body.sidebar-dark .sidebar input::-webkit-input-placeholder {
      color: #78b92c !important; }
    body.sidebar-dark .sidebar input:-moz-placeholder {
      color: #78b92c !important; }
    body.sidebar-dark .sidebar input::-moz-placeholder {
      color: #78b92c !important; }
    
    body.sidebar-dark .sidebar input[type="text"],
    body.sidebar-dark .sidebar input[type="email"],
    body.sidebar-dark .sidebar input[type="url"],
    body.sidebar-dark .sidebar input[type="password"],
    body.sidebar-dark .sidebar input[type="search"],
    body.sidebar-dark .sidebar .taglist li a.cloud1,
    body.sidebar-dark .sidebar .taglist li a.cloud2,
    body.sidebar-dark .sidebar .site-profile > article > .site-title a,
    body.sidebar-dark .sidebar .module.recent-comment li,
    body.sidebar-dark .sidebar .module > h2,
    body.sidebar-dark .sidebar .module > a,
    body.sidebar-dark .sidebar .module li,
    body.sidebar-dark .sidebar .module.menubox a,
    body.sidebar-dark .sidebar .module.listbox a > em,
    body.sidebar-dark .sidebar .module.category .link_tit,
    body.sidebar-dark .sidebar .module.category .link_item ,
    body.sidebar-dark .sidebar .site-profile > article > .site-title a:hover,
    body.sidebar-dark .sidebar .taglist li a.cloud1:hover,
    body.sidebar-dark .sidebar .taglist li a.cloud2:hover,
    body.sidebar-dark .sidebar .taglist li a.cloud3:hover,
    body.sidebar-dark .sidebar .taglist li a.cloud4:hover,
    body.sidebar-dark .sidebar .taglist li a.cloud5:hover,
    body.sidebar-dark .sidebar .module a:hover,
    body.sidebar-dark .sidebar .module.listbox a:hover,
    body.sidebar-dark .sidebar .module.category .link_tit:hover,
    body.sidebar-dark .sidebar .module.category .link_item:hover,
    body.sidebar-dark .sidebar .module.category .link_sub_item:hover {
      color: #78b92c !important;
    }
    
    body.sidebar-dark .sidebar .site-header .aside-button > svg {
      fill: #78b92c !important;
    }
    */
    
신고

작성자

Posted by 9월 'ㅅ')/

태그

관련 글

네이버톡톡

네이버 톡톡

댓글 영역

티스토리 툴바