Comments evolved 플러그인은 여러 가지 댓글 시스템을 탭 방식으로 배열해서 동시에 적용이 가능하도록 해주며 별도의 설정이 없어도 mobile 이든 desktop이든 접속한 기기의 크기에 따라서 그 폭을 알아서 조절해 주기 때문에 워드프레스 입문 초기부터 필자가 선호해왔던 plugin이다 . 하지만 창의 좌우 끝에 여백을 전혀 두지 않아서 disqus같은 댓글 시스템의 경우에는 너무 답답해보인다는 것이 외모상의 문제점이라고 생각 중었다.  이번 기회에 스타일 값을 조절해서 약간의 변화를 주었다.

1. 브라우저의 요소검사기 사용방법

       스타일의 변화를 주려면 브라우저의 요소검사기를 이용해서 각 요소들이 가지고 있는 현재 값을 확인하는 것이 편리하다.  요즘의 브라우저들은 대부분 요소검사기를 가지고 잇기대문에 어던 브라우저를 사용하든 크게 문제는 없지만 브라우저 별로 조금씩의 기능차이 또는 외모의 차이가 있기 때문에 개인 별로 선호되는 브라우저는 조금씩 다르다.

      크롬브라우저의 경우에 브라우저 창에서 관심있는 영역에 오른쪽 마우스를 클릭하여 팝업 메뉴에서 하단에 요소검사를 선택하면 브라우저 중앙부위가 가로방향으로 갈라지면서 글미과같이 세개의 작은 창이 나타난다. 아랫 쪽에는 콘솔이라고 부르는 탭이 있는데 코드의 실행결과의  디버깅 창이다.  여기서는 외모와는 크게 관계없는 부분이기 때문에 아랫쪽으로 밀어 내려서 보이지 않는다.

       그 위에는 다시 창이 다시 세로 방향으로 갈라져서 좌우로 나뉘어져 있는데 좌측에는 element 탭에서 현재 관련되는 부위의 코드값이 보이고 우측에는 style  탭에서 그 요소(element)에 적용되는 style 에 관련되는 값들이 보인다.  창의 가장 우측에 nevigation bar를 최대로 아래로 내리면  좌측에 파란 색으로 된 class element 의 style 값 들을 한눈에 볼수있도록 schematic 한 그림으로 표현되어 있다.   그 요소들의 주위에는 padding, border, margin 이 세가지가 색깔을 달리하여 표현되어있고 가장 윘쪽의 원래 브라우저 창에는 실제 element에 대하여padding, border, margin 들이 그 색상을  동일한 상태로 표현되어있다.  이것만보면 한눈에 어떤 element 가 코드에서 어떤 class name으로표현되었으며 element자신의 크기,(width, height)와  padding, border, margin 값들을 모두 알수 있다.  우측의 nevigation bar를 위쪽으로 열려가면 style.css에서 어떤 값들을 어떻게 정의했고 최종적으로 적용된 값들은 어떤 값들 인지도 알 수 있다.

       한편 firefox 브라우저는 박스모델이라는 이름의 탭을 누르면 전체 윤곽을 한눈에 볼 수 있어서 편리하지만 특성이미지를 우측클릭하여 요소검사기를 켜면 그림과 같이 관심영역을 가리키는 점선이 우측의 side bar쪽 위젯에 있는  thumbnail 로 이동하기 때문에 관심영역 지정을 다시 한번 진행해야한다는 불편함이 있다.    (2014.03.27. update : 지금 현재 시점에서는 이런 현상이 나타나지 않고 있다.   브라우져에 어떤 개선된 사항이 있는지 아니면 당시에 알지 못하는 또는 실수로 인한 일시적인 현상이었는지 알지 못한다. )  또한  무엇 보다도 firefox 브라우저가 아직까지는 안정성 면에서 문제가 있어서 예측하지 못한 시점에서 작동이 정지되고 창을 닫아비리는 등의 문제도 있다.   빨리 개선되기를 바란다.

 

2.  기본테마의 댓글창스타일 학인하기

그동안 만나본 대부분의 전문가 님들의 견해로는 이런 경우에 플러그인에서 설정을 바꾸는 것이아니라 워드프레스의 기본 댓글창의 설정을 바꾸어 보라는 답변이 많앗기 때문에 우선 워드프레스 2014 기본 테마의 설정값을 확인하기로했다.  현재 설치된  플러그인을 비활성화하는 방법도 있지만 로컬에 설치된 워드프레스에서 우선 확인해보기로 한다.

아니?  이게 뭐람? 기본 테마의 댓글창에서는 margin  뿐아니라 padding 까지 설정되어 있구만… 이러니 그동안 style.css파일을 무작정, 아무리 들여다 보아도 해결의 실마리가 될만한 내용을 찼을 수 없었던 것 같다.   그럼 이번에는 실제 플러그인이 설치된 블로그를 확인하는 것이 순서이다.  우선 댓글창 영역 아무 곳에나 마우스 우측 클릭하고 요소검사를 실행…

 

음 .. 좋아 저기 코드 값들 중에 comments evolved 어쩌구 하는 것도 보이고  그 밑에 <!–   comment-tabs  –> 이렇게 생긴 부분  밑에

< div id=”comment-tabs” class=”  …. > 이 부분이 전체 댓글창 영역을 지정하는 class name 이라고 보여진다. 거길 선택해본다.

역시 !!  이것 때문이었군… 좋아 그럼 일단 위로 올라가서 관련되는 스타일 값들을 확인해보자

   헐! 세 가지 값들이 모두 ‘0’ 이다. 더구나 이값이 지정된 곳이 plugin.css라는군 … (기본테마가 아니라 comments evolved 플러그인에 있다는 뜻이겠지 ) 일단 브라우저 상에서 이걸 변경시켜 보자~~ 저기 margin 옆에 숫자 0 위에 마우스 클릭!

숫자위에서 한번 더 클릭하면 커서가 깜박거린다.  거기에다 아무 숫자나 넣어보자.. 일단 ’10’

오잉? 왜 이러는거지? 아무런 변화도 없고 더구나 저 삼각형 마크는 뭔가 문제가 있다는 뜻인데… 그럼 이번에는 새로운 줄에다 margin-top : 5   이렇게 넣어보자.

 

자 여기에 우선 margin-top 입력,, 다음 커서가 생기면  5 입력

     왜 자꾸 실패하는가 했더니  단위값 px를 입력하는 걸 잊었다.  (저기 넣는 값들은 상대값으로 % 를 지정할 수도 있고 절대값을 넣을 수도 있기 때문에  단위를 기재 해야한다. 하지만 값이 ‘0’인 경우에는 단위가 어떻든지 아무 상관없다. )

     그리고 원래 입력된 ‘margin: 0’ 의 앞에있는 체크박스를 지워야한다. 아니면 중복된 선언이라서 유효하지 않다.  브라우저에서 직접 입력하는 것은 실시간 ( In-situ )이기 때문에 엔터키를 누르지 않아도 숫자가 입력되는 브라우저가 즉시 반응한다.

자 이제저 값을 child  theme 밑에 있는 Style.css에 넣어? ….  아니다.  저 플러그인이 가지고 있는 자체 스타일 파일에 넣어야 한다.

#commemt-tab 위치에서부터  ‘ } ‘표시가 있는 영역까지 긁어서 복사하고 comment evolved 플러그인의 css디렉토리에서 .. 그런데 이 플러그인은 디렉토리명이 gplus-comments 라고 되어 있다. (왜 헷갈리게 이렇게 해놨는지..) wp-content/plugins/gplus-comments/assets/styles/ 밑에서 plugin.css 파일을 확인했다.

     실제 상황에서는 또 브라우저 시뮬레이션과 조금 다른 부분도 있다. 처음에 margin 값을 정의해놓았던 것은 그대로 두어도 상관없다.

  margin: 0 !important;
  margin-left: 7px !important;  /* 여기 추가된 라인*/ 
  margin-right: 7px !important;  /* 여기 추가된 라인 */

      최종적으로 적당한 값은  7px로 정해졌고    좌우의 여백을 모두 조절해야하므로 margin-left,  margin-right 두 개의 라인을 추가했다.   (혹시 나중에 수정된 부분이라는 기억을 되살리기위해 뒤에 ‘ /* 와 ‘*/’ 표시사이에 간단한 코멘트를 달아 두는 것이 좋다.  또한 원래의 파일도 이름만 바꾸어서 그대로 저장해두는 것도 좋고 업데이트하는 중에 덥어쓰기되어서 수정된 부분이 완전히 지워져 버리는 것에 대비해서 수정된 파일도 예비적으로 하나 더 이름을 바꾸어서 저장해놓는 것도 좋다. )   cdn서버에도 동일한 파일을 업로드하는것을 잊지말고 .. 이제 브라우저 ‘새로고침’…

댓글 창의 여백이 예쁘게 달라져 있고, 요소검사기에서 나타난 수정된 margin 값 들이 아무런 이상없이 잘 적용되고 있는 것으로 나타나고 있다.

이번에도  성공!!!