본문으로 바로가기


[Flatinum 프로필 모듈 수정]


아직 다른 스킨은 사용해보지 않았지만 Flatinum 스킨, 이쁘긴 한데 은근히 손이 많이 가는 군요. 아무래도 처음 스킨을 이것저것 건드리다보니 모르는 것도 많아 시간이 오래 걸리는 것 같습니다. 그 만큼 Flatinum 스킨에 대한 애정이 깊어지네요. 아마도 이 블로그는 계속해서 이 스킨을 유지할 것 같습니다. 혹시 제가 다른 블로그를 만들게 된다면 그 블로그에서는 다른 스킨을 사용해야겠습니다. 여하튼 이번 포스팅에서는 Flatinum 스킨 초기에 기본적으로 '사이드바2'에 들어가 있는 프로필 모듈이라는 것을 수정하도록 하겠습니다.




'프로필 모듈' 초기 모습


▲ Flatinum 스킨 '프로필 모듈' 초기 모습


프로필 모듈은 제 블로그에서 가장 아래에 위의 그림과 같이 위치하고 있습니다. 구체적으로는 '사이드바2'의 첫 부분에 위치하고 있는 것이죠. 위의 그림은 초기에 Flatinum 스킨을 적용하면 볼 수 있는 모습입니다. 사진이 완전한 원형이 아니라 조금 퍼져있고 프로필 소개 글이 양쪽 정렬이 된 것인지 글자 간의 간격이 어색하네요. 그리고 제가 사용하지 않는 사이트의 링크 아이콘들이 많습니다.



'프로필 모듈' 수정


▲ HTML 소스에서 '프로필 모듈' 부분


그럼 HTML 편집에 들어가서 '프로필 모듈' 부분을 찾아줍니다. 's_sidebar'라는 키워드로 검색하시거나 '프로필 모듈' 이라는 키워드로 검색하시면 위의 소스를 찾으실 수 있습니다. 이 소스는 이미 제가 수정한 것이라는 점 참고하시고요. 위 소스를 보시면 <!-- 프로필 모듈 --> 이라는 주석으로 명시를 해놓았습니다. 이 주석 내부 텍스트를 수정하게 되면 관리자 페이지의 사이드바 설정에서 모듈의 이름이 변경됩니다. 그리고 밑에 빨간 박스로 표시한 것들이 차례대로 '프로필 이미지', '프로필 소개', '사이트 링크 아이콘' 입니다. 


▲ '프로필 모듈' 수정 결과 모습


먼저 저는 '프로필 이미지'에서 img-circle을 지워서 이미지가 그냥 사각형으로 보이도록 했습니다. 그리고 넓이를 '프로필 모듈' 영역의 100%를 차지 하도록 수정하였습니다. 그리고 '프로필 소개'에서 text-center를 덧붙여 소개 텍스트들이 가운데 정렬하도록 하였습니다. 마지막으로 하단의 '사이트 링크 아이콘'은 제가 사용하는 것만 남기고 모두 주석 처리를 하였습니다. 링크에 연결될 주소는 입력하지 않았지만 입력하고 싶으신 분들은 href 옆에 #으로 된 부분을 지우고 본인의 페이스북 주소나 인스타그램 주소 등을 넣으시면 됩니다. 


아직 HTML을 어떻게 더 고칠 수 있는 지를 몰라 text-center를 붙여넣는 것도 한참 헤매다가 방법을 찾아서 처리했습니다. 갈길이 머네요. 그래도 하나씩 수정해나가는 맛이 있습니다. 저와 같은 방식 외에 다른 설정을 하고 싶으신 분들은 다른 분들이 정리해놓은 글을 참고하시면 좋을 것 같습니다.





관련 포스팅


[티스토리] Flatinum 스킨 수정 시리즈


유익한 시간되셨다면 하단에 공감 버튼을 눌러주세요.

여러분의 공감은 저에게 큰 힘이 됩니다.