이윰빌더에서 링크에 대한 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요소들에만 해당 스타일이 적용되므로 

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