테마 변경하기

가이드/tokii in folio·2017.08.10 01:54

* 주의: 이 가이드는 리빌드된 새로운 버전에 대응한 가이드 문서입니다. 곧 새로운 버전으로 찾아뵙겠습니다.

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


테마를 변경하기 전에

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

테마(대표색) 변경하기

  1. 티스토리에 로그인 후 관리자 메뉴에서 꾸미기 > HTML/CSS 편집으로 이동합니다.
  2. CSS 탭으로 이동 후 감싸져있는 주석을 해제해주세요. (주석은 /*로 시작하여 */로 끝납니다.)
    /* 색 변경 */
    /* 변경하시려면 주석을 해제해주세요
    ...
    */
    
  3. 하이라이팅된 모든 색상코드를 변경하고자 하는 색상코드 값으로 변경해주세요.
    /* 색 변경 */
    .button {
      background-color: #78b92c !important;
    }
    
    .site input[type="text"]:focus,
    .site input[type="email"]:focus,
    .site input[type="url"]:focus,
    .site input[type="password"]:focus,
    .site input[type="search"]:focus,
    .site textarea:focus {
      border-color: #78b92c !important;
    }
    
    .comment-item > .comment .comment-body > footer a,
    .site .taglist li a.cloud1,
    .site .taglist li a.cloud2,
    .header .account-dropdown > .menu > nav a.primary,
    .sidebar .module h2,
    .search-header > h2 > em,
    .entry > .article .details > footer .item.primary a,
    .entry-article > header > .category 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 .activity .comment-toggle em,
    .navigation .nav-item span.selected,
    .comment-item > .comment .comment-body > header .details > .item.date a,
    .entry-article .moreless_fold,
    .entry-article .moreless_top,
    .entry-article .moreless_bottom,
    .tt_more_preview_comments_wrap .tt_more_preview_comments_text,
    .site > .account .module.user a.primary,
    .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,
    .header .site-title a:hover,
    .header .account-dropdown > .menu > header > a:hover .details > .blog,
    .header .account-dropdown > .menu > nav a:hover,
    .sidebar .site-toolbar .section-title .title:hover,
    .sidebar .module a:hover,
    .sidebar .module a:hover > em,
    .sidebar .module.profile > article > h2 a:hover,
    .sidebar .module.category .link_tit:hover,
    .sidebar .module.category .link_item:hover,
    .sidebar .module.category .link_sub_item:hover,
    .entry > .article .details > header > h3 a:hover,
    .entry > .article .details > .summary:hover,
    .entry > .article .details > .summary:hover p,
    .entry > .article .details > footer .item a:hover,
    .entry-article > header > h2 a:hover,
    .entry-article > header > .details > .item a:hover,
    .entry-section.author-info .author-body > header a:hover,
    .entry-section.author-info .author-body > header .details .item a:hover,
    .entry-section.author-info .author-body > footer a,
    .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,
    .header .account > a:hover,
    .site > .account .module a:hover,
    .site > .account .module.profile > a:hover .details .blog {
      color: #78b92c !important;
    }
    
    .navigation .nav-end:not(.no-more-prev):not(.no-more-next):hover > svg {
      fill: #78b92c !important;
    }
    
신고
Posted by 9월 'ㅅ')/

태그

관련 글

네이버톡톡

네이버 톡톡
댓글 0

티스토리 툴바