ایجاد موقعیت جدید در قالب

[yss.ir]

سلام


چطوری میتونم یک موقعیت جدید در قالبم زیر قسمتی که مطالب صفحه اصلی قرار می گیرن، اضافه کنم؟
(می دانم می دانم آشنایی با css لازم است! اندکی بهره برده ام. . )

[reka]

سلام

در فایل index.php قالب در مکانی که میخواید موقعیت جدید ایجاد بشه، کد زیر رو قرار بدید:

<?php if ($this->countModules('test1')) { ?>
<div id="test">
<jdoc:include type="modules" name="test1" style="raw" />
</div>
<?php } ?>

این کد موقعیت test1 رو ایجاد میکنه و با آیدی test در css بهش استایل میده. البته این id رو خودتون باید در فایل css قالب اضافه کرده و مشخصاتش رو تعیین کنید.

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

<position>test1</position>

یا علی

[yss.ir]

سلام

ممنون، درست شد....

فقط من ميخوام مانند عكس زير 5 موقعيت رو بصورت افقي كنار هم قرار بدم، در اينصورت بايد چيكار كنم؟!

[reka]

سلام

از روشی که در بالا گفتم 5 موقعیت ایجاد کنید سپس مهمترین بخش کار نوشتن css هست که این 5 موقعیت کنار هم قرار بگیره.


یا علی

[yss.ir]

من اين كد رو داخل index

	<!-- BOTTOM SPOTLIGHT-->
	<div id="ja-botsl" class="wrap">
	<div class="main clearfix">
	
	 <?php if( $this->countModules('user1') ) {?>
	 <div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
			<jdoc:include type="modules" name="user1" style="xhtml" />
	 </div>
	 <?php } ?>
	 
	 <?php if( $this->countModules('user2') ) {?>
	 <div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
			<jdoc:include type="modules" name="user2" style="xhtml" />
	 </div>
	 <?php } ?>
	 
	 <?php if( $this->countModules('user8') ) {?>
	 <div class="ja-box<?php echo $botsl['user8']['class']; ?>" style="width: <?php echo $botsl['user8']['width']; ?>;">
			<jdoc:include type="modules" name="user8" style="xhtml" />
	 </div>
	 <?php } ?>
	
	 <?php if( $this->countModules('user9') ) {?>
	 <div class="ja-box<?php echo $botsl['user9']['class']; ?>" style="width: <?php echo $botsl['user9']['width']; ?>;">
			<jdoc:include type="modules" name="user9" style="xhtml" />
	 </div>
	 <?php } ?>

	</div></div>
	<!-- //BOTTOM SPOTLIGHT 2 -->

واين كد رو داخل css گذاشتم، ولي كنار هم قرار نگرفتن؟

/* Bottom spotlight */
#ja-botsl {
	padding: 0;
}

#ja-botsl .main {
	padding-bottom: 10px;
}

#ja-botsl div.moduletable h3,
#ja-botsl div.moduletable_default h3,
#ja-botsl div.moduletable_menu h3 {
	background: none;
	border-bottom: 1px solid #D5D5D5;
	border-right: none;
	color: #666666;
	margin: 0 0 10px 0;
	padding: 5px 0;
	font-size: 92%;
	font-weight: normal;
}

#ja-botsl div.moduletable,
#ja-botsl div.moduletable_default,
#ja-botsl div.moduletable_menu {
	background: none;
	color: #454545;
	margin: 0;
	padding: 0 10px 20px;
}

#ja-botsl .ja-box-left div.moduletable,
#ja-botsl .ja-box-left div.moduletable_default,
#ja-botsl .ja-box-left div.moduletable_menu {
	margin: 0 10px 0 0;
}

#ja-botsl .ja-box-right div.moduletable,
#ja-botsl .ja-box-right div.moduletable_default,
#ja-botsl .ja-box-right div.moduletable_menu {
	margin: 0;
}

#ja-botsl .ja-box-center div.moduletable,
#ja-botsl .ja-box-center div.moduletable_default,
#ja-botsl .ja-box-center div.moduletable_menu {
	margin: 0 10px 0 0;
}

#ja-botsl .img-border {
	background: url(../images/img-bg.gif) no-repeat right bottom;
	padding: 0 10px 10px 0;
}

#ja-botsl a {
	color: #454545;
}

#ja-botsl a:hover,
#ja-botsl a:focus,
#ja-botsl a:active {
	color: #BB2222;
	text-decoration: none;
}

#ja-botsl li {
	background: none;
	border-bottom: 1px solid #D5D5D5;
}

#ja-botsl div.moduletable_menu li a {
	background: url(../images/arrow.gif) no-repeat 0px 5px;
}

#ja-botsl div.moduletable_menu li a:hover,
#ja-botsl div.moduletable_menu li a:active,
#ja-botsl div.moduletable_menu li a:focus {
	background: url(../images/arrow-hover.gif) no-repeat 0px 5px;
}

#ja-botsl div.bubble1 div {
	background: url(../images/bub1-br2.gif) no-repeat bottom right;
}

** دو ارسال شما یکی شد

[p30p30]

سلام .
بسیار عالی بود .

خواهشمندم این آموزش را در ویکی منتشر نمایید . همچنین با مهم کردن این موضوع , بسیاری از مشکلات طراحان قالب مبتدی حل خواهد شد.