jnew 테마 테이블 선 색상을 변...
 

jnew 테마 테이블 선 색상을 변경하고 싶은데

9
2 사용자
0 반응
199 보기
537c13add1f5333fbc75a85386469273
글: 1
주제 스타터
(@구글애드초보자)
가입일: 8개월 전
[#26]

1. 어떤 css를 적용해야 되나요?

2. 워프 작성페이지에서 테이블 삽입 시, 테이블 칸이 너비만큼 꽉 차지 않고 좁게 보여서 작성하는 데 불편함이 있습니다 ( 작성글에서는 꽉 차게 보임) 어떻게 해야 될까요? 


8개의 댓글과 답글
워프여기
글: 129
Admin
(@wpyeogi)
회원
가입일: 11개월 전

안녕하세요
저도 테이블 때문에 CSS 수정을 많이 했습니다
아래가 제가 사용하는 테이블 관련 CSS 코드 입니다.
전체 적용해보시고, 본인 마음에 들게 조금씩 수정해보세요.
맨위 border 이 부분이 선 굵기, 색상입니다.
table {
width: 100% !important;
font-size: 1.25rem;
border: 1px solid #BFBFBF;
margin: 0 0 2em 0 !important;
}

tbody {
background-color: white;
color: #333;
}

body:not(.jnews-disable-style-table) .entry-content th {
text-align: center !important;
}

body:not(.jnews-disable-style-table) .entry-content td:first-child {
border-left: 0 !important;
border-right: 1px solid #eee;
}

body:not(.jnews-disable-style-table) .entry-content td:last-child {
border-right: 0 !important;
border-left: 1px solid #eee;
}

body:not(.jnews-disable-style-table) .entry-content th:first-child {
border-left: 0 !important;
border-right: 1px solid #eee;
}

thead {
text-align: center !important;
border-bottom: 4px double #bfbfbf !important;
}

tfoot {
font-weight: 400;
color: #1C39BB;
text-align: center !important;
background-color: #F9F9F9;
border: 2px solid !important;
}

tr, td, th {
vertical-align: middle !important;
padding: 7px 5px 5px 8px !important;
}

body:not(.jnews-disable-style-table) .entry-content tbody td:hover {
color: #53585c;
background: #f7f7f7;
}

body:not(.jnews-disable-style-table) .entry-content tbody tr:hover {
color: none;
background: none;
}

추가 CSS 입니다.
테이블 하단 여백 설정, 테이블 헤드부분 컬러 설정입니다.
그때그때 추가 CSS에 적용해서 사용하면 됩니다.
.bottom-1 {
margin: 0 0 -1em 0 !important;
}

.bottom-2 {
margin: 0 0 -2em 0 !important;
}

.grey {
background-color: #F2F2F2 !important;
overflow-x: initial;
}

.gray {
background-color: #f9f9f9 !important;
overflow-x: initial;
}

.green {
background-color: #f0fff0 !important;
overflow-x: initial;
}

.blue {
background-color: #f0faff !important;
overflow-x: initial;
}

.red {
background-color: #fff5f7 !important;
overflow-x: initial;
}

.brown {
background-color: #fdf5e6 !important;
overflow-x: initial;
}

.purple {
background-color: #faf5ff !important;
overflow-x: initial;
}

.yellow {
background-color: #fffddb !important;
overflow-x: initial;
}

.rose {
background-color: #FFEFE5 !important;
overflow-x: initial;
}


답글 쓰기
4a7b541576baa8c4bc37559ec742b478
글: 0
(@애드센스초보)
가입일: 1초 전

그 테마에서 테이블 jnews 스타일 사용안하심 설정하신거죠?
두번쨰 답변 바텀1 / 바텀2랑 색상별 css는 어디에 적용되는 부분일까요?


답글 쓰기
워프여기
글: 129
Admin
(@wpyeogi)
회원
가입일: 11개월 전

jnews 스타일 사용함으로 설정해야 합니다.

바텀 -1, 바텀 -2 입니다. (마이너스)
저같은 경우 바텀 여백이 기본으로 2em으로 설정했습니다.

하지만 테이블 같은 경우
테이블 바로 밑에 글을 쓰는 경우가 많이 있습니다.

그래서
-2를 설정하면 테이블 바로 아래 글이 붙고 (테이블과 글 사이 여백이 0이 됨)
-1을 설정하면 테이블 조금 아래 쪽에 글이 붙고 (테이블과 글 사이 여백이 1em이 됨)

아무것도 설정을 안하면 테이블 아래 쪽에 글이 붙습니다. (테이블과 글 사이 여백이 2em이 됨)

적용방법은
테이블 선택 → 오른쪽 메뉴 고급선택 → 추가 CSS 클래스 → yellow bottom-2
이렇게 하면 테이블이 노란색, 하단 여백이 0으로 설정이 됩니다.

테이블 아니고 다른 이미지, 박스, 텍스트 등 여백 변경이 필요할때도 사용합니다.
4em ~ -4em까지 만들어서 사용중입니다.


답글 쓰기
4a7b541576baa8c4bc37559ec742b478
글: 0
(@애드센스초보)
가입일: 1초 전
친절한 답변 정말 감사드립니다!

답글 쓰기
워프여기
글: 129
Admin
(@wpyeogi)
회원
가입일: 11개월 전

한가지가 빠졌네요.
테이블 사용시 폰으로 볼때 글자 크기를 줄여주는 CSS입니다.
아래 코드추가하면 PC로 볼때와 폰으로 볼때 폰트 사이즈가 변경됩니다.
@media (max-width: 460px) {
body:not(.jnews-disable-style-table) .entry-content td, body:not(.jnews-disable-style-table) .entry-content th {
font-size: .6em;
}
}

화면 사이즈를 460으로 했는데 이부분은 적당히 조절하시면 됩니다.
폰으로 볼때 테이블 폰트 크기가 크면 테이블 공간을 많이 차지하거든요.
그래서 폰으로 볼때는 폰트 사이즈를 줄여서 테이블 크기를 줄여주는 겁니다.


답글 쓰기
워프여기
글: 129
Admin
(@wpyeogi)
회원
가입일: 11개월 전

마지막으로
위 코드는
워드프레스 기본 테이블, 고급 편집 도구 (클래식 편집기 TinyMCE)의 테이블
두 가지 테이블 모두 적용되는 코드 입니다.
간단한 테이블은 워드프레스 기본 테이블을 사용하고
조금 복잡한 테이블은 고급 편집 도구 (클래식 편집기 TinyMCE)의 테이블을 사용합니다.
더 복잡한 테이블은 그냥 이미지로 캡쳐해서 사용합니다.


답글 쓰기
4a7b541576baa8c4bc37559ec742b478
글: 0
(@구글애드초보자)
가입일: 1초 전

.
table {
border-radius: 8px; !important;
width: 100% !important;
font-size: 17px;
border: 1px solid #F2F4F6;
margin: 0 0 0 0 !important;
}

tbody {
background-color: white;
color: #191F28;
}

body:not(.jnews-disable-style-table) .entry-content th {
text-align: left !important;
}

thead {
border-bottom: 4px #f2f4f6 !important;
}

tr, td, th {
vertical-align: middle !important;

}

제가 위에처럼 css를 적용했는데 뭔가 잘 안되는 부분이 있어 이렇게 답글드립니다.

1. (테이블) 표에 라운드를 주고싶어 맨 위 css에 border-radius: 8px 코드를 추가했으나 적용되지 않습니다.

2. 테이블과 그 위 문단 사이의 간격을 줄이고 싶어 첫번째 마진을 0 0 0 0 까지 했으나 그래도 넓어서, -10px을 적용해 봤는데, -10 만큼 간격이 줄어드는 게아니라 테이블 상단이 -10만큼 짤려서 결과적으로 윗줄 보더라인만 안보이게 됩니다.

3. 반대로 하단 간격은 늘리고 싶어서 마진을 늘려봤는데, 하단 아랫글이랑 간격이 늘어나고, 아래 단락이랑 간격은 늘어나지 않습니다. ㅠㅠㅠ

그리고 테이블 짝수줄마다 회색으로 변하는 부분도 흰색으로 통일하고 싶습니다 ㅠ


답글 쓰기
워프여기
글: 129
Admin
(@wpyeogi)
회원
가입일: 11개월 전

테이블 라운드는
.wp-block-table {
overflow-x: auto;
border: 1px solid black !important;
border-radius: 20px;
border-collapse: separate;
}

이런식으로 하면되지만 별로 추천드리지는 않습니다.
우선 워드프레스 테이블에만 적용이 됩니다.
클래식으로 만든 테이블은 적용이 안됩니다.

이런저런 방법을 써봤는데 가능하긴 하지만 보기에 그리 깔끔하지 않습니다.

테이블 위쪽 여백은 위쪽 문단에 마진을 줘서 해결해야 합니다.
테이블 아래쪽 여백은 저번에 말한것 처럼 테이블에 -마진을 줘서 해결해야 합니다.
짝수줄이 회색으로 변하는것은 제 코드에서 이미 해결한 부분입니다.

확인이 불가능하기에 이부분은 제가 정확하게 머라할 수가 없네요.
페이지 미리보기 → 마우스 우클릭 → 검사를 눌러서 코드를 이것저것 바꿔보시기 바랍니다.
보통 저도 이런식으로 코드를 이것저것 수정하면서 코드를 완성해 나갑니다.


답글 쓰기

댓글을 달아주세요

작성자 이름

작성자 이메일

제목 *

최대 허용 파일 크기: 3MB

미리보기 0 개정 저장됨
공유: