[티스토리] Poster 스킨 메뉴바에 프로필 넣기

티스토리 Poster 스킨 사이드 메뉴바에 프로필 넣는 법

---

 

티스토리 → 스킨편집 → HTML

 

---

 

HTML

ctrl+f로 검색

<nav id="gnb"> 아래 부분에 프로필 박스 넣는 코드 추가

 

<!-- 프로필 -->
<div class="box-profile <s_if_var_Profilebgimage>box-profile-invert</s_if_var_Profilebgimage>" style="background-image:url('<s_if_var_Profilebgimage>[# #_var_Profilebgimage_##]</s_if_var_Profilebgimage>');">
  <div class="inner-box">
  	<img src="[# #_image_##]" class="img-profile" alt="프로필사진">
  </div>
  <div class="text-profile">[# #_desc_##]
  </div> 
</div>

## 사이 공백 제거 후 사용

 

---

 

CSS

#header 아래쪽에 프로필 박스(.box-profile)랑

그 안에 프로필 사진(img-profile) & 블로그 설명(text-profile) 부분 추가

/*프로필수정*/

#header .menu .box-profile {
position: relative; margin: 10px;
border-top: 2px solid rgb(123,63,0);
border-bottom: 2px solid rgb(123,63,0);
text-align: center;
background-color: rgba(255, 255, 255, 0.432);
}

#header .menu .box-profile .img-profile {
width: 140px;
height: 140px;
margin: 30px auto 15px;
border-radius: 140px;
}

#header .menu .box-profile .text-profile {
max-width: 210px;
font-size: 15px;
line-height: 1.54; color: rgb(123,63,0);
text-align: center; /* 텍스트 가운데 정렬 */
margin: 0 auto 15px;
}