پاسخ : سوال درباره موقعیتهای خالی قالب
ضمن تشکر از دوستانی که پاسخ دادند، واقعا از انجمن مامبولرن استفاده میکنم نمیشه بیای سوالی مطرح بکنی حتی ساده ولی در کنارش چیزهای دیگه یادنگیری!
درسته بیشتر مشکلم مربوط به سی اس اس و اچ تی ام ال هست ولی کارقالب با غیر از اینهاست؟!
کد قسمت ستونها رو میذارم دوستان لطف کنند، این همه زحمت دادم بهتون ببخشید، راهنمایی کنین چطور درست بشه؟
بله سی اس اس رو اندازه فیکس دادم و فلوت چپ لذا موقعی که سمت چپی حذف میشه هردو ستون دیگه به سمت چپ میان و اندازشون تغییر پیدانمیکنه!
حالا میخوام موقعی که ستون چپ بودش :::ستون وسط::: کلاس 1 بخونه نبودش کلاس 2 رو بخونه . موقعی هم که هردو ستون چپ و راست نیست کلاس3 بخونه!
امروز از صبح دارم میسرچم میخونم چیزی گیرم نمیاد! اندازه هارو فیکس نزارم بهم میریزه ستونها!
کد:
<?php if($this->countModules('left')) : ?>
<div id="sideleft"><jdoc:include type="modules" name="left" style="xhtml" /></div>
<?php endif; ?>
<div id="content">
<jdoc:include type="component" />
</div>
<?php if($this->countModules('right')) : ?>
<div id="sideright"><jdoc:include type="modules" name="right" style="xhtml" /></div>
<?php endif; ?>
پاسخ : سوال درباره موقعیتهای خالی قالب
ستون ها:
1. ماژول های سمت راست
2- ماژول های سمت چپ
3- محتوای کامپوننت
شرط ها:
- اگر یکی از ماژول های سمت راست یا سمت چپ وجود داشت
- اگر هر دو ماژول وجود داشتند
- اگر هر 2 ماژول وجود نداشتند (بر فرض اینکه غیر فعال باشند)
فرضیات:
* ماژول سمت راست رو با POSITION_RIGHT مشخص می کنیم
* ماژول سمت چپ رو با POSITION_LEFT مشخص می کنیم
اجرا:
کد:
<?php
$positionName = '';
if($this->countModules('POSITION_RIGHT') AND $this->countModules('POSITION_LEFT')) {
$positionName = '-both';
}
else if($this->countModules('POSITION_RIGHT')) {
$positionName = '-right';
}
else if($this->countModules('POSITION_LEFT')) {
$positionName = '-left';
}
?>
<?php if($this->countModules('POSITION_LEFT')) : ?>
<div id="sideleft"><jdoc:include type="modules" name="POSITION_LEFT" style="xhtml" /></div>
<?php endif; ?>
<div class="content<?php echo $positionName; ?>">
<jdoc:include type="component" />
</div>
<?php if($this->countModules('POSITION_RIGHT')) : ?>
<div id="sideright"><jdoc:include type="modules" name="POSITION_RIGHT" style="xhtml" /></div>
<?php endif; ?>
توضیحات CSS:
حالا برای موقعیت کامپوننت 4 تا کلاس تعریف کردیم:
content: این کلاس موقعی ایجاد میشه که هر 2 ماژول راست و چپ وجود نداشته باشن یا غیر فعال باشن
content-both: این کلاس موقعی ایجاد میشه که هر 2 ماژول وجود داشته باشن
content-right: این کلاس موقعی ایجاد میشه که فقط ماژول سمت راست وجود داشته باشه
content-left: این کلاس موقعی ایجاد میشه که فقط ماژول سمت چپ وجود داشته باشه
نمونه کد CSS
کد:
.content {
width: 100%;
}
.content-both {
width: 60%;
}
.content-right {
width: 80%;
}
.content-left {
width: 80%;
}
#sideleft, #sideright {
width: 20%;
}
با این روش فضاهای خالی از بین میره
این کد رو خیلی ساده نوشتم تا خوب متوجه بشی و کاربران دیگه هم بتونن مشکلشون رو حل کنن
کدی که نوشتم ساده تر هم میشه... ;)
پاسخ : سوال درباره موقعیتهای خالی قالب
واقعا متشکرم، کار بزرگی انجام دادین این موضوع تویه انجمن به طور کامل مطرح نشده بود که شما همه چیز یکجاتوضیح دادین.ممنون.
پاسخ : سوال درباره موقعیتهای خالی قالب
سلام من یک قالب دارم که کد index.php
[
کد:
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
$siteName = $this->params->get('siteName');
class tjC {
function isFrontPage(){
return (JRequest::getCmd('option')=='com_content' && !JRequest::getInt('id'));
}
}
$TJ = new tjC($this);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
<!--
Design by ThemesJoomla.com
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید] xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />
</head>
<body>
<div id="top">
<div id="top-cover">
<div id="logo"><a href="<?php echo $this->baseurl ?>" title="<?php echo $siteName; ?>"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" border="0" alt="<?php echo $siteName; ?>" /></a></div>
<div id="topmenu">
<jdoc:include type="modules" name="mymainmenu" style="xhtmlxtd" />
</div>
</div>
</div>
<div class="container">
<div id="contentarea">
<?php if(!$TJ->isFrontPage()) { ?>
<?php
$positionName = 'content';
if($this->countModules('myright') AND $this->countModules('myleft')) {
$positionName = 'content-both';
}
else if($this->countModules('myright')) {
$positionName = 'content-right';
}
else if($this->countModules('myleft')) {
$positionName = 'content-left';
}
?>
<?php if($this->countModules('myleft')) : ?>
<div id="sideleft"><jdoc:include type="modules" name="myleft" style="xhtml" /></div>
<?php endif; ?>
<div class="content<?php echo $positionName; ?>">
<jdoc:include type="component" />
</div>
<?php if($this->countModules('myright')) : ?>
<div id="sideright"><jdoc:include type="modules" name="myright" style="xhtml" /></div>
<?php endif; ?>
<?php } else { ?>
<div class="spotlight">
<jdoc:include type="modules" name="myspotlight" style="xhtml" />
</div>
<?php } ?>
</div>
<div id="bottom">
<div id="user2">
<jdoc:include type="modules" name="myuser2" style="xhtml" />
</div>
<div id="user3">
<jdoc:include type="modules" name="myuser3" style="xhtml" />
</div>
</div>
<div id="footer">
<jdoc:include type="modules" name="myfooter" style="xhtml" />
<p>Copyright &copy; <?php echo $siteName; ?>. All Rights Reserved. <?php echo JText::_('Powered by') ?> <a href="http://www.joomla.org">Joomla!</a>. <?php echo JText::_('Valid') ?> <a href="[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید] <?php echo JText::_('and') ?> <a href="[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید].
<!-- You CAN NOT remove (or unreadable) those links without permission. Removing the link and template sponsor Please visit themesjoomla.com or contact with e-mail (webmaster@themesjoomla.com) If you don't want to link back to themesjoomla.com, you can always pay a link removal donation. This will allow you to use the template link free on one domain name. Also, kindly send me the site's url so I can include it on my list of verified users . Please read license.txt -->
<br />
<a href="[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید] rel="follow">Joomla Themes</a> by <a rel="follow" href="[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]
</div>
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>
و کد css به شکل زیر است:
کد:
body {
margin: 0px;
padding: 0px;
background: #FFFFFF;
}
body, td, th {
font-family: "Swis721 Lt BT" ,Arial, Helvetica, sans-serif;
font-size: 10px;
color: #242424;
line-height: 160%;
}
h1, h4, h5, h6 {
font-size: 12px;
color: #000000;
font-weight: normal;
}
h4 {
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 0;
color: #FF9900;
margin-left: 2px;
}
h2 {
color: #000000;
font-weight: normal;
font-size: 10px;
text-transform: uppercase;
margin: 0;
padding: 0;
font-family: "Swis721 Lt BT" ,Arial, Helvetica, sans-serif;
line-height: 32px;
}
h3 {
color: #990000;
font-weight: normal;
font-size: 10px;
text-transform: none;
margin-bottom: 10px;
padding-top: 0;
margin-top: 0;
font-family:"Swis721 Lt BT" ,Verdana, Arial, Helvetica, sans-serif;
}
a {
color: #1F6BB2;
}
a:hover {
color: #008080;
}
.container {
width: 1100px;
margin: 0 auto;
}
#contentarea {
width: 1100px;
clear: left;
margin-top: 0;
float: left;
padding-bottom: 30px;
background: #C0C0C0;
}
#top {
width: 100%;
height: 90px;
}
#top-cover {
width: 1100px;
margin: 0 auto;
}
#logo {
width: 200px;
float: left;
margin-top: 15px;
margin-left: 5px;
}
#header {
width: 1100px;
float: left;
display: inline-block;
margin-bottom: 20px;
}
.content {
width: 100%;
margin-top:0px;
height:500px;
}
.content-both {
width: 60%;
}
.content-right {
width: 80%;
}
.content-left {
width: 80%;
}
#sideleft, {
width: 20%;
float: left;
padding-bottom: 77px;
margin-top:500px;
color: #666;
margin-right:910px;
}
#sideleft.moduletable {
margin-bottom: 0px;
}
#sideright {
width: 20%;
float: right;
padding-bottom: 70px;
margin-top: -557px;
color: #666;
margin-right:15px;
}
#sideright .moduletable {
margin-bottom: 0px;
}
#content2 {
width: 1000px;
float: left;
margin-top: 20px;
margin-left: 20px;
}
.clear {
clear: both;
}
}
#bottom {
width: 1100px;
clear: left;
float: left;
color: #666;
background:#151515;
padding:0 0 20px;
}
#right h3, #bottom h3 {
margin: 0px;
font-weight: bold;
color: #1F6BB2;
font-size: 10px;
font-family:"Swis721 Lt BT" ,"Trebuchet MS", Tahoma, Arial, Helvetica, Sans-serif;
border-bottom:5px solid #242424;
padding:0 0 5px 0;
}
#user1 {
width: 285px;
float: left;
margin-left: 15px;
}
#user1 .moduletable {
margin-bottom: 5px;
padding-bottom: 5px;
}
#user1 p {
margin: 0;
padding: 0;
margin-left: 2px;
}
#user1 a {
color: #FF9900;
}
#user2 {
width: 285px;
float: left;
margin-left: 50px;
}
#user2 li {
margin: 0;
padding: 0;
list-style: none;
list-style-image: none;
text-transform: none;
line-height: 18px;
}
#user2 a {
color: #666;
margin-left: 2px;
font-size: 11px;
}
#user3 {
width: 285px;
float: right;
margin-right: 10px;
}
#footer {
clear: left;
float: left;
width: 1100px;
text-align: left;
font-size: 9px;
padding: 10px 0 30px 10px;
color: #666;
}
#footer a {
color: #666;
}
#footer .moduletable {
width: 880px;
margin: 0 auto;
margin-top: 3px;
}
h2.contentheading, h2.componentheading {
margin-bottom: 20px;
margin-top: 10px;
}
.clear {
clear: both;
}
/* COMMON TAGS */
.modifydate {
color: #C0C0C0;
}
.author {
color: #C0C0C0;
}
.createdate {
color: #C0C0C0;
}
.contenttoc {
margin: 5px;
}
ul {
margin: 2px;
padding: 6px;
padding-left: 15px;
}
li {
padding-left: 1px;
line-height: 150%;
}
ul.arrow1 li, ul.arrow2 li {
padding-left: 5px;
padding-bottom: 2px;
padding-top: 2px;
}
.buttons {
float:right;
width:85px;
}
.buttons .buttonheading {
float:left;
}
.buttons img {
border: 0;
}
fieldset {
border: none;
}
textarea, input {
border: solid 1px #ccc;
color: #666;
}
.button {
background: none;
border: solid 1px #ccc;
color: #990000;
}
/* Poll Module Styles */
.poll-radio {
padding:0;
float:left;
clear:left;
text-align:left;
}
.poll-option {
float:left;
padding-bottom:6px;
padding-top: 3px;
width:85%;
margin-left: 2px;
}
.poll h3 {
border:none;
}
.author, .createdate, .modifydate, .buttons {
display:none
}
#topmenu {
float: right;
width:850px;
height: 61px;
margin-top:15px;
margin-right: 0px;
}
#topmenu ul {
list-style: none;
margin: 0;
padding: 0;
margin-left: -550px;
float: right;
}
#topmenu li {
list-style: none;
float: left;
font-weight: normal;
font-size: 10px;
padding-right:0px;
padding-left: 6px;
padding-top: 2px;
line-height: 10px;
text-transform: uppercase;
font-family: "Swis721 Lt BT" ,Candara, Arial, Helvetica, sans-serif;
}
#topmenu li li {
margin: 0 -95px 0 95px;
list-style: none;
float: left;
font-weight: normal;
font-size: 10px;
padding-right:0px;
padding-left: 6px;
padding-top: 2px;
line-height: 15px;
text-transform: uppercase;
font-family: "Swis721 Lt BT",Candara, Arial, Helvetica, sans-serif;
}
#topmenu li a {
display: block;
padding: 0;
font-weight: normal;
text-decoration: none;
color: #808080;
}
#topmenu li:hover, #topmenu li.hover {
position: static;
}
#topmenu li li:hover, #topmenu li li.hover {
position: static;
}
#topmenu li a:hover {
color: #1F6BB2;
background-position: center;
}
#topmenu li li a:hover {
color: #FF0000;
background-position: center;
}
#topmenu li.active a {
color: #000000;
background-position: center;
font-weight: 500;
}
#topmenu li li.active a {
color: #000000;
background-position: center;
font-weight: 900;
}
html>body #topmenu li a {
width: auto;
}
html>body #topmenu li li a {
width: auto;
}
.spotlight {
padding:15px 15px 0 15px;
height:572px;
}
من هر کاری می کنم تا مازولهای لفت و رایتش درست سر جاش قرار بگیره نمی شه لطفا برام تصحیحش کنید. لطفاً
