[그누보드] 로그인 입력 색깔 변경하기 : Programming Story

1. 그누보드 로그인 css 변경하기

그누보드 웹사이트를 제작할 때 위와 같이 로그인 화면이 보이는데, 아이디와 비밀번호를 입력해도 글씨 색깔이 흰색이어서 보이지 않는 문제가 있었다. 배경이 흰색이어서 겹쳐 글씨가 보이지 않는 문제가 있는데 이것 또한 간단하게 css 부분을 수정하여 해결할 수 있다.

2. 수정 경로

나는 모바일에서만 문제가 발견되었기 때문에 모바일 경로로 들어가서 수정을 해주었다.

theme 폴더 -> 현재 사용하고 있는 테마 클릭 -> mobile 폴더 -> skin 폴더 -> outlogin 폴더 -> style.css 클릭

style.css에 들어가면 원래

#ol_before input[type=text], #ol_before input[type=password] {width:100%;border:1px solid #c2c9d9;background:none;height:40px;margin:0 0 5px;color:#fff}

라고 되어 있는 부분이 있는데 이 부분에서

{color: #fff};

부분에서 hex code를 수정하면 된다. 위에서처럼 원래 내가 사용하고 있는 테마에서는 기본이 흰색으로 설정되어 있는 것을 알 수 있다. 이 부분을 자신이 원하는 색깔의 hex code로 바꾸어주면 된다.

나는 검정색으로 바꾸고 싶었기 때문에 #000으로 바꾸어주었다.

이렇게 바꾼 뒤에 원래 style.css 가 위치해있었던 곳으로 다시 FTP를 이용해 업로드해주면 된다.

3. PC 버전 로그인 입력 색깔 변경

나는 모바일에서의 색깔을 변경하고 싶었기 때문에 위에서처럼 mobile 경로로 들어갔던 것이지만 만약 PC 버전의 로그인 입력 색깔 변경을 원한다면

theme 폴더 -> 현재 사용하고 있는 테마 클릭 -> skin 폴더 -> outlogin 폴더 -> style.css 클릭

으로 들어가서 똑같은 부분을 변경해주면 된다. 이렇게 모바일/ PC 경로가 분리되어 있기 때문에 각각 다른 style을 적용시키는 것도 가능하다.

또한 style.css에 들어가면 로그인 입력 색깔 뿐만 아니라 버튼 색깔 등 다양한 style을 자신이 원하는 대로 변경이 가능하다.

위와 같이 변경을 해주었더니 나는 입력을 하면 이제 색깔이 검정색으로 변경되었다.