โดยปกติแล้ว 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.ตรวจสอบการแสดงผลในหน้าเว็บ

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

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

 

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

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

 

 

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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
จะติดตั้ง sql server php driver บน mac
โดย Anonymous ศ 05 ม.ค. 2024 2:07 pm บอร์ด Programming - PHP
1
930
ส 06 ม.ค. 2024 7:25 pm โดย mindphp View Topic จะติดตั้ง sql server php driver บน mac
สอบถามการหา Channel access token ของไลน์ Notify
โดย Thanavat_n พฤ 04 ม.ค. 2024 11:51 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
395
ศ 05 ม.ค. 2024 8:24 am โดย emptyspace View Topic สอบถามการหา Channel access token ของไลน์ Notify
ใช้ Wordpress Plugin ที่ติดตั้งใว้ แต่ไม่ได้เปิดใช้ มีผลทำให้เว็บช้าไหมครับ???
โดย Anonymous พ 03 ม.ค. 2024 6:14 pm บอร์ด สอบถามปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
3
1031
อ 13 ก.พ. 2024 11:39 am โดย บุคคลทั่วไป View Topic ใช้ Wordpress Plugin ที่ติดตั้งใว้ แต่ไม่ได้เปิดใช้ มีผลทำให้เว็บช้าไหมครับ???
แนะนำบิ๊กไบค์ขนาดกลาง ที่เหมาะกับการเดินทางไกล
โดย p444722 พ 03 ม.ค. 2024 12:14 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
338
พ 03 ม.ค. 2024 12:14 am โดย p444722 View Topic แนะนำบิ๊กไบค์ขนาดกลาง ที่เหมาะกับการเดินทางไกล
วิธีสมัคร Binance ง่าย ๆ ใน 3 นาที ผจญภัยในโลกของ crypto
โดย p444722 อ 02 ม.ค. 2024 11:52 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
283
อ 02 ม.ค. 2024 11:52 pm โดย p444722 View Topic วิธีสมัคร Binance ง่าย ๆ ใน 3 นาที ผจญภัยในโลกของ crypto
วิธีเปิดบัญชี Binance ขั้นตอนในการลงทุนดิจิทัล
โดย p444722 อ 02 ม.ค. 2024 11:32 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
281
อ 02 ม.ค. 2024 11:32 pm โดย p444722 View Topic วิธีเปิดบัญชี Binance ขั้นตอนในการลงทุนดิจิทัล
วิธีอ่านค่าตัวต้านทาน แบบเส้น 4 และ 5 แถบสี วิธีการอ่านค่าตัวต้านทาน Resistor (R)
โดย mindphp จ 01 ม.ค. 2024 2:30 pm บอร์ด IOT - Internet of things
2
1799
จ 01 ม.ค. 2024 2:45 pm โดย mindphp View Topic วิธีอ่านค่าตัวต้านทาน แบบเส้น 4 และ 5 แถบสี วิธีการอ่านค่าตัวต้านทาน Resistor (R)
ความแตกต่างของเครื่อง Server R210 กับ R210 II
โดย mindphp จ 01 ม.ค. 2024 11:37 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
309
จ 01 ม.ค. 2024 12:04 pm โดย mindphp View Topic ความแตกต่างของเครื่อง Server R210 กับ R210 II