(ขออนุญาตอ้างอิงกระทู้ของท่าน meam โดยที่ไม่ได้แจ้งให้ทราบล่วงหน้านะครับ)
จากกระทู้การปรับแต่งของท่าน meam
ซึ่งได้เสนอวิธีการปรับแก้เพื่อให้แสดงกระทู้แบบกระชับเอาไว้
ปรับแต่งการแสดงผล All New Pantip
https://ppantip.com/topic/39105017
อนึ่ง ถ้าหากท่านใดมีความประสงค์เพียงต้องการลดช่องว่างในโฉมใหม่ให้น้อยลงแค่นั้น
ลองใช้ CSS ด้านล่างนี้ หรือปรับแต่งตามสะดวกดูครับ
ขอขอบคุณท่าน meam ไว้ ณ ที่นี้ด้วยครับ
Update 1:
- แก้ไขให้ Firefox ผูกขนาด Font ไว้กับ browser setting แทนที่จะ fix ที่ 16px
สำหรับเบราเซอร์อื่นให้ใช้ style extension เพื่อแก้ไข html dom เฉพาะ ppantip.com แทน
หรือกดขยายใช้ scale zoom เอานะครับ
- ถ้าไม่ชอบ Tahoma หรือไม่ใช้ Windows ให้ comment out กลับไปใช้ของทาง pantip หรือใส่ชื่อฟอนต์ในเครื่องแทนครับ
- แก้ไข padding เป็นสัดส่วนกับ font-size สำหรับการทำ scale zoom
- แก้ไข @media min-width รองรับกระทู้ชื่อยาวขึ้น ให้สามารถแสดงในบรรทัดเดียวได้ในหน้าจอใหญ่
/* Roboto replacement if preferred */
/* @font-face { font-family: 'Roboto'; src: 'Roboto'; font-weight:normal; font-style: normal; }
@font-face { font-family: 'Roboto'; src: 'Roboto'; font-weight:bold; font-style: normal; } */
@font-face { font-family: 'Roboto'; src: local('Tahoma'); font-weight:normal; font-style: normal; }
@font-face { font-family: 'Roboto'; src: local('Tahoma'); font-weight:bold; font-style: normal; }
/* @font-face { font-family: 'Roboto'; src: local('Roboto Web'); font-weight:normal; font-style: normal; }
@font-face { font-family: 'Roboto'; src: local('Roboto Web Bold'); font-weight:bold; font-style: normal; } */
.pt-list .pt-list-item .pt-list-item__title, .pt-list__type-a .pt-list-item .pt-list-item__title {
/* height: 72px;
max-height: 72px;
margin-bottom: 8px; } */
height: auto !important;
max-height: none !important;
margin-bottom: auto !important; }
.pt-list-sidebar .pt-list-item .pt-list-item__title {
/* height: 72px;
max-height: 72px; } */
height: auto !important;
max-height: none !important; }
.pt-list__type-simple .pt-list-item .pt-list-item__title {
/* height: 48px;
max-height: 48px; } */
height: auto !important;
max-height: none !important; }
.pt-list__type-simple .pt-list-item .pt-list-item__title h2 {
/* max-height: 48px; } */
max-height: none !important; }
@media (min-width: 1620px) {
.container, .pt-nav-bar {
max-width: 1560px !important; } }
.pt-list .pt-list-item, .pt-list__type-a .pt-list-item {
/* padding: 12px 16px 16px 160px; } */
padding-top: 0.3125rem !important; /* proportional value: 5px for 16px font-size */
padding-bottom: 0.25rem !important; } /* proportional value: 4px for 16px font-size */
.pt-list .pt-list-item a > .pt-list-item__img, .pt-list__type-a .pt-list-item a > .pt-list-item__img {
/* top: 16px; */
top: 0.375rem !important; } /* proportional value: 6px for 16px font-size */
.pt-list .pt-list-item .pt-list-item__title > h2, .pt-list__type-a .pt-list-item .pt-list-item__title > h2,
.pt-list .pt-list-item .pt-list-item__info > h5, .pt-list__type-a .pt-list-item .pt-list-item__info > h5,
.pt-list .pt-list-item .pt-list-item__title .pt-list-item__tag,
.pt-list__type-a .pt-list-item .pt-list-item__title .pt-list-item__tag {
/* line-height: 1.5; */
line-height: normal !important; }
/* html { font-size: 16px; } } */
@-moz-document domain(ppantip.com) {
html { font-size: 1rem !important; } } /* refer to browser setting font-size */
สำหรับคนที่คิดว่ารายการกระทู้หลังจากปรับโฉม ppantip.com วันที่ 1 สิงหาคม 2019 มีที่ว่างที่มากจนเกินไป
จากกระทู้การปรับแต่งของท่าน meam
ซึ่งได้เสนอวิธีการปรับแก้เพื่อให้แสดงกระทู้แบบกระชับเอาไว้
ปรับแต่งการแสดงผล All New Pantip
https://ppantip.com/topic/39105017
อนึ่ง ถ้าหากท่านใดมีความประสงค์เพียงต้องการลดช่องว่างในโฉมใหม่ให้น้อยลงแค่นั้น
ลองใช้ CSS ด้านล่างนี้ หรือปรับแต่งตามสะดวกดูครับ
ขอขอบคุณท่าน meam ไว้ ณ ที่นี้ด้วยครับ
Update 1:
- แก้ไขให้ Firefox ผูกขนาด Font ไว้กับ browser setting แทนที่จะ fix ที่ 16px
สำหรับเบราเซอร์อื่นให้ใช้ style extension เพื่อแก้ไข html dom เฉพาะ ppantip.com แทน
หรือกดขยายใช้ scale zoom เอานะครับ
- ถ้าไม่ชอบ Tahoma หรือไม่ใช้ Windows ให้ comment out กลับไปใช้ของทาง pantip หรือใส่ชื่อฟอนต์ในเครื่องแทนครับ
- แก้ไข padding เป็นสัดส่วนกับ font-size สำหรับการทำ scale zoom
- แก้ไข @media min-width รองรับกระทู้ชื่อยาวขึ้น ให้สามารถแสดงในบรรทัดเดียวได้ในหน้าจอใหญ่
/* Roboto replacement if preferred */
/* @font-face { font-family: 'Roboto'; src: 'Roboto'; font-weight:normal; font-style: normal; }
@font-face { font-family: 'Roboto'; src: 'Roboto'; font-weight:bold; font-style: normal; } */
@font-face { font-family: 'Roboto'; src: local('Tahoma'); font-weight:normal; font-style: normal; }
@font-face { font-family: 'Roboto'; src: local('Tahoma'); font-weight:bold; font-style: normal; }
/* @font-face { font-family: 'Roboto'; src: local('Roboto Web'); font-weight:normal; font-style: normal; }
@font-face { font-family: 'Roboto'; src: local('Roboto Web Bold'); font-weight:bold; font-style: normal; } */
.pt-list .pt-list-item .pt-list-item__title, .pt-list__type-a .pt-list-item .pt-list-item__title {
/* height: 72px;
max-height: 72px;
margin-bottom: 8px; } */
height: auto !important;
max-height: none !important;
margin-bottom: auto !important; }
.pt-list-sidebar .pt-list-item .pt-list-item__title {
/* height: 72px;
max-height: 72px; } */
height: auto !important;
max-height: none !important; }
.pt-list__type-simple .pt-list-item .pt-list-item__title {
/* height: 48px;
max-height: 48px; } */
height: auto !important;
max-height: none !important; }
.pt-list__type-simple .pt-list-item .pt-list-item__title h2 {
/* max-height: 48px; } */
max-height: none !important; }
@media (min-width: 1620px) {
.container, .pt-nav-bar {
max-width: 1560px !important; } }
.pt-list .pt-list-item, .pt-list__type-a .pt-list-item {
/* padding: 12px 16px 16px 160px; } */
padding-top: 0.3125rem !important; /* proportional value: 5px for 16px font-size */
padding-bottom: 0.25rem !important; } /* proportional value: 4px for 16px font-size */
.pt-list .pt-list-item a > .pt-list-item__img, .pt-list__type-a .pt-list-item a > .pt-list-item__img {
/* top: 16px; */
top: 0.375rem !important; } /* proportional value: 6px for 16px font-size */
.pt-list .pt-list-item .pt-list-item__title > h2, .pt-list__type-a .pt-list-item .pt-list-item__title > h2,
.pt-list .pt-list-item .pt-list-item__info > h5, .pt-list__type-a .pt-list-item .pt-list-item__info > h5,
.pt-list .pt-list-item .pt-list-item__title .pt-list-item__tag,
.pt-list__type-a .pt-list-item .pt-list-item__title .pt-list-item__tag {
/* line-height: 1.5; */
line-height: normal !important; }
/* html { font-size: 16px; } } */
@-moz-document domain(ppantip.com) {
html { font-size: 1rem !important; } } /* refer to browser setting font-size */