웹마스터 팁
페이지 숫자에 네이버처럼 사각테두리 씌우기
2008.06.15 12:42
페이지 숫자 나타나는 부분에 아래처럼 사각형을 씌워보겠습니다
1번은 선택되어진 페이지 이고 3번은 마우스 오버(레인보우 링크 때문에 분홍색) 했을때도 사각형이 생깁니다
/zbxe/modules/board/skins/보드스킨/css 열고 아래 빨간색 코드를 수정합니다
1번은 선택되어진 페이지 이고 3번은 마우스 오버(레인보우 링크 때문에 분홍색) 했을때도 사각형이 생깁니다
/zbxe/modules/board/skins/보드스킨/css 열고 아래 빨간색 코드를 수정합니다
/* pageNavigation */
.pageNavigation { text-align:center; font:bold 11px Tahoma; margin-top:5px;}
.pageNavigation a { font:bold 1em Tahoma; color:#666666; text-decoration:none; margin:0 10px 0 0; }
.pageNavigation .current { font:bold 1em Tahoma; text-decoration:none; margin:0 10px 0 0; }
.pageNavigation a:hover { background:#F7F7F7; text-decoration:none; }
.pageNavigation a:visited { color:#999999; }
.pageNavigation a.goToFirst img, .pageNavigation a.goToLast img { margin-bottom:2px;}
.pageNavigation { text-align:center; font:bold 11px Tahoma; margin-top:5px;}
.pageNavigation a { font:bold 1em Tahoma; color:#666666; text-decoration:none; margin:0 10px 0 0; }
.pageNavigation .current { font:bold 1em Tahoma; text-decoration:none; margin:0 10px 0 0; }
.pageNavigation a:hover { background:#F7F7F7; text-decoration:none; }
.pageNavigation a:visited { color:#999999; }
.pageNavigation a.goToFirst img, .pageNavigation a.goToLast img { margin-bottom:2px;}
↓
/* pageNavigation */
.pageNavigation { text-align:center; font:bold 11px Tahoma; margin-top:5px;}
.pageNavigation a { font:bold 1em Tahoma; color:#666666; text-decoration:none; margin:0 6px 0 6px;}
.pageNavigation .current { border:1px solid #e0e1db; padding:2px 5px 2px 5px; background:#F7F7F7; font:bold 1em Tahoma; text-decoration:none; }
.pageNavigation a:hover { border:1px solid #e0e1db; padding:2px 5px 2px 5px; margin: 0 0 0 0; background:#F7F7F7; text-decoration:none; }
.pageNavigation a:visited { color:#999999; }
.pageNavigation a.goToFirst img, .pageNavigation a.goToLast img { margin-bottom:2px;}
테두리 색은 #e0e1db, 크기는 padding을 자신에 맞게 2개다 수정해 주시면됩니다(↑→↓← 순입니다).pageNavigation { text-align:center; font:bold 11px Tahoma; margin-top:5px;}
.pageNavigation a { font:bold 1em Tahoma; color:#666666; text-decoration:none; margin:0 6px 0 6px;}
.pageNavigation .current { border:1px solid #e0e1db; padding:2px 5px 2px 5px; background:#F7F7F7; font:bold 1em Tahoma; text-decoration:none; }
.pageNavigation a:hover { border:1px solid #e0e1db; padding:2px 5px 2px 5px; margin: 0 0 0 0; background:#F7F7F7; text-decoration:none; }
.pageNavigation a:visited { color:#999999; }
.pageNavigation a.goToFirst img, .pageNavigation a.goToLast img { margin-bottom:2px;}
댓글 8
-
쿠로츠지
2008.06.15 22:37
감사요 ^^ -
존은팁입니다.. 감사하게 사용하겠습니다
-
유우타
2008.06.19 00:12
감사합니다. 적용하니 이쁘군요. ^^ 마음에 쏘~옥 듭니다~ -
LunarDream
2008.06.20 21:37
사이트 방문해 보니 참 이쁘네요^^ -
2008.08.18 17:58
좋은팁 감사합니다. -
적용해봤는데 너무 좋습니다! 클릭영역이 박스 전체였으면 좋겠는데..그게 잘 안되네요..^^;;
-
Lin(린)
2008.10.04 00:58
감사합니다~!
추천 누르고 갑니다 ㅇㅅㅇ -
ㅅㅅㅂ
2008.11.07 14:00
오.. 좋네요...
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| XE Core 안정된 버젼 좀 알려주세요.. [1] | 팔도준 | 2015.05.26 |
| 외부이미지 링크 + 고해상도 이미지 섬네일 생성 팁 | socialskyo | 2015.05.26 |
| 설문조사 컴퍼넌트의 종료일 관련 버그 수정 | sejin7940 | 2015.05.26 |
| 공지목록의 추출기준을 문서번호가 아니라 글순서로 변경 | sejin7940 | 2015.05.26 |
| 네이버맵 좌표(Lat, Lng) 검색기 | YJHOON | 2015.05.27 |
| 푸시알림 앱 소개 pushbullet 안드로이드와 아이폰, 데스크탑까지 되면서 공짜!! | garnecia | 2015.05.28 |
| 29일 licencexe설치시 XE마비현상 [3] | XE힘들당휴 | 2015.05.29 |
| 네이버 카페 처럼 조회하고 [2] | XE모듈 | 2015.05.31 |
| 스키마 변경 후 쿼리 오류가 발생할 때 | 신평 | 2015.06.01 |
| 타임라인 모듈 두개 이상 생성 및 페이지가 넘어가지 않은 문제에 관하여 | 함삐까 | 2015.06.01 |
| 카르마님의 외부 이미지 저장 애드온 에서 swf를 받아오기 | 불금 | 2015.06.01 |
| 자바스트립으로 내용을 숨겼다/보이기 | 착한동구 | 2015.06.03 |
| 코어 1.5 모바일에서 닉네임 클릭시 팝업 메뉴안 뜰때.. | 착한악마 | 2015.06.03 |
| php 버전을 다운그레이드 하기 [2] | 6미리 | 2015.06.04 |
| (오류x, 정보)ckeditor와 xpresseditor의 서식은 서로 다르네요. 반응형만드실 때 주의하실 필요가 있겠습니다. | 큰성565 | 2015.06.04 |
| 구글에서 제공하는 웹폰트 적용법 | 착한동구 | 2015.06.04 |
| 창크기에 따라 생기고 없어지는 배너 만들기 [1] | 착한동구 | 2015.06.05 |
| 구글 웹폰트 부분으로 적용하기 | 착한동구 | 2015.06.05 |
탑으로 가는 버튼이 특정위치에서 나타나게 하기
 | 동네남자 | 2015.06.09 |
| 1.8.3 통합 검색시 제목+내용 으로 하기 | 불금 | 2015.06.09 |