이윰빌더에서 링크에 대한 css를 원래대로 하기 > 팁 & 테크

본문 바로가기

팁 & 테크

이윰빌더에서 링크에 대한 css를 원래대로 하기

본문

이윰빌더에서는 게시판에 링크를 걸어도 링크가 걸려 있는지 눈에 확 뛰지 않습니다.

 

왜냐하면 테마의 css 파일( /theme/[현재테마]/css/common.css)에는 

 

다음과 같이 링크를 거는 a 속성을 일률적으로 데코레이션을 없애 버렸기 때문입니다. 

 

p,li,li a {color:#252525;word-break:keep-all}
a {color:#000;text-decoration:none}
a,a:focus,a:hover,a:active {outline:0 !important}
a:focus {color:#FF4848;text-decoration:none}
a:hover {color:#FF4848;text-decoration:none}

 

이는 이윰빌더에서 사용하는 각종 링크 버튼의 스타일 일관성을 위해서 한 것입니다.

그런데 이렇게 되면, 유저가 게시판에 링크를 걸어놔도 링크인지 여부를 알 수 없게 됩니다. 

 

따라서 이러한 일률적인 css를 클래스 명명을 해줘야 합니다.  

일단 위의 a 태그에 대한 css는 삭제합니다. 

해당 common.css 파일에서 아래쪽으로 내려가면 Button의 css 속성이 있습니다. 이 중 이윰빌더에 사용되는 btn-e 속성의 아래에 다음을 추가 합니다. 

 

/* 기존에 작성되어 있는 이윰빌더의 버튼 스타일들 */
.btn-e-xlg.btn-e-rounded {border-radius:33px !important}
.btn-e-xxlg.btn-e-rounded {border-radius:40px !important}
.btn-e-block {display:block;width:100%;padding-left:0;padding-right:0;text-align:center}
.btn-e-block + .btn-e-block {margin-top:5px}
.btn-e span.badge {position:absolute;top:-10px;right:-10px}

/* html a태그에 대하여 이윰빌더에 독특한 btn-e 클래스들을 연결 */
a.btn-e {color:#000;text-decoration:none}
a.btn-e, a.btn-e:focus,a.btn-e:hover,a.btn-e:active {outline:0 !important}
a.btn-e:focus {color:#FF4848;text-decoration:none}
a.btn-e:hover {color:#FF4848;text-decoration:none}

 

 

이렇게하면 btn-e 클래스가 들어간 html요소들에만 해당 스타일이 적용되므로 

본문에서는 기존 처럼 링크가 들어간 요소들은 시인성이 드러납니다. 

0
로그인 후 추천 또는 비추천하실 수 있습니다.

댓글목록2

vplanet님의 댓글

음. . 저는 잘 적용이 않되서 링크 색을 바꿔 버렸습니다.  흰색 배경에 희색 링크는 않보이더라구요  .... 

p,li,li a {color:#252525;word-break:keep-all}
a.btn-e {color:#252525;text-decoration:none}

252525 색으로(연 파랑?) , 지금은 그냥 이렇게 사용 하려고 합니다.

축하합니다. 첫댓글 포인트 2포인트를 획득하였습니다.

젤루존님의 댓글

회원사진
안녕하세요.
하이퍼링크 부분은 자동으로 현재창으로 열리던데 새창으로 열리게 하는 방법도 있을까요?
전체 24 건 - 1 페이지
번호
제목
글쓴이
사이트 내 전체검색