스타일

커스텀 스타일

QCELL의 스타일은 CSS를 적용하여 이루어져 있으며, CSS파일은 QCELL폴더의 css폴더 내에 위치하고 있으며 qcell.css, qcell_layout.css의 2개 파일을 사용합니다.
기본 및 제공드리는 테마외의 형태나 색상으로 얼마든지 수정이 가능합니다.

숨은 컬럼(데이터)으로 정렬과 정렬 아이콘 변경

• .rt-qc-root {/* border-width: 1px; border-style: solid; border-color: #d3d5df; */}
  
.rt-qc-cell-viewport, .rt-qc-cell-footer 두 클래스의 border 설정 역시 주석처리합니다.


• .rt-qc-cell-viewport, .rt-qc-cell-footer {/*border-color: #d3d5df;*/color: #000;}
  
.rt-qc-cell-headerrows, .rt-qc-cell-frozenbottomrows, .rt-qc-cell-footerrows의 border의 넓이를 0px로 고정하며,


• .rt-qc-cell-headerrows, .rt-qc-cell-frozenbottomrows, .rt-qc-cell-footerrows {border-width: 0px;}
  
.rt-qc-cell-headerrows, .rt-qc-cell-headercols의 스타일들의 배경색과 폰트색상을 원하는 색상에 맞춰 변경합니다.


• ..rt-qc-cell-headerrows, .rt-qc-cell-headercols {text-align: center; font-weight: bold; border-color:#93959f; color: #000;}
  
그리고 마지막으로 qcell_layout.css에서 .rt-qc-cell의 border의 넓이를 하단만 1px인 형태로 변경하면 아래와 같은 게시판 스타일의 QCELL을 확인하실 수 있습니다.


• .rt-qc-cell {vertical-align: middle; border-width: 0px 0px 1px 0px; border-style:solid; outline:none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none;}
  

---