Joomla จะทำให้ DisplayNews responsive ยังไงครับ

พูดคุย phpBB3, SMF ปัญหา การติดตั้ง ปัญหา การลง Mod การแก้ไข หน้าตาบอร์ด การใช้งาน Joomla 1.5, 1.6, 1.7, 2.5 ,3.x และเร็วๆนี้ Joomla จะออกเวอร์ชั่น 4.0 การใช้งาน wordpress และ CMS อื่นๆ
การตั้งคำถาม ควรระบุรุ่นที่ใช้ ในการตั้งคำตามด้วย นะ เช่น SMF 1.1.4 หรือ SMF2.0 Joomla 1.0 joomla 3.8 และ รายละเอียดของ server OS , php เวอร์ชั่นไหน ฐานข้อมูลอะไร

Moderator: mindphp

Forum rules
คำถามหมวดนี้ ควรระบุ รายละเอียดของ Server OS, เวอร์ชั่น ของ PHP, CMS ที่ท่านใช้
รวมถึง Hosting หรือ Control Panel Hosting
toonytoony2004
PHP Hero Member
PHP Hero Member
Posts: 119
Joined: 27/07/2013 9:29 am

Joomla จะทำให้ DisplayNews responsive ยังไงครับ

Post by toonytoony2004 »

ผมลองทำจูมลา โดยปรับแต่งเทมเพลตและเพิ่ม bootstrap 3 เข้าไปในระบบ ซึ่งก็ยังไม่รู้ว่า วิธีการของตัวเองถูกหรือผิดอย่างไร รบกวนช่วยชี้แนะครับผม

สงสัยว่า จะทำให้โมดูล 1-4 ซึ่งผมใช้ Module Displaynews By bk version 2.7 ในการทดสอบแสดงผล เวอร์ชั่น desktop ไม่มีปัญหาครับ แต่อยากให้แสดงผลแบบ responsive ใน mobile, Tablet ไม่ทราบว่า มีวิธีการอย่างไรครับ

index.php

Code: Select all

<?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>
CSS ==>> เป็น Css ธรรมดานะครับ ผมยังเขียนแบบ LESS หรือ SASS ไม่เป็น

Code: Select all

@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******************************************/
ขอรบกวนชี้แนะด้วยครับผม ขอบคุณครับ ..ตรงไหน ไม่ถูกต้องยังไง ก็รบกวนชี้แนะเพิ่มเติมได้นะครับ ผมเพิ่งหัดลองทำแบบนี้
Attachments
รูปแสดงบน PC
รูปแสดงบน PC
m1.gif (31.81 KiB) Viewed 336 times
รูปแสดงบน Mobile
รูปแสดงบน Mobile
m2jpeg.jpg (82.82 KiB) Viewed 336 times

  • Similar Topics
    Replies
    Views
    Last post

Return to “ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM”

Who is online

Users browsing this forum: No registered users and 2 guests