Sideview 디자인을 내맘데로 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

Sideview 디자인을 내맘데로 정보

Sideview 디자인을 내맘데로

본문



그누보드 게시판에서 이름을 클릭하면 나오는 사이드뷰(sideview) 디자인 변경하는 방법입니다.
사이드뷰는 id 값이 nameContextMenu  로 되어있기 때문에 스타일쉬트 (StyleSheet, CSS) 로 변경이 가능합니다.

style.css 파일에서 아래와 같이 선언하여 활용하시면 됩니다.

#nameContextMenu { }

이해를 돕기위해 몇가지 예제를 시행해 보겠습니다.
우선 사이드뷰의 외곽선과 배경색을 변경해보겠습니다.

#nameContextMenu { border:1px solid #000; background-color:#efefef;  }




다음엔 폰트를 변경해보겠습니다.


#nameContextMenu a { font-family:dotum; font-size:11px; }

사이드뷰 속의 글자들이 모두 링크걸려있기 때문에 #nameContextMenu 뒤에 a 를 추가하여
사이드뷰 속의 모든 링크의 속성을 변경하게 됩니다. 
위의 예제에서는 폰트 종류를 돋움으로, 사이즈를 10px 로 설정하였습니다.
bold 로 하고자 할때는 아래와 같이 하면 됩니다.


#nameContextMenu a { font-family:dotum; font-size:11px; font-weight:bold; }

추천
6

댓글 11개

저는 디자인은 아니고 스크립트를 재구성해서 AJAX와 연동해서 쓰고 있었는데
디자인을 바꾸면 더 유용하겠네요...
sideview를 ajax로 바꾸셨나요? 필요할때만 정보를 가지고 오게요???
sideview를 보는 빈도가 생각보다 높지 않기 때문에, ajax로 필요할때만
정보를 가지고 오게하는게 효율측면에서 좋을 수 있죠.

흐~ 소스공개좀...
ajax와의 연동이 sideview를 ajax로 나오게 했다기 보다는
sideview로 값을 선택하면 따로 ajax로 값이 입력되게 한것이었습니다..
특징이라면... 쪽지, 메일, 자기소개... 처럼 정해진 것이 아닌
사용자 정의 사이드뷰라고 하는 것이 제일 정확할 듯...
사실상 linkfunction 정도로 사용한거라서요... 별로 기대하실 것은 아니고...
추후로 sideview자체를 ajax로 나오게 하는것도 생각해봐야겠네요... ^^
#nameContextMenu { border:1px solid #000; background-color:#efefef;  }

이거 그대로 적용했는데 테두리는 바뀐는데 바탕색은 변화가 없네요.
전체 44 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT