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

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

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

 

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

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

 

 

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

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
คำสั่งให้แสดง ไฟล์ใน folder ทั้งหมดเรียงตามขนาดไฟล์ใน Folder ls -alh
โดย mindphp พ 10 ม.ค. 2024 3:29 pm บอร์ด Linux - Web Server
0
653
พ 10 ม.ค. 2024 3:29 pm โดย mindphp View Topic คำสั่งให้แสดง ไฟล์ใน folder ทั้งหมดเรียงตามขนาดไฟล์ใน Folder  ls -alh
มีหนังสือ แนะนำ Developing Extensions for Joomla! 5
โดย mindphp พ 10 ม.ค. 2024 2:52 pm บอร์ด MindPHP News & Feedback
0
213
พ 10 ม.ค. 2024 2:52 pm โดย mindphp View Topic มีหนังสือ แนะนำ Developing Extensions for Joomla! 5
Google Chrome เข้าเว็ปที่เป็น HTTP ไม่ได้จะเป็นอย่างไร
โดย noncup302 พ 10 ม.ค. 2024 12:26 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
707
พฤ 11 ม.ค. 2024 8:53 pm โดย บุคคลทั่วไป View Topic Google Chrome เข้าเว็ปที่เป็น HTTP ไม่ได้จะเป็นอย่างไร
อินเตอร์เน็ตบ้าน กับ Corporate ต่างกันอย่างไร
โดย Anonymous อ 09 ม.ค. 2024 12:40 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
300
พ 10 ม.ค. 2024 12:24 pm โดย noncup302 View Topic อินเตอร์เน็ตบ้าน กับ Corporate ต่างกันอย่างไร
ตรวจสอบข้อมูลภาษี MyTaxAccount - เพื่อยื่นแบบแสดงรายการภาษีเงินได้บุคคลธรรมดา (แบบ ภ.ง.ด.90/ภ.ง.ด.91)
โดย mindphp อ 07 ม.ค. 2024 6:05 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
1050
อ 07 ม.ค. 2024 6:09 pm โดย mindphp View Topic ตรวจสอบข้อมูลภาษี MyTaxAccount - เพื่อยื่นแบบแสดงรายการภาษีเงินได้บุคคลธรรมดา (แบบ ภ.ง.ด.90/ภ.ง.ด.91)
ใครใช้ SSH อัพเกรดด่วน เครื่องคุณกำลังมีความเสียงสำหรับคนที่ใช้ OpenSSH ต่ำกว่าเวอร์ชั่น 9.5
โดย mindphp อ 07 ม.ค. 2024 3:15 am บอร์ด MindPHP News & Feedback
1
262
อ 07 ม.ค. 2024 3:20 am โดย mindphp View Topic ใครใช้ SSH อัพเกรดด่วน เครื่องคุณกำลังมีความเสียงสำหรับคนที่ใช้ OpenSSH ต่ำกว่าเวอร์ชั่น 9.5
สอบถามครับ Joomla ใช้ Hosting ของอะไรดีครับ
โดย Anonymous อ 07 ม.ค. 2024 3:00 am บอร์ด สอบถามปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
705
อ 07 ม.ค. 2024 6:34 pm โดย mindphp View Topic สอบถามครับ Joomla ใช้ Hosting ของอะไรดีครับ
หากคุณเป็นแฟนตัวยงของฟุตบอลไทย คือเว็บไซต์ที่คุณห้ามพลาด
โดย chenyuting ศ 05 ม.ค. 2024 4:52 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
358
ศ 05 ม.ค. 2024 4:52 pm โดย chenyuting View Topic หากคุณเป็นแฟนตัวยงของฟุตบอลไทย คือเว็บไซต์ที่คุณห้ามพลาด