سوال درباره موقعیتهای خالی قالب

سلام، مطلب آقای بلوردی عزیز درباره آموزش طراحی قالب جوملا 1.5 مطالعه کردم تویه انجمن هم سرچی زدم ولی ماشا الله با این همه سوال چیزی پیدانکردم(حتی با سرچ)

خب می خوام مثلا موقعی که ماژولهای سمت چپ قالبم خالی باشه به طور اتوماتیک ستون وسط بکشه و قسمت خالی صفحه رو هم ستون وسط در اختیار بگیره!

کد عدم نمایش ماژولها و موقعیتها رو نوشته بود ولی توضیح نداده بود که اینطوری میشه یا نه!
یه مسئله دیگه اینکه کدهای ترکیبی اینگونه چطوری هستن و برای چه جاهایی کاربرد داره؟

باتشکر

سلام

من به شخصه سعی میکنم اکثر آموزشهای قوی رو بخونم. و این آموزش رو نخوندم !

برای این منظور شما باید از div استفاده کنید ! بطور خودکار قالب شما وقتی در موقعیت مربوطه چیزی قرار نگیرد ! آن قسمت نمایش داده نمیشود ! این موارد بر میگرده به دانش شما از HTML و CSS .

هیچکس تنهاتر از خدا نیست

باتشکر از پاسختون مهدی عزیز، بله بنده از div استفاده میکنم دانشم زیاد نیست ولی خب با راهنمایی دوستان میشه کاری کرد.
اما یه قسمت از سوالم نگرفتم دوباره میپرسم:
شیوه بکارگیری کد و همچنین ترکیبی بودن اونهارو لطفا توضیح بدین.
ممنون.

دوست عزیز سوالتون رو واضحتر بیان کنید ! شیوه اینکار کاملاْ‌ مشخص هست !

موارد ترکیبی برای موقعیتهای قالب نیز میتوانید از if , else ها در قالب استفاده کنید !

فکر نمیکنم تفاوتی داشته باشد اینکه اینجا مرحله به مرحله به شما html را آموزش دهیم یا اینکه خودتون تلاش کنید و مطالعه کنید !

هیچکس تنهاتر از خدا نیست

توی طراحی قالبتون از این کد استفاده کنید

کد:

---

<?php if($this->countModules('POSITION_NAME')) : ?>

---

و وجود یا عدم وجود موقعیت رو مشروط به این شرط کنید
اللبته اگر ماژولی فعال نشده در موقعیت مربوط باشه این ستور کار نمی کنه
امید وارم منظورتون رو درست متوجه شده باشم

بله باتشکر.
مثلا بخواسته باشم موقعی که قسمت ماژول چپ سایت خالی هست، قسمت کامپوننت و مطالب فضای ماژول چپ رو در اختیار بگیره!

سلام.

ابتدا قالبتون رو طوري بسازيد كه سه ستون نمايش داده بشن و درصورت حذف ستون سمت چپ، ستون وسط جاي اون رو بگيره.

اينكار رو با استفاده از div و css مي تونيد انجام بديد.

سپس قبل از باز شدن بالاترين تگ div مربوطه به ستون سمت چپ، كدي كه دوستان معرفي كردند رو قرار بديد.

POSITION_NAME اسم موقعيت موردنظر شماست.

سپس بلافاصله بعد از بسته شده شدن تگ div‌مورد نظر ، كد زير رو قرار بديد:

کد:

---

<?php endif; ?>

---

يا علي

[quote author=سعید link=topic=31658.msg157084#msg157084 date=1296362654]
سلام.

ابتدا قالبتون رو طوري بسازيد كه سه ستون نمايش داده بشن و درصورت حذف ستون سمت چپ، ستون وسط جاي اون رو بگيره.

اينكار رو با استفاده از div و css مي تونيد انجام بديد.

سپس قبل از باز شدن بالاترين تگ div مربوطه به ستون سمت چپ، كدي كه دوستان معرفي كردند رو قرار بديد.

POSITION_NAME اسم موقعيت موردنظر شماست.

سپس بلافاصله بعد از بسته شده شدن تگ div‌مورد نظر ، كد زير رو قرار بديد:

کد:

---

<?php endif; ?>

---

يا علي
[/quote]

بله، توضیح شما کاملتر بود و متوجه این امر شدم ولی حالا مشکلی که دارم بحث div و css هست چون که طبق فرموده شما انجام دادم ولی موقعی که ستون سمت چپ نباشدش ستون وسط و راست میان جای چپ قرار میگیرن اونوقت ستون سمت راست جاش خالی میشه (ستون وسط کشیده نمیشه!) هرچند مربوط به جوملا نمیشه و بحثhtml و css اگه میشه توضیح بدین در این حالت چیکار کنم!؟
سپاس فراوان

سلام.

احتمالا اندازه DIV ها رو بصورت ثابت وارد کردید.

در هر حال این موضوع خارج از حیطه تخصصی انجمن مامبولرن هست. بهتره به سایت های تخصصی همین حوزه مراجعه کنید.

یا علی

شما باید در هر مرحله چک کنید که آیا موقعیت ماژول وجود دارد یا نه و برای هر موقعیت یک کلاس تعریف کنید.
با این روش کاری دیگه نداره. کافیه هر کلاس رو متناسب با خودش تغییر اندازه بدین.
فکر کنم گیج شده باشین.

مثال میزنم:

کد:

---

<?php
$positionName = 'none-leftmodule';
if($this->countModules('POSITION_NAME')) {
        $positionName = 'with-leftmodule';
}
?>
<div class="<?php echo $positionName; ?>"></div>

---

کد بالا میگه اگر ماژول های موقعیت POSITION_NAME وجود داشت اونوقت نام کلاس Div رو with-leftmodule بزار و گرنه نام کلاس رو none-leftmodule قرار بده

بقیش دیگه به خودتون بستگی داره که چقدر به CSS و HTML وارد هستین...

ضمن تشکر از دوستانی که پاسخ دادند، واقعا از انجمن مامبولرن استفاده میکنم نمیشه بیای سوالی مطرح بکنی حتی ساده ولی در کنارش چیزهای دیگه یادنگیری!

درسته بیشتر مشکلم مربوط به سی اس اس و اچ تی ام ال هست ولی کارقالب با غیر از اینهاست؟!

کد قسمت ستونها رو میذارم دوستان لطف کنند، این همه زحمت دادم بهتون ببخشید، راهنمایی کنین چطور درست بشه؟
بله سی اس اس رو اندازه فیکس دادم و فلوت چپ لذا موقعی که سمت چپی حذف میشه هردو ستون دیگه به سمت چپ میان و اندازشون تغییر پیدانمیکنه!
حالا میخوام موقعی که ستون چپ بودش :::ستون وسط::: کلاس 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 © <?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;

}

---

من هر کاری می کنم تا مازولهای لفت و رایتش درست سر جاش قرار بگیره نمی شه لطفا برام تصحیحش کنید. لطفاً

سلام

یه قالب بود که تغییراتی روش انجام دادم که مناسب شرکتمون باشه.خیلی هم خوب کار میکنه و مشکلی نداره.ولی وقتی سایز اسلاید شو رو تغییر دادم و کوچک کردم،فاصله اسلاید شو با بقیه اجزای صفحه خیلی زیاد شده و ظاهر سایت رو به هم ریخته.

میشه راهنماییم کنید؟؟؟؟ اعصابم به هم ریخته

آدرس سایت:

[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

سلام

اینکه اعصاب شما بهم ریخته دلیل نمیشه قوانین انجمن رو زیر پا بگذارید !!!

لطفاً قوانین را یکبار مطالعه کنید تا هم آرامش خودتون رو بدست بیارید ! و هم طبق قوانین سوال خودتون رو مطرح نمایید.

هیچکس تنهاتر از خدا نیست

متوجه منظورتون نمیشم.
من کدوم قوانین رو زیر پا گذاشتم؟؟

درسته که اولین باره میام اینجا،ولی قوانین رو کم وبیش خوندم.
اگر منظورتون اینه که سوالم تکراریه،من خیلی خیلی گشتم ولی جواب سوالمو نگرفتم.برا همین مزاحمت ایجاد کردم.اگر میدونستم ناراحت میشید اصلاً سوال نمیپرسیدم

دوست گرامی!!

سوال شما باید در یک تاپیک دیگر و جدید مطرح شود !!! عنوان این تاپیک به سوال شما ارتباطی ندارد ! ضمن اینکه این تاپیک مشکلی دیگر را دنبال کرده و ... ! پس قوانین را دوباره مطالعه فرمایید !
کسی هم ناراحت نمیشه ! شما هم بهتره منطقی به موارد نگاه کنید !

هیچکس تنهاتر از خدا نیست