โดยปกติแล้ว Template ของ Joomla จะใช้ CSS Framwork ของ Bootstrap ซึ่งการแบ่งส่วนการแสดงผลในหน้าเว็บจะเรียกว่า Grid เราสามารถแบ่งเนื้อหาในหน้าเว็บเป็นคอลัมน์ เช่น เมนูฝั่งซ้าย เมนูฝั่งขวา และเนื้อหาตรงกลาง โดยขนาดของ Grid จะแบ่งเป็น 12 คอลัมน์ เราสามารถกำหนดความกว้างของคอลัมน์เป็นตัวเลข 1-12 ในตัวอย่างนี้จะแนะนำการแบ่งเนื้อหาเป็นสามส่วน โดยใช้คลาส col-md-3 สำหรับการแสดงผลฝั่งซ้ายและขวา ใช้คลาส col-md-6 สำหรับการแสดงผลเนื้อหาตรงกลาง ซึ่งถ้ากำหนดเนื้อหาครบทั้งสามคอลัมน์ การแสดงผลจะไม่มีปัญหา แต่หากปิดการแสดงผลในฝั่งซ้ายหรือขวาออกไป บริเวณนั้นจะเป็นช่องว่าง บทความนี้จึงแนะนำการปรับการแสดงผลของเนื้อหาให้มีขนาดพอดีกับหน้าเว็บไซต์

 

1.ในโปรแกรม Netbeans เปิดไฟล์ index.php จากนั้นกำหนดเงื่อนไขโดยนำคำสั่ง countModules ไปคลุมส่วนแสดงผลของข้อมูลฝั่งซ้าย

<?php if ($this->countModules('main-left')) : ?>
        <div class="col-md-3">
             <jdoc:include type="modules" name="main-left" style="xhtml" />
        </div>
<?php endif; ?>

 

2.กำหนดเงื่อนไขสำหรับการแสดงผลของเนื้อหาหลัก ซึ่งความกว้างของเนื้อหาหลักจะเปลี่ยนไปตามการแสดงผลของข้อมูลฝั่งซ้ายและขวา

$mainclass = 'col-md-12';
if ($this->countModules('main-left') && $this->countModules('main-right')) {
    $mainclass = 'col-md-6';
} else if ($this->countModules('main-left') || $this->countModules('main-right')) {
    $mainclass = 'col-md-9';
}

 

3.ตรวจสอบการแสดงผลในหน้าเว็บ

หน้าเว็บก่อนการกำหนดเงื่อนไขการแสดงผลของข้อมูล

แสดงหน้าเว็บก่อนการกำหนดเงื่อนไขการแสดงผลของข้อมูล
แสดงหน้าเว็บก่อนการกำหนดเงื่อนไขการแสดงผลของข้อมูล

 

หลังจากปิดการแสดงผลของโมดูลฝั่งซ้ายหรือขวาไป จะสังเกตว่าพื้นที่การแสดงผลของเนื้อหาหลักจะปรับขนาดให้พอดีกับหน้าเว็บไซต์

แสดงหน้าเว็บหลังจากการปิดการแสดงผลของโมดูลฝั่งขวา
แสดงหน้าเว็บหลังจากการปิดการแสดงผลของโมดูลฝั่งขวา

 

 

เนื้อหาเพิ่มเติม 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ที่เปิดเองน่ะรู้ แต่ที่ไม่รู้คือ โดนแอบเอาไปเปิด
โดย Anonymous พ 14 ก.พ. 2024 8:08 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
372
พ 14 ก.พ. 2024 8:08 pm โดย บุคคลทั่วไป View Topic ที่เปิดเองน่ะรู้ แต่ที่ไม่รู้คือ โดนแอบเอาไปเปิด
Wordpress เว็บไซต์โหลดช้าแล้วขึ้นแบบนี้บ่อยค่ะ ตอนนี้เข้าหลังบ้าน admin กดเข้าอะไรไม่ได้เลย
โดย Anonymous อ 13 ก.พ. 2024 11:38 am บอร์ด สอบถามปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
0
296
อ 13 ก.พ. 2024 11:38 am โดย บุคคลทั่วไป View Topic Wordpress เว็บไซต์โหลดช้าแล้วขึ้นแบบนี้บ่อยค่ะ ตอนนี้เข้าหลังบ้าน admin กดเข้าอะไรไม่ได้เลย
บริการรับทำ Pentest เจาะระบบเพื่อค้นหาช่องโหว่
โดย admeadme จ 12 ก.พ. 2024 1:45 pm บอร์ด Share Knowledge
0
429
จ 12 ก.พ. 2024 1:45 pm โดย admeadme View Topic บริการรับทำ Pentest เจาะระบบเพื่อค้นหาช่องโหว่
สอบถาม ถ้าต้องดู รหัส SMTP ย้อนหลัง บน Gmail ต้องดูที่ไหนครับ
โดย Thanavat_n ศ 09 ก.พ. 2024 1:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
772
ศ 08 มี.ค. 2024 8:14 pm โดย mindphp View Topic สอบถาม ถ้าต้องดู รหัส SMTP ย้อนหลัง บน Gmail ต้องดูที่ไหนครับ
คอมพิวเตอร์คืออะไร
โดย Best1677 พ 07 ก.พ. 2024 3:08 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
292
พ 07 ก.พ. 2024 3:08 pm โดย Best1677 View Topic คอมพิวเตอร์คืออะไร
ความรู้พื้นฐานเกี่ยวกับคอมพิวเตอร์
โดย Anonymous พ 07 ก.พ. 2024 3:04 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
297
พ 07 ก.พ. 2024 3:04 pm โดย บุคคลทั่วไป View Topic ความรู้พื้นฐานเกี่ยวกับคอมพิวเตอร์
คอมพิวเตอร์ของฉันทำไมช้าจัง?
โดย Anonymous อ 06 ก.พ. 2024 10:41 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
222
อ 06 ก.พ. 2024 10:41 am โดย บุคคลทั่วไป View Topic คอมพิวเตอร์ของฉันทำไมช้าจัง?
นี่คือหตุผลทำไมโปรแกรมเมอร์บริษัทเทคโนโลยี หรือ บ.เทค มีการลดพนักงานลง เงินเดือนขึ้นเร็วและโดนจ้างออกเร็ว
โดย Anonymous จ 05 ก.พ. 2024 3:35 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
435
จ 05 ก.พ. 2024 3:35 pm โดย บุคคลทั่วไป View Topic นี่คือหตุผลทำไมโปรแกรมเมอร์บริษัทเทคโนโลยี หรือ บ.เทค มีการลดพนักงานลง เงินเดือนขึ้นเร็วและโดนจ้างออกเร็ว