카테고리 없음

hELLO 테마 색상 커스텀 🎨

onieyh 2023. 6. 29. 17:23
 

1. 티스토리 테마 

티스토리 hELLO 테마를 다운 받아 기본적인 색상만 변경

 

https://pronist.tistory.com/5?category=844785

 

hELLO 티스토리 스킨을 소개합니다.

hELLO 스킨은 본래 기능의 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기

pronist.dev

 

 

 

 

2. 색상 변경

 

 

카테고리 색 변경

.permalink>.header .heading .category {
  color: hsla(273, 100%, 87%, 0.849);
  // color 변경 
}

 

 

공감 옆 아이콘 색 변경

.permalink .container_postbtn .postbtn_like .wrap_btn:not([id^=reaction-])>button {
  color: hsla(273, 100%, 87%, 0.849) !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

 

 

아이콘에 마우스 가까이 하면 색 변경

.permalink .container_postbtn .postbtn_like .wrap_btn:not([id^=reaction-])>button:hover {
  border-color: hsla(273, 100%, 87%, 0.849);
  background-color: hsla(273, 100%, 87%, 0.849);
}

 

 

공감 색 변경 & 마우스 가까이 하면 색 변경

// 마우스 가까이 하기 전 색상
.permalink .container_postbtn .postbtn_like .wrap_btn[id^=reaction-] button {
  border: 1px solid hsla(273, 100%, 87%, 0.849);
  background-color: hsla(273, 100%, 87%, 0.849);
}


// 마우스 가까이 했을 때 색 변경
.permalink .container_postbtn .postbtn_like .wrap_btn[id^=reaction-] button:hover {
  border-color: rgba(0, 0, 0, 0.1);
  background-color: hsla(273, 87%, 79%, 0.849);

}

 

 

카테고리 다른글 컨테이너 색상

.permalink .related {
  background-color: hsla(273, 85%, 92%, 0.726);
}

 

 

스크롤바 색상 변경

#scroll-indicator .progress-container .progress-bar {
  background-color: hsla(273, 100%, 87%, 0.849);
}

 

 

블로그명 색상 형광펜 색 변경

.list header .heading .title {
  box-shadow: inset 0 -10px 0 hsla(273, 100%, 87%, 0.849); 
}

 

페이지 이동 숫자 색 변경

#__paging li a .selected {
  background-color: hsla(273, 100%, 87%, 0.849);
}

 

 

구독 버튼 (내 아이디로 로그인시는 안보임!)

#__nav .right div[class=btn_tool] .btn_menu_toolbar.btn_subscription {  
  border: 1px solid hsla(273, 100%, 87%, 0.849); 
  background-color: hsla(273, 100%, 87%, 0.849);
}


// 마우스 가까이 하면 색상 변경
#__nav .right div[class=btn_tool] .btn_menu_toolbar.btn_subscription:hover {
  border-color: rgba(202, 146, 248, 0.849);
  background-color: rgba(202, 146, 248, 0.849);
}

 

전체 목록에서 카테고리 색 변경

.list .item .description .category a {
  color: hsla(273, 100%, 87%, 0.849) !important;
}

 

 

글에 밑줄 색상 변경

u {
    box-shadow: inset 0 -10px 0 hsla(272, 100%, 93%, 0.849); 
}

 

 

다른 계정에서는 구독(?)으로 보이는데 저 색상 변경

.permalink .container_postbtn .btn_subscription:hover {
  border-color: hsla(51, 100%, 57%, 0.938);
}

.permalink .container_postbtn .btn_subscription::before {
  color: hsla(51, 100%, 57%, 0.938);
}

// 마우스 가까이 했을 때 
.permalink .container_postbtn .btn_subscription:hover {
  background-color: hsla(44, 100%, 50%, 0.938);
}

 

 

끝 - ! 

반응형
저작자표시