Q - ผมต้องการสร้างไฟล์ css ในโมเดลของ Joomla แล้ว Import ไปใช้งานครับ

กฎการใช้บอร์ด
คำถามหมวดนี้ ควรระบุ รายละเอียดของ Server OS, เวอร์ชั่น ของ PHP, CMS ที่ท่านใช้
รวมถึง Hosting หรือ Control Panel Hosting

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: Q - ผมต้องการสร้างไฟล์ css ในโมเดลของ Joomla แล้ว Import ไปใช้งานครับ

Re: Q - ผมต้องการสร้างไฟล์ css ในโมเดลของ Joomla แล้ว Import ไปใช้งานครับ

โดย nuattawoot » 12/05/2018 9:45 pm

tsukasaz เขียน:การแทรก css ใน Joomla จะใช้คำสั่ง JFactory::getDocument()->addStyleSheet('ใส่ URL ที่ต้องการ');

โค้ด: เลือกทั้งหมด

<?php
JFactory::getDocument()->addStyleSheet(JUri::root().'modules/mod_***/***/***.css');

ทำได้แล้วครับ ขอบคุณครับ
เพิ่ม Code ไว้บนหัวสุดของไฟล์ default.php

โค้ด: เลือกทั้งหมด

<?php
// No direct access
defined('_JEXEC') or die;
JFactory::getDocument()->addStyleSheet(JUri::root().'modules/mod_trex_tabsupdate/css/style_tabs.css');
?>
2561-05-12 21_44_48-หน้าหลัก.png
2561-05-12 21_44_48-หน้าหลัก.png (20.69 KiB) Viewed 1081 times

Re: Q - ผมต้องการสร้างไฟล์ css ในโมเดลของ Joomla แล้ว Import ไปใช้งานครับ

โดย tsukasaz » 12/05/2018 9:35 pm

การแทรก css ใน Joomla จะใช้คำสั่ง JFactory::getDocument()->addStyleSheet('ใส่ URL ที่ต้องการ');

โค้ด: เลือกทั้งหมด

<?php
JFactory::getDocument()->addStyleSheet(JUri::root().'modules/mod_***/***/***.css');

Q - ผมต้องการสร้างไฟล์ css ในโมเดลของ Joomla แล้ว Import ไปใช้งานครับ

โดย nuattawoot » 12/05/2018 8:48 pm

ผมสร้างไฟล์ css แล้วเขียนคำสั่งต่างๆ ไปแล้วแต่ทีนี้นำไปใช้งานผม Import เข้าไปในไฟล์ default.php แล้ว css ไม่ทำงานครับ
ถามว่าผมเขียนโค๊ดหรือ โครงสร้างตรงไหนผิิดครับ
2561-05-12 20_43_50-Overwolf Quick Launcher.png
2561-05-12 20_43_50-Overwolf Quick Launcher.png (5.69 KiB) Viewed 1087 times
ไฟล์ Css.

โค้ด: เลือกทั้งหมด

.m-home-right-tabwrap {
    width: 566px;
    height: 335px;
    position: relative;
    background: #2c303b;
    box-shadow: 0 0 10px #000;
    margin: 0 auto;
}
.m-home-tabbox-ul {
    height: 55px;
    border-bottom: 1px solid #7b8493;
    width: 100%;
    background: #1d2028;
    background: -webkit-linear-gradient(#131419, #1e212a);
    background: linear-gradient(#131419, #1e212a);
}
.m-home-tabbox-ul li {
    font-size: 14px;
    color: #fff;
    height: 54px;
    width: 104px;
    float: left;
    line-height: 54px;
    border-left: 1px solid #080b14;
    border-right: 1px solid #2b2e35;
    border-bottom: 1px solid #080b14;
    cursor: pointer;
}

.clearFix {
    display: block;
    *display: inline-block;
}

.first {
}
.m-home-right-tabmain {
    position: relative;
    width: 100%;
}

.test{
    color: #333;
}
ไฟล์ default.php

โค้ด: เลือกทั้งหมด

<?php
// No direct access
defined('_JEXEC') or die;
?>
<link rel="stylesheet" href="css/style_tabs.css">
<p class="test"><?php echo $hello; ?></p>
<div class="m-home-right-tabwrap">
    <ul class="m-home-tabbox-ul clearFix" id="J_tabBox_ul">
     
        <li class="first"><a href="javascript:;">All</a></li>
        <li class="active"><a href="javascript:;">Update</a></li>
        <li class=""><a href="javascript:;">Event</a></li>
        <li class=""><a href="javascript:;">Promotions</a></li>
        <li class=""><a href="javascript:;">Tournament</a></li>
        <div class="more">
            <a href="/news" target="_blank" class="c_sprites"></a>
        </div>
    </ul>
    <div class="m-home-right-tabmain" id="J_tabBox">

        <div class="m-home-right-tabbox">
            <a href="http://www.hon.in.th/tournament/show-10-546-1.html"><h3>เปิดรับสมัครแล้ว HTT2018 Cycle 1</h3></a>
            <ul class="m-home-right-tablist">
                <li>
                    <a href="http://www.hon.in.th/news/show-8-545-1.html">
                        <span class="m-home-right-tablist-icon blue">
                            Update                                                                                                                                                                                                            </span>
                        <span class="m-home-right-tablist-cont">โหมดพิเศษ PBT</span>
                        <span class="m-home-right-tablist-time">05/10</span>
                    </a>
                </li>
                <li>
                    <a href="http://www.hon.in.th/event/show-9-544-1.html">
                        <span class="m-home-right-tablist-icon blue">
                            Event                                                                                                                                                        </span>
                        <span class="m-home-right-tablist-cont">Legacy Days</span>
                        <span class="m-home-right-tablist-time">05/10</span>
                    </a>
                </li>
                <li>
                    <a href="http://www.hon.in.th/promotion/show-32-542-1.html">
                        <span class="m-home-right-tablist-icon blue">
                            Promotion                                                </span>
                        <span class="m-home-right-tablist-cont">Plinko เซ็ตใหม่!! 4.4.4</span>
                        <span class="m-home-right-tablist-time">05/09</span>
                    </a>
                </li>
                <li>
                    <a href="http://www.hon.in.th/news/show-8-541-1.html">
                        <span class="m-home-right-tablist-icon blue">
                            Update                                                                                                                                                                                                            </span>
                        <span class="m-home-right-tablist-cont">แพตช์ 4.4.4 ประจำวันที่ 10 พ.ค. 61</span>
                        <span class="m-home-right-tablist-time">05/09</span>
                    </a>
                </li>
                <li>
                    <a href="http://www.hon.in.th/promotion/show-32-540-1.html">
                        <span class="m-home-right-tablist-icon blue">
                            Promotion                                                </span>
                        <span class="m-home-right-tablist-cont">Mythical Creature Bag</span>
                        <span class="m-home-right-tablist-time">05/02</span>
                    </a>
                </li>
                <li>
                    <a href="http://www.hon.in.th/promotion/show-32-539-1.html">
                        <span class="m-home-right-tablist-icon blue">
                            Promotion                                                </span>
                        <span class="m-home-right-tablist-cont">The Failed Experiment Bundle</span>
                        <span class="m-home-right-tablist-time">04/27</span>
                    </a>
                </li>
                <li>
                    <a href="http://www.hon.in.th/promotion/show-32-538-1.html">
                        <span class="m-home-right-tablist-icon blue">
                            Promotion                                                </span>
                        <span class="m-home-right-tablist-cont">ชุดเปย์คุ้ม Chi</span>
                        <span class="m-home-right-tablist-time">04/26</span>
                    </a>
                </li>
                <li>
                    <a href="http://www.hon.in.th/promotion/show-32-536-1.html">
                        <span class="m-home-right-tablist-icon blue">
                            Promotion                                                </span>
                        <span class="m-home-right-tablist-cont">Ally of the F.L.E.X.</span>
                        <span class="m-home-right-tablist-time">04/25</span>
                    </a>
                </li>
            </ul>
            <div class="m-phone-more">
                <a href="/news" class="c-btn-style1">VIEW ALL NEWS</a>
            </div>
        </div>
หน้าจอที่ได้มาตอนนี้
2561-05-12 20_45_16-.png

ข้างบน