โดย Before Dong » 07/09/2017 5:11 pm
Featured Article ปัจจุบันของผม
- 1.jpg (51.26 KiB) Viewed 1039 times
แต่ผมอยากได้แบบในรูปข้างล่างต้องทำยังไงหรอครับที่ดึงรูปจาก Article ไปใส่ในช่องสี่เหลี่ยมด้านซ้าย และ ตัด Article ที่ยาวเกินไป เป็นปุ่มอ่านเพิ่มเติม
- 2.jpg (55.29 KiB) Viewed 1039 times
CODE index.php
โค้ด: เลือกทั้งหมด
<?php
/**
* @package Joomla.Site
* @subpackage Templates.protostar
*
* @copyright Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
/** @var JDocumentHtml $this */
$app = JFactory::getApplication();
$user = JFactory::getUser();
// Output as HTML5
$this->setHtml5(true);
// Getting params from template
$params = $app->getTemplate(true)->params;
// Detecting Active Variables
$option = $app->input->getCmd('option', '');
$view = $app->input->getCmd('view', '');
$layout = $app->input->getCmd('layout', '');
$task = $app->input->getCmd('task', '');
$itemid = $app->input->getCmd('Itemid', '');
$sitename = $app->get('sitename');
if ($task === 'edit' || $layout === 'form')
{
$fullWidth = 1;
}
else
{
$fullWidth = 0;
}
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Add template js
JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));
// Add html5 shiv
JHtml::_('script', 'jui/html5.js', array('version' => 'auto', 'relative' => true, 'conditional' => 'lt IE 9'));
// Add Stylesheets
JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));
// Check for a custom CSS file
JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));
// Check for a custom js file
JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));
// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<link rel="stylesheet" href="user.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<jdoc:include type="head" />
</head>
<body>
<div class="container-fluid">
<div class="warpper" style="background-image: url(images/bg-top.jpg);">
<div class="row">
<div class="span6">
<div class="logotop"><jdoc:include type="modules" name="logotop" style="none" /> </div>
</div>
<div class="span6 pull-right">
<div class="searchtop"><jdoc:include type="modules" name="search-top" style="none"/> </div>
</div>
</div>
</div>
<div class="bg-menu-top">
<div class="row">
<div class="navbar">
<div class="span12">
<nav class="navigation" role="navigation">
<div class="navbar pull-left">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="element-invisible"><?php echo JTEXT::_('TPL_PROTOSTAR_TOGGLE_MENU'); ?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="nav-collapse">
<div class="menu-nav-top">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li><jdoc:include type="modules" name="menu-top" style="none" /></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="container">
<div class="nav-collapse pull-left">
<jdoc:include type="modules" name="pathway" style="none" />
</div>
</div>
<div class="container">
<div class="row">
<div class="span12 ">
<jdoc:include type="modules" name="pic-slide-home" style="none" />
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="<?php echo ($this->countModules('right-menu')) ? 'span8' : 'span12' ; ?>" >
<jdoc:include type="component" />
</div>
<?php if ($this->countModules('right-menu')) : ?>
<div class="span4"> <div class="right"> <jdoc:include type="modules" name="right-menu" style="none" /> </div></div>
<?php endif; ?>
</div>
</div>
<div class="container">
<div class="bg-conten-home">
<div class="row">
<div class="span12 ">
<jdoc:include type="modules" name="content-home" style="none" />
</div>
</div>
</div>
</div>
<div class="warpper footer-wrapper" style="background-image: url(images/bg-top.jpg);">
<div class="container">
<footer>
<div class="row" >
<div class="span3">
<jdoc:include type="modules" name="footer-1" style="none" />
</div>
<div class="span3" >
<jdoc:include type="modules" name="footer-2" style="none" />
</div>
<div class="span3" >
<jdoc:include type="modules" name="footer-3" style="none" />
</div>
<div class="span3" >
<jdoc:include type="modules" name="footer-4" style="none" />
</div>
</div>
</footer>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<jdoc:include type="modules" name="footer-bottom" style="none" />
</div>
</div>
</div>
</div>
</body>
</html>
CODE css
โค้ด: เลือกทั้งหมด
.logotop{
margin-top: 5px;
margin-left: 100px;
}
.searchtop{
margin-top:23px;
}
.navigation {
padding: 0px 0;
border-top: 0px solid rgba(0,0,0,0.075);
border-bottom: 0px solid rgba(0,0,0,0.075);
margin-bottom: 0px;
}
.menu-nav-top{
margin-top:10px;
margin-left:110px;
font-size:25px;
}
.bg-menu-top{
background-color: #f8f8fa;
padding-bottom: 7px;
font-weight: bolder;
border-bottom:5px solid #404751;
}
.container-fluid {
padding-right:0px;
padding-left:0px;
}
.item-115:hover{
background-color:#e6e6e6;
}
.item-116:hover{
background-color:#e6e6e6;
}
.item-117:hover{
background-color:#e6e6e6;
}
.item-118:hover{
background-color:#e6e6e6;
}
.slideshow{
margin-top:20px;
margin-left:145px;
border:1px solid;
width:100%;
}
.carousel-caption {
position: absolute;
left: 0%;
right: 0%;
bottom: 0%;
padding: 15p%;
background: none;
background: none;
}
.langtop{
margin-top:30px;
}
.width-searchtop{
}
.rowtop{
margin-left:100px;
}
.form-inline{
float:left;
margin-left: 55px;
}
.carousel-inner {
position:relative;
margin: auto;
}
.carousel {
position: static;
}
.carousel-control {
top: 45%;
}
.footer-wrapper{
background-color:#72cee7;
}
.navi-foot-left{
margin-left:20px;
}
.dev-footer{
position:relative;
}
.btn.widget-item-button{
float:right;
}
.bg-conten-home{
margin-bottom:20px;
}
.facebook-ic:hover{
border:1px solid #00AFF0;
background-color:blue;
}
.youtube-ic:hover{
border:1px solid #00AFF0;
background-color:red;
}
.google-ic:hover{
border:1px solid #00AFF0;
background-color:#d62222;
}
.about-con {
margin-left: 50px;
}
.border-content-home{
padding-bottom: 40px;
}
.btn {
margin-right: 10px;
}
.navbar-inner{
margin-bottom: -15px;
margin-left: 32px;
border: 0px solid #d4d4d4;
}
.navigation .nav.nav-child {
/* top: -8px; */
/* left: 100%; */
}
.right{
margin-top:20px;
}
.jicons-icons{
display:none;
}
.dl-horizontal {
margin-left: -100px;
}
.clearfix {
clear: both;
}
.featured-images {
position: relative;
height: 200px;
overflow: hidden;
border: #cccccc 3px solid;
}
dl.article-info {
border-top: none;
}
dl.article-info {
margin-top: -2px;
}
.article-info{
float: left;
display: -webkit-inline-box;
}
.featured-article-box {
border: #e8eaf1 1px solid;
background-color: #f8f8fa;
margin-bottom: 20px;
padding: 5px 5px 10px;
-webkit-box-shadow: 0px 10px 5px -5px rgba(136,136,136,1);
-moz-box-shadow: 0px 10px 5px -5px rgba(136,136,136,1);
box-shadow: 0px 10px 5px -5px rgba(136,136,136,1);
}
.blog-featured{
padding-left:30px;
}
[b][size=150]Featured Article ปัจจุบันของผม [/size][/b]
[attachment=1]1.jpg[/attachment]
[b][size=150]แต่ผมอยากได้แบบในรูปข้างล่างต้องทำยังไงหรอครับที่ดึงรูปจาก Article ไปใส่ในช่องสี่เหลี่ยมด้านซ้าย และ ตัด Article ที่ยาวเกินไป เป็นปุ่มอ่านเพิ่มเติม[/size][/b]
[attachment=0]2.jpg[/attachment]
CODE index.php
[code]<?php
/**
* @package Joomla.Site
* @subpackage Templates.protostar
*
* @copyright Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
/** @var JDocumentHtml $this */
$app = JFactory::getApplication();
$user = JFactory::getUser();
// Output as HTML5
$this->setHtml5(true);
// Getting params from template
$params = $app->getTemplate(true)->params;
// Detecting Active Variables
$option = $app->input->getCmd('option', '');
$view = $app->input->getCmd('view', '');
$layout = $app->input->getCmd('layout', '');
$task = $app->input->getCmd('task', '');
$itemid = $app->input->getCmd('Itemid', '');
$sitename = $app->get('sitename');
if ($task === 'edit' || $layout === 'form')
{
$fullWidth = 1;
}
else
{
$fullWidth = 0;
}
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Add template js
JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));
// Add html5 shiv
JHtml::_('script', 'jui/html5.js', array('version' => 'auto', 'relative' => true, 'conditional' => 'lt IE 9'));
// Add Stylesheets
JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));
// Check for a custom CSS file
JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));
// Check for a custom js file
JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));
// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<link rel="stylesheet" href="user.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<jdoc:include type="head" />
</head>
<body>
<div class="container-fluid">
<div class="warpper" style="background-image: url(images/bg-top.jpg);">
<div class="row">
<div class="span6">
<div class="logotop"><jdoc:include type="modules" name="logotop" style="none" /> </div>
</div>
<div class="span6 pull-right">
<div class="searchtop"><jdoc:include type="modules" name="search-top" style="none"/> </div>
</div>
</div>
</div>
<div class="bg-menu-top">
<div class="row">
<div class="navbar">
<div class="span12">
<nav class="navigation" role="navigation">
<div class="navbar pull-left">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="element-invisible"><?php echo JTEXT::_('TPL_PROTOSTAR_TOGGLE_MENU'); ?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="nav-collapse">
<div class="menu-nav-top">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li><jdoc:include type="modules" name="menu-top" style="none" /></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="container">
<div class="nav-collapse pull-left">
<jdoc:include type="modules" name="pathway" style="none" />
</div>
</div>
<div class="container">
<div class="row">
<div class="span12 ">
<jdoc:include type="modules" name="pic-slide-home" style="none" />
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="<?php echo ($this->countModules('right-menu')) ? 'span8' : 'span12' ; ?>" >
<jdoc:include type="component" />
</div>
<?php if ($this->countModules('right-menu')) : ?>
<div class="span4"> <div class="right"> <jdoc:include type="modules" name="right-menu" style="none" /> </div></div>
<?php endif; ?>
</div>
</div>
<div class="container">
<div class="bg-conten-home">
<div class="row">
<div class="span12 ">
<jdoc:include type="modules" name="content-home" style="none" />
</div>
</div>
</div>
</div>
<div class="warpper footer-wrapper" style="background-image: url(images/bg-top.jpg);">
<div class="container">
<footer>
<div class="row" >
<div class="span3">
<jdoc:include type="modules" name="footer-1" style="none" />
</div>
<div class="span3" >
<jdoc:include type="modules" name="footer-2" style="none" />
</div>
<div class="span3" >
<jdoc:include type="modules" name="footer-3" style="none" />
</div>
<div class="span3" >
<jdoc:include type="modules" name="footer-4" style="none" />
</div>
</div>
</footer>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<jdoc:include type="modules" name="footer-bottom" style="none" />
</div>
</div>
</div>
</div>
</body>
</html>
[/code]
CODE css
[code]
.logotop{
margin-top: 5px;
margin-left: 100px;
}
.searchtop{
margin-top:23px;
}
.navigation {
padding: 0px 0;
border-top: 0px solid rgba(0,0,0,0.075);
border-bottom: 0px solid rgba(0,0,0,0.075);
margin-bottom: 0px;
}
.menu-nav-top{
margin-top:10px;
margin-left:110px;
font-size:25px;
}
.bg-menu-top{
background-color: #f8f8fa;
padding-bottom: 7px;
font-weight: bolder;
border-bottom:5px solid #404751;
}
.container-fluid {
padding-right:0px;
padding-left:0px;
}
.item-115:hover{
background-color:#e6e6e6;
}
.item-116:hover{
background-color:#e6e6e6;
}
.item-117:hover{
background-color:#e6e6e6;
}
.item-118:hover{
background-color:#e6e6e6;
}
.slideshow{
margin-top:20px;
margin-left:145px;
border:1px solid;
width:100%;
}
.carousel-caption {
position: absolute;
left: 0%;
right: 0%;
bottom: 0%;
padding: 15p%;
background: none;
background: none;
}
.langtop{
margin-top:30px;
}
.width-searchtop{
}
.rowtop{
margin-left:100px;
}
.form-inline{
float:left;
margin-left: 55px;
}
.carousel-inner {
position:relative;
margin: auto;
}
.carousel {
position: static;
}
.carousel-control {
top: 45%;
}
.footer-wrapper{
background-color:#72cee7;
}
.navi-foot-left{
margin-left:20px;
}
.dev-footer{
position:relative;
}
.btn.widget-item-button{
float:right;
}
.bg-conten-home{
margin-bottom:20px;
}
.facebook-ic:hover{
border:1px solid #00AFF0;
background-color:blue;
}
.youtube-ic:hover{
border:1px solid #00AFF0;
background-color:red;
}
.google-ic:hover{
border:1px solid #00AFF0;
background-color:#d62222;
}
.about-con {
margin-left: 50px;
}
.border-content-home{
padding-bottom: 40px;
}
.btn {
margin-right: 10px;
}
.navbar-inner{
margin-bottom: -15px;
margin-left: 32px;
border: 0px solid #d4d4d4;
}
.navigation .nav.nav-child {
/* top: -8px; */
/* left: 100%; */
}
.right{
margin-top:20px;
}
.jicons-icons{
display:none;
}
.dl-horizontal {
margin-left: -100px;
}
.clearfix {
clear: both;
}
.featured-images {
position: relative;
height: 200px;
overflow: hidden;
border: #cccccc 3px solid;
}
dl.article-info {
border-top: none;
}
dl.article-info {
margin-top: -2px;
}
.article-info{
float: left;
display: -webkit-inline-box;
}
.featured-article-box {
border: #e8eaf1 1px solid;
background-color: #f8f8fa;
margin-bottom: 20px;
padding: 5px 5px 10px;
-webkit-box-shadow: 0px 10px 5px -5px rgba(136,136,136,1);
-moz-box-shadow: 0px 10px 5px -5px rgba(136,136,136,1);
box-shadow: 0px 10px 5px -5px rgba(136,136,136,1);
}
.blog-featured{
padding-left:30px;
}[/code]