/* Theme Name: Finix Child Theme URI: http://finix.powersquall.com/ Description: Finix - Technology & IT Solutions WordPress Theme Author: Power-Squall Author URI: http://example.com Template: finix Version: 1.0 License: GNU General Public License version 3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready Text Domain: kenraychild */ /* ======== เพิ่ม !important + ความเฉพาะเจาะจง ============== */ html body { background-color: #001f3f !important; } /* =============== โครงสร้าง Grid Responsive =============== */ .post-grid { display: grid; gap: 30px; margin-top: 40px; grid-template-columns: 1fr; /* default: mobile */ } @media (min-width: 768px) { .post-grid { grid-template-columns: repeat(2, 1fr); /* Tablet */ } } @media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); /* Laptop & Desktop */ } } /* =============== กล่องโพสต์แต่ละอัน =============== */ .post-card { background: #fff; border: 1px solid #eee; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease; } .post-card:hover { transform: translateY(-5px); } /* =============== รูปภาพ =============== */ .post-image { width: 100%; overflow: hidden; position: relative; } /* ===== ขนาดรูปแตกต่างตาม Category (อ้างอิง class บน ) ===== */ /* cat=23 (News) → 16:9 */ .category-23 .post-image { aspect-ratio: 16 / 9; } /* cat=24 (Spotlight) → 1:1 */ .category-24 .post-image { aspect-ratio: 1 / 1; } /* cat=25 (Award) → 1:1 */ .category-25 .post-image { /* ใส่เลข ID ของหมวด award */ aspect-ratio: 1 / 1; } /* cat=28 (Training) → 16:9 */ .category-28 .post-image { aspect-ratio: 16 / 9; } /* cat=122/ (Media) → 16:9 */ .category-122 .post-image { aspect-ratio: 16 / 9; } /* cat=123/ (Workshop&Conference) → 16:9 */ .category-123 .post-image { aspect-ratio: 16 / 9; } /* cat=34 (E-book & E-Report นส&รายงานการศึกษา) → 4:3 */ .category-34 .post-image { /* ใส่เลข ID ของหมวด reports */ aspect-ratio: 3 / 4; } /* cat=32 (Academic paper บทความวิชาการ) → 1:1 */ .category-32 .post-image { /* ใส่เลข ID ของหมวด Publication */ aspect-ratio: 1 / 1; } /* จัดข้อความทุกตัวภายใน Text Editor เป็น justify */ .elementor-widget-text-editor { text-align: justify; line-height: 1.8; } /* และเฉพาะ paragraph ด้วย */ .elementor-widget-text-editor p { text-align: justify; line-height: 1.8; } .post-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* =============== เนื้อหาด้านล่างของโพสต์ =============== */ .post-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; } /* หัวข้อโพสต์ */ .post-content h3 { font-size: 20px; margin: 0 0 10px; color: #0A3981; } /* คำอธิบาย (Excerpt) */ .post-content p { font-size: 15px; color: #555; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* =============== ปุ่มอ่านเพิ่มเติม =============== */ .read-more-btn { margin-top: auto; padding: 8px 16px; background: #ff6600; color: #fff; border-radius: 6px; text-decoration: none; font-weight: 500; text-align: center; display: inline-block; transition: background 0.3s; } .read-more-btn:hover { background: #e65c00; } /* =============== วันที่ + หมวดหมู่ =============== */ .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 15px; margin-bottom: 8px; color: #ff6600; } .post-meta i { margin-right: 10px; color: #3C3D37; } .meta-date, .meta-category { display: flex; align-items: center; } .meta-category a { color: #ff6600; text-decoration: none; margin-left: 4px; font-weight: normal; } .meta-category a:hover { text-decoration: underline; } /* =============== Pagination =============== */ .pagination { display: flex; justify-content: center; margin-top: 60px; gap: 10px; flex-wrap: wrap; } .pagination .page-numbers { padding: 8px 14px; background: #f2f2f2; color: #333; text-decoration: none; border-radius: 6px; transition: background 0.3s; } .pagination .page-numbers.current { background: #ff6600; color: #fff; font-weight: bold; } .pagination .page-numbers:hover:not(.current) { background: #e2e2e2; } /* =============== ปรับความกว้างและจัดตำแหน่ง page header =============== */ .page-header-inner { padding: 20px 20px !important; /* */ } .page-header-inner .page-title { font-size: 28px !important; color: #EFEFEF !important; } .page-header-inner .breadcrumb { margin-top: 18px !important; } /* ======= Fotter ========*/ .footer-address i { font-size: 18px; /* ปรับขนาดได้ตามต้องการ */ } .widget-title::after { content: '\A มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าธนบุรี'; white-space: pre; display: block; } /* =============== blog media =============== */ .post-thumbnail { position: relative; text-align: center; } .entry-footer { text-align: center; margin-top: 20px; } /* ========== team grid ========== */ .team-grid-wrapper { padding: 30px 20px; max-width: 1280px; /* คุมความกว้างไม่ให้แผ่ออกหมด */ margin: 0 auto; } .team-group-title { font-size: 24px; margin: 40px 0 20px; color: #0A3981; text-align: center; } .custom-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; justify-items: center; align-items: start; } .team-member { box-sizing: border-box; width: 100%; /* allow grid cell to control width */ max-width: 300px; /* limit card width so columns align nicely */ min-height: 360px; /* ensure same-height-ish cards */ background: #fff; padding: 18px; text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform .18s ease, box-shadow .18s ease; border-radius: 8px; } /* clickable area covers full card */ .team-member a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; height: 100%; /* ensure contents stretch the card */ width: 100%; } /* image fill */ .team-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* name + position */ .team-name { margin: 12px 0 6px; font-size: 19px; line-height: 1.2; color: #E38E49; flex: 0 0 auto; } .team-position { color: #777; font-size: 15px; margin-top: 7px; } /* spacer pushes bottom content to bottom if needed */ .team-member .spacer { flex: 1 1 auto; } /* hover */ .team-member:hover { transform: translateY(-6px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } /* responsive tweaks */ @media (max-width: 900px) { .team-thumb { width: 150px; height:150px; } .team-member { min-height: 320px; } } @media (max-width: 480px) { .team-thumb { width: 120px; height:120px; } .team-member { min-height: 260px; padding:12px; } } /*======= user image ============*/ .user-image { max-width: 300px; /* ขนาดสูงสุดที่จะแสดง (600x900px เหมาะสมสุด) */ margin: 20px auto; /* จัดให้อยู่กึ่งกลาง */ border-radius: 12px; /* มุมโค้งเล็กน้อย */ overflow: hidden; /* กันภาพล้น */ } .user-image img { width: 100%; /* ทำให้ responsive */ height: auto; /* รักษาสัดส่วน */ display: block; /* ตัด margin ลอยของ img */ object-fit: cover; /* ครอบตัดให้เต็มกรอบ (ถ้ามีการกำหนดกรอบ) */ } html body { background-color: #EFEFEF !important; } /* ========= ปรับขนาดฟอนต์ เมนูหลัก ========= */ .main-navigation .nav > li > a { font-size: 22px!important; line-height: 1.5!important; } /* ========= ขนาดฟอนต์ เมนูย่อย ========= */ .main-navigation .sub-menu li a { font-size: 16px!important; } /* ถ้าต้องการเพิ่มระยะระหว่างตัวอักษร */ .main-navigation .nav > li > a, .main-navigation .sub-menu li a { letter-spacing: 0.5px!important; } /* ถ้าต้องการให้เมนูย่อยกว้างขึ้น */ .main-navigation .sub-menu { min-width: 200px!important; } /* ====== เปลี่ยนสีพื้นหลัง footer ====== */ .site-footer { background-color: #ffffff !important; /* ปรับเป็นสีที่ต้องการ */ color: #ffffff; /* สีตัวอักษร */ } /* ====== เปลี่ยนสีลิงก์ใน footer ====== */ .site-footer a { color: #ffd700 !important; /* สีลิงก์ */ text-decoration: none; } .site-footer a:hover { color: #ffffff; /* สีลิงก์เมื่อโฮเวอร์ */ } /* ====== เปลี่ยนสีพื้นหลัง site-info (ส่วนล่างสุด) ====== */ .site-footer .site-info { color: #cccccc; /* สีตัวหนังสือล่างสุด */ }