سوال درباره موقعیتهای خالی قالب [بایگانی]

salamati

01-26-2011, 09:28 AM

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

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

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

باتشکر

مهدی.

01-26-2011, 10:51 AM

سلام

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

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

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

salamati

01-28-2011, 09:58 PM

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

مهدی.

01-28-2011, 10:36 PM

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

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

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

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

sahama

01-29-2011, 05:05 AM

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

<?php if($this->countModules('POSITION_NAME')) : ?>
و وجود یا عدم وجود موقعیت رو مشروط به این شرط کنید
اللبته اگر ماژولی فعال نشده در موقعیت مربوط باشه این ستور کار نمی کنه
امید وارم منظورتون رو درست متوجه شده باشم

salamati

01-29-2011, 02:58 PM

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

سعید

01-30-2011, 04:44 AM

سلام.

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

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

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

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

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

<?php endif; ?>

يا علي

salamati

01-30-2011, 11:05 AM

سلام.

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

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

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

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

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

<?php endif; ?>

يا علي

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

سعید

01-30-2011, 02:37 PM

سلام.

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

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

یا علی

balal

01-30-2011, 02:57 PM

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

مثال میزنم:

<?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 وارد هستین...

salamati

01-30-2011, 03:54 PM

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

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

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

balal

01-30-2011, 11:21 PM

ستون ها:
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%;
}

با این روش فضاهای خالی از بین میره
این کد رو خیلی ساده نوشتم تا خوب متوجه بشی و کاربران دیگه هم بتونن مشکلشون رو حل کنن
کدی که نوشتم ساده تر هم میشه... ;)

salamati

01-31-2011, 06:49 AM

واقعا متشکرم، کار بزرگی انجام دادین این موضوع تویه انجمن به طور کامل مطرح نشده بود که شما همه چیز یکجاتوضیح دادین.ممنون.

saso

02-06-2011, 03:21 PM

سلام من یک قالب دارم که کد 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" "<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>

<html xmlns="<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b> 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="<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>!</a>. <?php echo JText::_('Valid') ?> <a href="<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b> <?php echo JText::_('and') ?> <a href="<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>

<br />
<a href="<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b> rel="follow">Joomla Themes</a> by <a rel="follow" href="<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>
</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;

}

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

behnaz65

05-29-2011, 07:33 AM

سلام

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

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

آدرس سایت:

<b><font color=red>فقط کاربران عضو انجمن می توانند لینک ها را مشاهده کنند</font></b>

مهدی.

05-29-2011, 08:38 AM

سلام

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

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

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

behnaz65

05-29-2011, 10:55 AM

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

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

مهدی.

05-29-2011, 11:08 AM

دوست گرامی!!

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

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