โดยปกติฉันจะปรับเทมเพลตฟรีที่มีอยู่และเปลี่ยนสีและแบบอักษรเท่านั้น คำถามคือเมื่อฉันมีหน้า Joomla ออนไลน์แล้ววิธีที่ง่ายที่สุดในการเปลี่ยนแปลงเทมเพลต css คืออะไร?

ขณะนี้ฉันใช้เครื่องมือพัฒนา Chromeเพื่อค้นหาและปรับเปลี่ยนสไตล์ที่เฉพาะเจาะจงสำหรับตัวอย่าง ถ้าฉันชอบฉันจะปรับไฟล์ css ของแม่แบบโดยตรงในตัวแก้ไขออนไลน์ในพื้นที่การบริหาร

เมื่อฉันเริ่มครั้งแรกและฉันไม่มีเนื้อหาใด ๆ ฉันใช้เว็บเซิร์ฟเวอร์ท้องถิ่นกับ Joomla ซึ่งมีความได้เปรียบซึ่งฉันสามารถใช้ IDE ที่เหมาะสมสำหรับการเขียน css และ php code เนื่องจากตอนนี้ฉันมีเนื้อหาบางส่วนอยู่แล้วฉันอยากจะดูว่าการเปลี่ยนแปลงที่ฉันทำมีลักษณะอย่างไรกับเนื้อหาที่ฉันมี

ฉันรู้ว่านี่เป็นคำถามพื้นฐาน แต่มีเวิร์กโฟลว์ที่ต้องการหรือไม่เมื่อมีคนต้องการปรับการออกแบบของไซต์ที่มีอยู่หรือไม่

ลอกเลียนแบบไลฟ์ไซต์ด้วย Akeeba ติดตั้งในเครื่องจากนั้นปรับตามต้องการ เมื่อคุณทำ SSH / FTP เสร็จแล้วไฟล์ที่คุณเปลี่ยนกลับไปยังเว็บไซต์จริง

มีเหตุผลที่ดีมากมายที่ทำให้การบิด "บิด" ในเว็บไซต์สด ...

คุณมีตัวเลือกไม่กี่อย่างที่นี่ทั้งนี้ขึ้นอยู่กับว่าคุณใช้งานได้ง่ายระบบอัตโนมัติหรือค่าใช้จ่าย:

• ทำสิ่งที่คุณทำมาก่อนด้วยการติดตั้งในท้องที่ แต่เมื่อติดตั้งแล้วให้เปลี่ยนการติดตั้ง Joomla ในเครื่องเพื่อใช้ฐานข้อมูล MySQL ระยะไกลแบบสดconfiguration.phpของคุณหากโฮสต์ของคุณรองรับการเข้าถึงระยะไกล โปรดระวัง - การเปลี่ยนแปลงฐานข้อมูลใด ๆ จะถูกนำไปใช้ในการถ่ายทอดสด ...

• ใช้ส่วนประกอบเช่นextplorerและแก้ไขไฟล์เทมเพลตโดยตรงในเบราว์เซอร์โดยมีแท็บอื่นเปิดขึ้นมาแสดงเว็บไซต์โดยยังคงใช้เครื่องมือ dev ของ Chrome extplorer มีการกำหนดรหัสสีและเหมาะสำหรับการเปลี่ยนแปลงขนาดเล็กอย่างรวดเร็ว

• ใช้ระบบควบคุมเวอร์ชันเพื่อผลักดันการเปลี่ยนแปลง - ตัวอย่างเช่นพัฒนาเทมเพลตของคุณในการติดตั้ง Joomla ท้องถิ่นโดยใช้ IDE ที่คุณเลือกพร้อมกับเทมเพลตในที่เก็บ เมื่อเสร็จแล้วให้ทำการเปลี่ยนแปลงในเว็บไซต์จริงของคุณ ใช้เบ็ด post-commit เพื่อชำระเงินการเปลี่ยนแปลงเหล่านั้นเป็นเวอร์ชันที่ใช้งานได้ แม้ว่าการติดตั้งจะซับซ้อนกว่า แต่ก็หมายความว่าคุณสามารถย้อนกลับเป็นเวอร์ชันเทมเพลตเก่าได้เสมอหากคุณทำผิดพลาด เพิ่ม MySQL ระยะไกลเพื่อให้แน่ใจว่าข้อมูลมีความสอดคล้องกันทั้งในระดับท้องถิ่นและในชีวิต

• ชำระเงินสำหรับแม่แบบ / แม่แบบแม่แบบที่เหมาะสม - ที่ บริษัท ของฉันเราใช้แม่แบบYooTheme แม่แบบเฟรมเวิร์กนี้มีคุณสมบัติที่เรียกว่า 'Customizr' ซึ่งโดยทั่วไปจะเป็นหน้าต่างแบบ 2 บานหน้าต่างซึ่งมีตัวแปร CSS หลายร้อยชุด (เช่นกัน, ตัวแปร LESS) ทางด้านซ้ายและตัวอย่างสดทางด้านขวา ตัวแปรเหล่านี้ควบคุมเกือบทุกอิลิเมนต์ของเทมเพลตไม่ว่าจะเป็นช่องว่างภายในไปจนถึงเงาเมนูข้อความและทุกสิ่งในระหว่างนั้น การเปลี่ยนแปลงจะมีผลทันทีในหน้าตัวอย่างและสามารถกำหนด 'สไตล์' หลายแบบเพื่อให้คุณสามารถเล่นกับการกำหนดค่าตัวแปรที่แตกต่างกัน ทั้งหมดนี้กล่าวว่าฉันแน่ใจว่ากรอบแม่แบบอื่นมีคุณสมบัติที่คล้ายกันมาก

หมายเหตุ: ฉันไม่มี affliation กับ extplorer หรือ YooTheme นอกเหนือจากการเป็นผู้ใช้

หากเป็นเพียงการเปลี่ยนแปลง CSS ที่คุณกำลังทำให้คุณสามารถแสดงตัวอย่างต่อไปใน Chrome Development Tools และใช้สภาพแวดล้อมการพัฒนาออนไลน์เช่นCloud9หรือShiftEditคุณสามารถเชื่อมต่อโดยตรงกับเซิร์ฟเวอร์ของคุณผ่าน FTP และปรับแต่งเว็บไซต์สดโดยใช้ IDE ที่เหมาะสม คล้ายกับที่คุณทำเมื่อโฮสต์ไว้ในเครื่อง

อย่างไรก็ตามฉันจะไม่แนะนำสิ่งนี้สำหรับการเปลี่ยนแปลงที่ยิ่งใหญ่ซึ่งอาจทำให้ไซต์ของคุณเสียหาย (ฉันได้เรียนรู้วิธีที่ยากเมื่อไม่กี่ปีที่ผ่านมา) สำหรับสิ่งเหล่านี้ฉันขอแนะนำให้ตั้งค่าเซิร์ฟเวอร์ภายในเครื่อง (หรือ VM ฟรีจากkoding.com ) ทำการโคลนไซต์ด้วยAkeebaและใช้ Git * เพื่อผลักดันการเปลี่ยนแปลงไปยังไซต์สดของคุณเมื่อพวกเขาได้รับการทดสอบแล้ว

* ถ้าคุณไม่ต้องการรหัสของคุณจะถูกเผยแพร่บนGitHubหนึ่งทางเลือกที่ดีคือBitBucket

วิธีที่ 1

วิธีการหนึ่งที่ฉันใช้คือการเพิ่มไฟล์ css ของฉันเองลงในไฟล์เทมเพลต index.php สิ่งนี้สามารถห่อเพื่อเพิ่มเมื่อคุณเป็นผู้ใช้เท่านั้น

วิธีการขยายนี้คือการเขียนปลั๊กอินง่าย ๆ ที่เพิ่มไฟล์ css หากคุณเป็นผู้ใช้ ฉันใช้สิ่งนี้เพื่อทำการเปลี่ยนแปลงเทมเพลตผู้ดูแลระบบเริ่มต้นเพื่อหลีกเลี่ยงการเปลี่ยนแปลงโดยตรงในเทมเพลตที่อาจถูกแทนที่ด้วยการอัปเดตครั้งต่อไป

สิ่งที่ต้องการ...

class plgSystemBB extends JPlugin {
    public function onBeforeCompileHead() {

    if (JFactory::getUser()->username == 'my.login.name.goes.here')
    {
        JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
    }

    if(!JFactory::getApplication()->isAdmin()){
        return;
    }   

    JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}

วิธีที่ 2

ในการดูตัวอย่างการเปลี่ยนแปลงเทมเพลตคุณสามารถทำซ้ำเทมเพลตและทำการเปลี่ยนแปลงในเทมเพลตนั้นได้ หากต้องการดูการเปลี่ยนแปลงเหล่านั้นให้ผนวก "? template = test" เข้ากับ url ซึ่งจะแทนที่เทมเพลต แทนที่ "test" ด้วยชื่ออะไรก็ตามที่คุณได้ตัดสินใจใช้ซ้ำ

โปรดทราบว่าคุณต้องทำซ้ำแม่แบบทั้งหมดไม่ใช่สไตล์ ทั้งสไตล์และเทมเพลตสามารถทำซ้ำได้ใน admin gui

ฉันไม่เชื่อว่าเป็นไปได้ที่จะแทนที่สไตล์ใน URL [PW: ฉันเพิ่งพบว่าใน J3 คุณสามารถเขียนทับสไตล์ใน url ได้ ดูวิธีที่ 3]

วิธีที่ 3

คล้ายกับวิธีที่ 2 แต่มีสไตล์ ใช้สไตล์ "ทดสอบ" และแก้ไขเทมเพลตหลักเพื่อรวมแผ่นทดสอบสไตล์ หากต้องการแทนที่สไตล์ใน URL ให้เพิ่ม? templateStyle = โดยที่ตัวระบุแม่แบบ (เช่นตัวเลข)