วิธีการแก้ไข css โดยใช้คลาสที่คลุมอยู่เป็นตัวกำหนดที่จะต้องเปลี่ยน

แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

Moderators: mindphp, ผู้ดูแลกระดาน

Patipat
PHP Super Hero Member
PHP Super Hero Member
Posts: 996
Joined: 10/06/2019 10:12 am

วิธีการแก้ไข css โดยใช้คลาสที่คลุมอยู่เป็นตัวกำหนดที่จะต้องเปลี่ยน

Post by Patipat » 30/07/2019 6:59 pm

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


เรามาดูรูปภาพที่เราจะเปลี่ยนกันเลยครับ ก็คือ ในรูป Input text จะมีขนาดกว้างมาก ทำให้การแสดงผลของเราไม่สวยงาม
Selection_999(496).png
Selection_999(496).png (16.19 KiB) Viewed 206 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
Selection_999(497).png (31.65 KiB) Viewed 206 times
ให้เราแก้ไขไฟล์ใหม่โดยการ ใส่ชื่อคลาสที่คลุมอยู่ ตามด้วย input
ให้เราสร้าง ไฟล์ CSS แล้วก็อบคลาสไปใส่ครับ แล้วทำการเปลี่ยนชื่อคลาสเป็น .jshop_prod_cart input

Code: Select all

.jshop_prod_cart input {
  width: 45px;
}
วิธีนี้เป็นการเจาะจงว่าเราต้องการใช้คลาสไหน แล้วให้ใส่คลาสที่คลุมอยู่ก่อน แล้วตามด้วย type ที่ต้องการเปลี่ยน
ผลลัพธ์ก็จะได้ มีขนาดที่เรากำหนดไว้ครับ
Selection_999(498).png
Selection_999(498).png (26.67 KiB) Viewed 206 times
อาจจะเป็นแนวทางนึงในการเปลี่ยน ไฟล์ CSS นะครับ
If you fall, let you stand. :)

  • Similar Topics
    Replies
    Views
    Last post

Return to “Joomla Developing Knowledge”

Who is online

Users browsing this forum: No registered users and 18 guests