العاب قص شعر/العاب دبابات/العاب كرة قدم/العاب مكياج/العاب سيارات سباق/العاب سبونج بوب/العاب ماريو/العاب تلبيس/العاب اكشن نار/ adslsolutionsالعاب مغامرات/العاب ذكاء/العاب اطفال/العاب طبخ بنات/العاب باربي/العاب بن تن/العاب بوس/العاب تلوين/العاب ديكور


العودة   نادى الاتصالات والتقنية > اقسام التصميم والتطوير > منتدى تطوير وإدارة وتصميم المواقع

إضافة رد
 
أدوات الموضوع طريقة عرض الموضوع
قديم 06-05-2010, 04:09 PM   #1
ابو عمر
عضو نشيط
 
تاريخ التسجيل: Jun 2010
المشاركات: 52
افتراضي طريقة لاحاطة وتاطير جميع القوالب بإستخدام Css





قم بفتح صفحة

html

ثم قم بإضافة متغيير جديد

كما موضح بالصورة



بعد ذلك قم بتطبيق التالي



هتفتح لك صفحة منها اذهب الى الاختيار الخاص ب

Background

ثم قم بإستعراض صورة التمدد العلوية

وطبق الاتي



بعد ذلك انتقل من القائمة اليسري الى الخيار الخاص ب

Box

ماعليك الا تحديد ارتفاع الصورة فقط لا غير

كما موضح بالصورة



بعدها اضغط اوكيه

ثم قم بإنشاء متغيير جديد كما موضح بالصورة



بعد ذلك قم بتطبيق الاتي



بعد ذلك من القائمة اليسري قم بإختيار

Background

ثم طبق الاتي



طبعا هتقوم بإستعراض الصورة اليمني العلوية

بعد ذلك من القائمة اليسري قم بإختيار

Box

ثم قم بوضع كلا من ارتفاع الصورة وعرضها

وطبق الاتي



بعد ذلك اضغط موافق

ثم ارجع مرة اخرى وقم بإضافة متغيير جديد

ونفس التطبيقات اللى سويناها مع تغيير الاسم الى

#header .left

قم بإستعراض الصورة اليسري العلوية وطبق الاتي



ثم اذهب الى

Box

وطبق الاتي



كلام جميل

قم بإضافة متغيير جديد

باسم

#contain

وماعليك الا ان تذهب الى

Box

وتطبق الاتي



ناتي الان الى اعمدة

قم بإضافة متغيير جديد وطبق الاتي



بعد ذلك قم بإستعراض صورة العمود الايسر

وطبق الاتي



اذهب لخانة

Box

وقم بتطبيق الاتي

(مع تغيير الاحجام الى مايتناسب مع تصميمك)



طيب نبغى نشوف شطارتكم في توزيع العمود الايمن

مع العلم ان اسم المتغيير سوف يكون

.verright

بعد ذلك

تقوم بتوزيع الجدول السفلي كما شرحنا الجدول العلوي

وهذه هي الاسماء اللى تستخدمها حتي لا يحدث تعارض بين الاكواد اثناء التاطير في التمبلت

#footer

#footer .fright

#footer .fleft

بكذا الحمد لله انتهينا اخيرا من التوزيع

نروح ونقوم بنسخ جميع الاكواد الموضحة بالصورة الاتية



ثم نذهب الى اعدادت
css

ونقوم بلصق الاكواد مع مراعاة تغيير روابط الصور الى مايناسب سيرفر موقعك

------------







التاطير واستبدال التمبلات

اولا تمبلت الناف بار



قم بوضع الكود التالي في بداية التمبلت

رمز Code:
كود:
<div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
<div class="verright">
<div class="verleft">
<div id="contain">
والكود التالي في نهايته

رمز Code:
كود:
</div>
</div></div>
<div id="footer">
<div class="fright"></div>
<div class="fleft"></div>
</div>
للعلم هذه الاكود تعتمد اساسا على الاسماء التي قمت بذكرها ويمكنك تغيير الاسماء اذا كنت استخدمت اسماء اخرى

*----------------------------------*

تمبلت الفورم ديسبلاي

img_fourmdisplay

التعديل الاول

ابحث عن

رمز Code:
كود:
<!-- sub-forum list  -->
اسفله قم بإضافة الكود التالي

رمز Code:
كود:
<div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
<div class="verright">
<div class="verleft">
<div id="contain">
ثم ابحث عن

رمز Code:
كود:
<!-- / sub-forum list  -->
اسفله قم بإضافة الكود التالي

رمز Code:
كود:
</div>
</div></div>
<div id="footer">
<div class="fright"></div>
<div class="fleft"></div>
</div>
-------

التعديل الثاني

ابحث عن

رمز Code:
كود:
<!-- / controls above thread list -->
اسفله قم بإضافة الكود التالي

رمز Code:
كود:
<div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
<div class="verright">
<div class="verleft">
<div id="contain">
ثم ابحث عن

رمز Code:
كود:
<!--/ controls below thread list -->
اسفله قم بإضافة الكود التالي

رمز Code:
كود:
</div>
</div></div>
<div id="footer">
<div class="fright"></div>
<div class="fleft"></div>
</div>
---------------------------------------

تمبلت الفورم هوم

لمن يريد فصل الاقسام عليه استبدال تمبلت الفورم هوم بالتالي

رمز Code:
كود:
$stylevar[htmldoctype]
<html dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
	<!-- no cache headers -->
	<meta **********="Pragma" content="no-cache" />
	<meta **********="Expires" content="-1" />
	<meta **********="Cache-Control" content="no-cache" />
	<!-- end no cache headers -->
	$headinclude
	<title><phrase 1="$vboptions[bbtitle]">$vbphrase[x_powered_by_vbulletin]

</phrase></title>
</head>
<body bgcolor="#E18A94">
$header
$navbar

<!-- guest welcome message -->  

<if condition="$show['guest']">  

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar

[cellspacing]" border="0" width="100%" align="center">  

<thead>  

<tr>  

<td class="tcat" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else 

/>5</if>"><phrase 1="$vboptions[bbtitle]">$vbphrase[welcome_to_the_x]</phrase></td>  

</tr>  

<tr>  

<td class="alt1" colspan="<if condition="$vboptions['showmoderatorcolumn']">6<else 

/>5</if>">  

<phrase 1="faq.php?$session[sessionurl]" 2="register.php?$session

[sessionurl]">$vbphrase[first_visit_message]</phrase>  

</td>  

</tr>  

</thead>  

</table>  

</if>  

<!-- / guest welcome message -->  

<!-- main -->  

$forumbits  

<!-- /main --> 

<br />
<br />
<div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
<div class="verright">
<div class="verleft">
<div id="contain">
<!-- what's going on box -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar

[cellspacing]" border="0" width="100%" align="center">
<thead>
	<tr>
		<td class="tcat" colspan="2">$vbphrase[whats_going_on]</td>
	</tr>
</thead>
<if condition="$show['loggedinusers']">
<!-- logged-in users -->
<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onclick="return 

toggle_collapse('forumhome_activeusers')"><img id="collapseimg_forumhome_activeusers" 

src="$stylevar[imgdir_button]/collapse_thead$vbcollapse

[collapseimg_forumhome_activeusers].gif" alt="" border="0" /></a>
			<a href="online.php$session[sessionurl_q]" 

rel="nofollow">$vbphrase[currently_active_users]</a>: $totalonline (<phrase 

1="$numberregistered" 2="$numberguest">$vbphrase[x_members_and_y_guests]</phrase>)
		</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_activeusers" style="$vbcollapse

[collapseobj_forumhome_activeusers]">
	<tr>
		<td class="alt2"><a href="online.php$session[sessionurl_q]" 

rel="nofollow"><img src="$stylevar[imgdir_misc]/whos_online.gif" alt="$vbphrase

[view_whos_online]" border="0" /></a></td>
		<td class="alt1" width="100%">
			<div class="smallfont">
				<div style="white-space: nowrap"><phrase 

1="$recordusers" 2="$recorddate" 3="$recordtime">$vbphrase

[most_users_ever_online_was_x_y_at_z]</phrase></div>
				<div>$activeusers</div>
			</div>
		</td>
	</tr>
</tbody>
<!-- end logged-in users -->
</if>
<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onclick="return 

toggle_collapse('forumhome_stats')"><img id="collapseimg_forumhome_stats" src="$stylevar

[imgdir_button]/collapse_thead$vbcollapse[collapseimg_forumhome_stats].gif" alt="" 

border="0" /></a>
			<phrase 1="$vboptions[bbtitle]">$vbphrase[x_statistics]

</phrase>
		</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_stats" style="$vbcollapse

[collapseobj_forumhome_stats]">
	<tr>
		<td class="alt2"><img src="$stylevar[imgdir_misc]/stats.gif" alt="<phrase 

1="$vboptions[bbtitle]">$vbphrase[x_statistics]</phrase>" border="0" /></td>
		<td class="alt1" width="100%">
		<div class="smallfont">
			<div>
				$vbphrase[threads]: $totalthreads,
				$vbphrase[posts]: $totalposts,
				$vbphrase[members]: $numbermembers<if 

condition="$show['activemembers']">,
					<span title="<phrase 1="$vboptions

[activememberdays]">$vbphrase[within_the_last_x_days]</phrase>">$vbphrase

[active_members]: $activemembers</span>
				</if>
			</div>
			<div><phrase 1="member.php?$session[sessionurl]

u=$newuserid" 2="$newusername">$vbphrase[welcome_to_our_newest_member_x]

</phrase></div>
		</div>
		</td>
	</tr>
</tbody>
<if condition="$show['birthdays']">
<!-- today's birthdays -->
<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onclick="return 

toggle_collapse('forumhome_birthdays')"><img id="collapseimg_forumhome_birthdays" 

src="$stylevar[imgdir_button]/collapse_thead$vbcollapse

[collapseimg_forumhome_birthdays].gif" alt="" border="0" /></a>
			$vbphrase[todays_birthdays]
		</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_birthdays" style="$vbcollapse

[collapseobj_forumhome_birthdays]">
	<tr>
		<td class="alt2"><a href="calendar.php?$session[sessionurl]

do=getday&amp;day=$today&amp;sb=1"><img src="$stylevar[imgdir_misc]/birthday.gif" 

alt="$vbphrase[view_birthdays]" border="0" /></a></td>
		<td class="alt1" width="100%"><div 

class="smallfont">$birthdays</div></td>
	</tr>
</tbody>
<!-- end today's birthdays -->
</if>
<if condition="$show['upcomingevents']">
<tbody>
	<tr>
		<td class="thead" colspan="2">
			<a style="float:$stylevar[right]" href="#top" onclick="return 

toggle_collapse('forumhome_events')"><img id="collapseimg_forumhome_events" 

src="$stylevar[imgdir_button]/collapse_thead$vbcollapse

[collapseimg_forumhome_events].gif" alt="" border="0" /></a>
			<if condition="$show['todaysevents']">$vbphrase

[todays_events]<else /><phrase 1="$vboptions[showevents]">$vbphrase

[upcoming_events_for_the_next_x_days]</phrase></if>
		</td>
	</tr>
</tbody>
<tbody id="collapseobj_forumhome_events" style="$vbcollapse

[collapseobj_forumhome_events]">
	<tr>
		<td class="alt2"><a href="calendar.php$session[sessionurl_q]"><img 

src="$stylevar[imgdir_misc]/calendar.gif" alt="$vbphrase[calendar]" border="0" /></a></td>
		<td class="alt1" width="100%"><div 

class="smallfont">$upcomingevents</div></td>
	</tr>
</tbody>
</if>
<tbody>  

<tr>  

<td class="thead" align="center" colspan="<if condition="$vboptions

['showmoderatorcolumn']">6<else />5</if>"><div class="smallfont"><strong>  

<a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase

[mark_forums_read]</a>  

&nbsp; &nbsp;  

<a href="showgroups.php?$session[sessionurl]">$vbphrase[view_forum_leaders]</a>  

</strong></div></td>  

</tr>  

</tbody>  

</table>  
</div>
</div></div>
<div id="footer">
<div class="fright"></div>
<div class="fleft"></div>
</div>
<br />  


<!-- icons and login code -->
<table cellpadding="0" cellspacing="2" border="0" width="100%">
<tr valign="bottom">
	<td>
		<table cellpadding="2" cellspacing="0" border="0">
		<tr>
			<td><img src="$stylevar[imgdir_statusicon]/forum_new.gif" 

alt="$vbphrase[contains_new_posts]" border="0" /></td>
			<td class="smallfont">&nbsp; $vbphrase

[forum_contains_new_posts]</td>
		</tr>
		<tr>
			<td><img src="$stylevar[imgdir_statusicon]/forum_old.gif" 

alt="$vbphrase[contains_no_new_posts]" border="0" /></td>
			<td class="smallfont">&nbsp; $vbphrase

[forum_contains_no_new_posts]</td>
		</tr>
		<tr>
			<td><img src="$stylevar

[imgdir_statusicon]/forum_old_lock.gif" alt="$vbphrase[a_closed_forum]" border="0" /></td>
			<td class="smallfont">&nbsp; $vbphrase

[forum_is_closed_for_posting]</td>
		</tr>
		</table>
	</td>
	<if condition="!$show['guest']">
		<!-- member logout -->
		<td align="$stylevar[right]"><a href="login.php?$session[sessionurl]

do=logout&amp;logouthash=$bbuserinfo[logouthash]"  onclick="return log_out()"><phrase 

1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a></td>
		<!-- end member logout -->
	</if>
</tr>
</table>
<!-- / icons and login code -->

$footer
</body>
</html>
وهو معدل وجاهز

وعليك ايضا استبدال تمبلت

forumhome_forumbit_level1_nopost

بالتالي

رمز Code:
كود:
<div style="padding:5px 0px 5px 0px;"></div>  




<div id="header">
<div class="right"></div>
<div class="left"></div>
</div>
<div class="verright">
<div class="verleft">
<div id="contain">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" border 

bgcolor="#784148">  
<tbody id="collapseobj_forumbit_$forumid" style="{$collapseobj_forumid}">  
    <td><if condition="$childforumbits">  
    <div align="center">  
<table  cellpadding="6" cellspacing="$stylevar[cellspacing]" border="0" width="100%" >  


<tr align="center">  
      <td class="thead" colspan="6" background="TRAIDNT/bgt_34.jpg">  
            <center><a href="forumdisplay.php?$session[sessionurl]f=$forum[forumid]"><b>  
            $forum[title]</b></a></center>  
            <if condition="$show['forumde******ion']"><div class="smallfont">  
        $forum[de******ion]</div></if>  
            <if condition="$show['subforums']"><div class="smallfont"><strong>  
        $vbphrase[subforums]</strong>: $forum[subforums]</div></if></td>  
    </tr>  


<tr align="center">  
      <td class="thead" width="4%">&nbsp;</td>  
      <td class="thead" align="$stylevar[left]">$vbphrase[forum]</td>  
      <td class="thead" width="240">$vbphrase[last_post]</td>  
      <td class="thead" width="7%">$vbphrase[threads]</td>  
      <td class="thead" width="7%">$vbphrase[posts]</td>  
      <if condition="$vboptions[showmoderatorcolumn]">  
      <td class="thead" width="12%">$vbphrase[moderator]</td>  
     </if>  
    </tr>  
$childforumbits  


</table>  
    </div>  
</if>   
</td>  
      
</tbody>  
</table>
</div>
</div></div>
<div id="footer">
<div class="fright"></div>
<div class="fleft"></div>
</div>
   


</body>  
</html>
وهو ايضا معدل وجاهز

---------------------------------

بذلك نكون قد انتهينا من التاطير

ولم يتبقى لنا الا تمبلت
Showthead

postbit_legacy

وهما ما احاول ان اجد طريقة تاطيرهم بالسي اس اس

اول ما اعرف الطريقة بنزلها لعيونكم

وجاري التعديل عليهم

----------------------

بكذا نكون قد انتهينا من الدرس واتمني من الله سبحانه وتعالى ان ينال اعجابكم

وان يكون الدرس واضح وخفيف

في امان الرحمن

من مواضيعي في المنتدي

ابو عمر غير متواجد حالياً   رد مع اقتباس
إضافة رد

أدوات الموضوع
طريقة عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر رد
طريقة تعريب موبيديف على جميع الاجهزة الكفية الآن مكسر الكراسي الكمبيوتر الكفي PDA's -Smartphone - PocketPC 0 06-16-2010 08:30 PM
شرح جميع القوالب اللي توضع فوقها الصورالتجميليه ابو عمر منتدى تطوير وإدارة وتصميم المواقع 0 06-05-2010 05:11 PM
طريقة توسيط الاقسام الرئيسيه دون عناء القوالب عبد الله منتدى تطوير وإدارة وتصميم المواقع 0 06-05-2010 03:47 PM
طريقة شرح تلوين جميع أجزاء الاستايل الاحترافي Css عبد الله منتدى تطوير وإدارة وتصميم المواقع 0 06-05-2010 02:48 PM
طريقة كسر حماية جميع جوالات الجيل الثالث سارى قسم الجوال العام 0 05-31-2010 07:14 PM


الساعة الآن 08:54 PM.


dsl.adslsolutions.net