ผมลองทำจูมลา โดยปรับแต่งเทมเพลตและเพิ่ม bootstrap 3 เข้าไปในระบบ ซึ่งก็ยังไม่รู้ว่า วิธีการของตัวเองถูกหรือผิดอย่างไร รบกวนช่วยชี้แนะครับผม
สงสัยว่า จะทำให้โมดูล 1-4 ซึ่งผมใช้ Module Displaynews By bk version 2.7 ในการทดสอบแสดงผล เวอร์ชั่น desktop ไม่มีปัญหาครับ แต่อยากให้แสดงผลแบบ responsive ใน mobile, Tablet ไม่ทราบว่า มีวิธีการอย่างไรครับ
index.php<?php
/**
* @subpackage Boonjong media v1 BJ01
* @copyright Copyright (C) 2015-2018 Boonjong media - All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined( '_JEXEC' ) or die( 'Restricted access' );
JHtml::_('behavior.framework', true);
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// use for version3
// Load optional Bootstrap bugfixes
JHtmlBootstrap::loadCss($includeMaincss = true);
// use for version3
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$sitename = $app->getCfg('sitename');
// Add Stylesheets
JHtmlBootstrap::loadCss();
// Add Stylesheets
JHtmlBootstrap::loadCss();
$doc->addStyleSheet('templates/'.$this->template.'/css/user.css');
JLoader::import( 'joomla.version' );
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<jdoc:include type="head" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/boonjong.css" type="text/css"/>
<link rel="shortcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico" />
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<?php jimport('joomla.application.component.model');?>
<link href='//fonts.googleapis.com/css?family=Droid Sans:400,700' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
<!-- optional links to additional stylesheets listed below -->
<link href="css/boonjong.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--main-top-body-->
<div class="maintop">
<div class="container top-body">
<!--intro text-->
<div class="column1 .col-md-8">
<jdoc:include type="modules" name="left-top-bar" />
</div>
<div class="column2 .col-md-4">
<jdoc:include type="modules" name="social" style="html5" />
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
<!--main head-->
<div class="container mainhead-body">
<!--logo-->
<div class="mainhead-column1 .col-xs-12" id=logo>
<a href=""><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/img/logo.png" alt="" /></a>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="container shownews">
<!--show news-->
<div class="shownews-column1 .col-xs-12">
<jdoc:include type="modules" name="playnews" style="html5" />
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
.clear {clear: both;}
.not-active {
pointer-events: none;
cursor: default;
}
::selection {
background: #09f; /* Safari */
color:#fff;
}
::-moz-selection {
background: #09f; /* Firefox */
color:#fff;
}
.search legend {
font-weight: 400;
font-family:'thaisansneue', Arial, Helvetica, sans-serif;
color: #C00;
}
/***************************************************Top code **********************************/
.maintop {
width: 100%;
height: auto;
background-color: #069;
}
.top-body {
padding-top: 20px;
}
.column1 {
float:left;
font-family:'thaisansneue', Arial, Helvetica, sans-serif;
font-size: 15px;
color: #FFF;
}
.column2 {
float:right;
width: auto;
}
#gruemenu.grue_92 ul li:first-child > a {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
font-family:'thaisansneue', Arial, Helvetica, sans-serif;
}
/*****************************************************Top menu************************************/
.mainhead-body {
padding: 10px 0;
background-color: #f1f1f1;
}
.mainhead-column1 {
width: auto;
height: auto;
}
a#logo {width:350px; height:130px; float: left;background: url(../images/logo.png) no-repeat;}
.mainhead-column2 {
width: auto;
height: auto;
float: left;
}
.dj-select {
display: none;
font-size: 1.5em;
color: #069;
font-family:'thaisansneue', Arial, Helvetica, sans-serif;
height: auto;
margin: 10px;
max-width: 95%;
padding: 5px;
}
/*********************************************Main Head**************************************/
.shownews {
padding: 10px 0;
}
.shownews-column1 {
width: auto;
height: auto;
}
.shownews-column1 p {
padding: 8px;
font-family: 'CSChatThaiUI', Helvetica, Arial, sans-serif;
font-size: 1.1em;
}
.shownews-column1 img {
padding-bottom: 10px;
margin-top: -55px;
}
.shownews-column1 .title {
padding-bottom: 8px;
font-family:'thaisansneue', Arial, Helvetica, sans-serif;
font-size: 1.3em;
font-weight: 400;
}
/******************************************Show Display News******************************************/
ขอรบกวนชี้แนะด้วยครับผม ขอบคุณครับ ..ตรงไหน ไม่ถูกต้องยังไง ก็รบกวนชี้แนะเพิ่มเติมได้นะครับ ผมเพิ่งหัดลองทำแบบนี้
แสดงกระทู้
