묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
컨텐츠 위젯-이미지 테두리 추가 방법 부탁드려요~!!
2011.07.06 21:52
기본적으로 XE에서 제공하는 컨텐츠 위젯을 사용하고 있습니다.
갤러리 형식을 사용하는데 썸네일 이미지에 테두리가 없으니 좀 불편합니다.
이미지에 테두리를 추가하는 방법을 알고 싶습니다.
CSS 파일에 테두리 색깔과 굵기 설정을 추가하는 방법을 좀 가르쳐 주세요~~!!
아래 빨간색 부분에 해당하는 테두리 추가하는 방법입니다.
홈페이지 주소는 http://www.hmuchurch.com 입니다.^^
갤러리 형식을 사용하는데 썸네일 이미지에 테두리가 없으니 좀 불편합니다.
이미지에 테두리를 추가하는 방법을 알고 싶습니다.
CSS 파일에 테두리 색깔과 굵기 설정을 추가하는 방법을 좀 가르쳐 주세요~~!!
아래 빨간색 부분에 해당하는 테두리 추가하는 방법입니다.
홈페이지 주소는 http://www.hmuchurch.com 입니다.^^
/xe/widgets/content/skins/default/css/widget.css 파일 찾아 여시고,
.widgetGalleryA LI .thumb IMG 를 찾으셔서
스타일을 추가해 보세요.
테두리만 #cccccc 색상으로 두께 1px로 줄 경우
.widgetGalleryA LI .thumb IMG { .....; border:1px #cccccc solid; }
그리고 그림과 약간 간격이 있었으면 싶을 경우
.widgetGalleryA LI .thumb IMG { .....; border:1px #cccccc solid; padding:3px; }
그리고 마우스가 오버될 때 테두리 색상이 #000000 색상으로 변했으면 싶을 경우
.widgetGalleryA LI .thumb IMG <- 이 줄을 몽땅 복사해서 바로 아래에 한줄 더 만들어 주고 필요한 부분만 수정.
.widgetGalleryA LI .thumb IMG { .....; border:1px #cccccc solid; padding:3px; }
.widgetGalleryA LI .thumb IMG:hover { .....; border:1px #000000 solid; padding:3px; }
를 적용해 저장해 보세요.