ในการเขียนเว็บไซต์ด้วยการใช้งาน
css นั้นบางทีเราจะเจอปัญหาที่ว่า เราสามารถ Override ไฟล์ได้ Override ไฟล์คืออะไร ก็คือ เป็นการนำไฟล์ต้นฉบับมาแก้ไขนั่นเอง โดยที่เราไม่ต้องแก้ไขในไฟล์ต้นฉบับ สามารถศึกษาเพิมเติมเกี่ยวกับ การ Override ไฟล์ได้ที่ =>
วิธีการ Override ไฟล์ และในการ แก้ไข CSS นั้นจะมีบางจุดที่เราแก้ แล้วไฟล์ไปเรียกใช้งานอีกตัวนึง ทำให้การเปลี่ยนแปลงของ CSS นั้นไม่สามารถใช้งานได้ครับ เรามีวิธีนึงที่เราสามารถ เจาะจงให้เราสามารถใช้งาน css ได้โดยการกหนด class ที่คลุมไว้อยู่ เราไปดูตัวอย่างกันเลยครับ
เรามาดูรูปภาพที่เราจะเปลี่ยนกันเลยครับ ก็คือ ในรูป Input text จะมีขนาดกว้างมาก ทำให้การแสดงผลของเราไม่สวยงาม

- Selection_999(496).png (16.19 KiB) Viewed 396 times
ส่วนนี้เป็น css ของ templateที่ยังไม่ได้ Override ชื่อคลาสที่ใช้ก็คือ input, textarea, นะครับ กำหนดให้มีขนาด 206 px
Code: Select all
input, textarea, .uneditable-input {
width: 206px;
}
เราจะมาเปลี่ยน css กันนะครับโดยที่เราไม่ต้องแก้ในไฟล์ ของต้นฉบับ
เราจะให้ดูกันชัด ๆนะครับว่า คลาสที่คลุ่มอยุ่คือ .jshop_prod_cart และ ตามด้วย input ที่เราจะแก้

- Selection_999(497).png (31.65 KiB) Viewed 396 times
ให้เราแก้ไขไฟล์ใหม่โดยการ ใส่ชื่อคลาสที่คลุมอยู่ ตามด้วย input
ให้เราสร้าง ไฟล์ CSS แล้วก็อบคลาสไปใส่ครับ แล้วทำการเปลี่ยนชื่อคลาสเป็น .jshop_prod_cart input
Code: Select all
.jshop_prod_cart input {
width: 45px;
}
วิธีนี้เป็นการเจาะจงว่าเราต้องการใช้คลาสไหน แล้วให้ใส่คลาสที่คลุมอยู่ก่อน แล้วตามด้วย type ที่ต้องการเปลี่ยน
ผลลัพธ์ก็จะได้ มีขนาดที่เรากำหนดไว้ครับ

- Selection_999(498).png (26.67 KiB) Viewed 396 times
อาจจะเป็นแนวทางนึงในการเปลี่ยน ไฟล์ CSS นะครับ