آموزش کار با افزونه ی Firebug

Started By admin, Sep 28 2011 09:41 PM

38 پاسخ برای این موضوع
admin

    مدیر و موسس انجمن

  • مدیر کل
  • 999 محبوبیت
  • 5297 ارسال

ارسالی 28 September 2011 - 09:41 PM

اکثر طراحان قالب یا مترجمان آن با افزونه ی Firebug آشنایی دارند. این افزونه که بر روی مرورگر FireFox نصب میشود به شما این امکان را می دهد تا یک قالب را قبل از انجام ویرایش در فایل های اصلی به صورت مجازی ویرایش کنید و روی آن کارهای مختلفی انجام دهید.
در حقیقت این افزونه امکانات زیادی را برای ویرایش یک قالب به صورت مجازی فرآهم می آورد. در این آموزش قصد دارم تا به صورت تصویری برخی از قابلیت ها و ابزار این افزونه را به شما دوستان عزیز آموزش دهم. امیدوارم از آموزش لذت ببرید!

آیکون برنامه: icn.png

تصویری از محیط برنامه:
 

mohit.png

برای استفاده از برنامه کافیست قالب مورد نظر خود را در یک صفحه ی آنلاین یا آفلاین با مرورگر FireFox باز کنید سپس روی آیکون افزونه ی Firebug کلیک کنید.
حال در قسمت پایین سمت چپ کدهای HTML مربوط به قالب را مشاهده می کنید و در قسمت سمت راست استایل های مربوط به CSS قالب را میبینید.
اکثر قالب ها از دو قسمت اصلی Head و Body تشکیل شده اند که سایر اجزا در این دو قسمت قرار دارند. در صورتی که قصد ویرایش یک عنصر را در قسمت هدر یا بالایی قالب دارید باید به کدهای بخش Head مراجعه کنید و در صورتی که می خواهید یک عنصر را در قسمت بدنه ی قالب ویرایش کنید باید به بخش کدهای Body مراجعه کنید.
برای پیدا کردن عنصر مورد نظر خود شما سه راه پیش رو دارید:

1. گشتن در قالب ها با استفاده از بازکردن شاخه به شاخه ی کدها و پیدا کردن کد مورد نظر (در بخش کدهای HTML)
2. استفاده از ابزار جست و جو
3. استفده از ابزار انتخاب عناصر در صفحه

پس از انتخاب عنصر مورد نظر شما امکان ویرایش کدهای HTML و استایل های CSS آن را خواهید داشت.
حال به بررسی هر یک از سه مورد می پردازیم:

روش اول – گشتن شاخه به شاخه در کدهای قالب

به طور مثال من می خواهم بخش نشان داده شده در تصویر را ویرایش کنم،
 

onsor1.png

برای این کار ابتدا باید تشخیص دهم که این عنصر در کدام بخش قالب قرار دارد؟ Head یا Body؟ با نگاهی دقیق تر متوجه خواهیم شد که این عنصر در بخش Body یا همان بدنه ی قالب قرار دارد. با زدن علامت + در کنار حرف Body جزئیات بیشتری را مشاهده می کنیم. با انتخاب شاخه ها و بازکردن آنها همانند عکس زیر به کد عنصر مورد نظر خود میرسیم.
 

body-onsor.png

روش دوم – استفاده از ابزار جست و جو

این روش نیازی به توضیح ندارد و شما می توانید با نوشتن قسمتی از کد مورد نظر یا نام عنصر آن را با استفاده از این ابزار بیابید

روش سوم – استفاده از ابزار انتخاب عناصر در صفحه

این روش که ساده ترین و جذابترین روش نیز می باشد به شما این امکان را می دهد تا با کلیک بر روی عنصر مورد نظر خود به کدهای آن دسترسی پیدا کنید!
برای این کار ابتدا این ابزار را انتخاب کنید، حال با رفتن بر روی هر عنصر کادری آبی روی آن نمایان می شود. کافیست عنصر مورد نظر خود را انتخاب کنید و آن را ویرایش کنید. همانند تصویر زیر:



entekhab-onsor.png

نکته: پس از انتخاب کدهای یک عنصر، استایل های مربوط به آن عنصر، نام فایل CSS و امکان ویرایش استایل ها در سمت راست این افزونه فرآهم می شود. برای ویرایش استایل ها کافیست روی کد استایل مورد نظر خود دوبار کلیک کنید یا اگر می خواهید استایل جدیدی بیافزایید در یک فضای خالی در قسمت استایل مورد نظر خود دوبار کلیک کنید تا یک فیلد خالی ایجاد شود. به عکس زیر توجه کنید:



vstyle-1.png

و
 

vstyle-2.png

شما می توانید کدهای مورد نظر خود را حذف یا اضافه کنید، جای عناصر را تغییر دهید، فونت ها را تغییر دهید، رنگ عناصر را عوض کنید و ...
به طور مثال من می خواهم رنگ پس زمینه ی عنصر مورد نظر خود را از خاکستری به سبز تغییر دهم. پس از انتخاب عنصر مورد نظر در بخش استایل های آن به دنبال رنگ خاکستری (#EEEEEE) می گردم. بعد روی آن دوبار کلیک می کنم و به جای #EEEEEE می نویسم Green. همانگونه که مشاهده می کنید رنگ پس زمینه ی این عنصر از خاکستری به سبز تغییر کرد. شما هر گونه تغییر دیگری را نیز میتوانید به همین صورت در قالب ایجاد کنید.
 

green.png

به این شکل در خواهد آمد
 

rang-onsor.png

توجه داشته باشید که این تغییرات دائمی نیستند و با یک بار رفرش یا همان تازه سازی صفحه به حالت اولیه باز می گردند!

امیدوارم این آموزش برای شما عزیزان مفید بوده باشد
موفق و موید باشید
مهرشاد ذاکریان

شوییچی

    عضو فعال

  • عضو انجمن
  • ستارهستارهستاره
  • 0 محبوبیت
  • 183 ارسال

ارسالی 02 October 2011 - 04:10 AM


[justify][align=justify][align=center]Firebug for Firefox
[/justify]

Firebug Lite for Google Chrome

Firebug Lite for other browsers

[justify][align=center]Firepicker - color picker for Firebug[/justify]
[/align]

Firebug Extensions

[/align]
[/align]
شوییچی

    عضو فعال

  • عضو انجمن
  • ستارهستارهستاره
  • 0 محبوبیت
  • 183 ارسال

ارسالی 21 April 2012 - 10:37 PM

ورژن 1.3 فقط یه فایل استایل داشت ، و خیلی راحت کد مربوطه رو برای تغییر دادن میشد پیدا کرد ،

الان ورژن 1.4 چندتا فایل استایل داره ، چجوری باید فهمید کدی که باید تغییر داده بشه توی کدوم فایل استایل هست ؟

قسمت پنجره استایل همچین چیزی رو نشون میده :
b0874a11...1_all.css


الان توی این عکس مشخصه، admin.css ، ولی من همچین چیزی ندارم !!

تصویر
SoheilSmart

    مدیر

  • عضو انجمن
  • ستارهستارهستارهستاره
  • 5 محبوبیت
  • 387 ارسال

ارسالی 22 April 2012 - 12:06 AM

برای این کار باید CCC رو غیر فعال کنید تا همه ی css ها در یک فایل جمع نشن ، روی آدرس هر فایلی که ماوس رو ببرید آدرسش رو میگه
salondaran

    عضو انجمن

  • عضو انجمن
  • ستارهستاره
  • 0 محبوبیت
  • 34 ارسال

ارسالی 11 May 2012 - 11:13 AM

برای ذخیره کردن ویرایش ها باید چکار کنیم ؟
منظور از باز کردن قالب چیه آیا منظورتون باز کردن صفحه دمو قالب مورد نظر هست یا اینکه قالب رو رو هاست خودمون یا لوکال هاست نصب کنیم و بعد بازش کنیم ؟
دانوش

    مدیر پروژه

  • مدیر کل
  • 569 محبوبیت
  • 5188 ارسال

ارسالی 11 May 2012 - 05:31 PM

در متن توضیح داده که:

این افزونه که بر روی مرورگر FireFox نصب میشود به شما این امکان را می دهد تا یک قالب را قبل از انجام ویرایش در فایل های اصلی به صورت مجازی ویرایش کنید

تغییرات به شکل واقعی ذخیره نخواهند شد. در واقع شما دارید اشکال زدایی رو انجام میدید.
برای تغییرات واقعی باید فایل مربوطه رو پیدا کنید و در فایل تغییر بدید.
hidden

    عضو قدیمی

  • عضو انجمن
  • ستارهستارهستارهستارهستاره
  • 16 محبوبیت
  • 1059 ارسال

ارسالی 12 July 2013 - 04:06 PM

سلام من تازه دارم اموزش میبینم و یاد میگیرم کار با افزونه رو خواهشا ببینید این 2 مورد رو درست انجام دادم یا خیر

برای حذف علامت ضربدر از طرح نگاری تصاویر مطابق شکل زیر
http://presta-shop.i...?thumbnail=1372

از قالب : css/scenes.css
کد کامل

/* Cluetip design */

.cluetip-product_scene {
		text-align:right;
		background-color:white;
		padding:10px;
		border:1px solid gray;
		background:#F1F2F4 url(../img/block_bg.jpg) repeat-x scroll right bottom;
		opacity:0.95;
	}
	
	.cluetip-product_scene #cluetip-close{
		text-align:left;
		float:left;
	}
	
	.cluetip-product_scene h4{
		float:right;
		font-size:1.6em;
		margin-bottom:5px;
		width:175px;
	}
	
	.cluetip-product_scene a{
		float:right;
		margin-top:2px;
	}
	
	.cluetip-product_scene p.description{
		float:right;
		width:170px;
		margin-right:15px;
	}
	
	.cluetip-product_scene div.prices{
		float:right;
		width:90px;
		text-align:left;
	}
	
	.cluetip-product_scene .new {
		background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0% 50%;
		border:1px solid #488C40;
		clear:both;
		color:white;
		display:inline;
		font-size:0.45em;
		font-weight:bold;
		margin:8px;
		padding:0pt 0.4em;
		text-transform:uppercase;
		vertical-align:0.3em;
	}
	.cluetip-product_scene .on_sale, .cluetip-product_scene .discount {
		color:#DA0F00;
		display:block;
		font-weight:bold;
		text-transform:uppercase;
	}

/* END Cluetip design */

#scenes .screen_scene {
	margin:0 auto;
}

#scenes a.cluetip{
	display:block;
	position:absolute;
	text-decoration:none;
}

/*TMP*/
#scenes .cluetip span{
	background:transparent url(../img/icon/cible.gif) no-repeat scroll center center;
	color:black;
	display:block;
	font-size:1.1em;
	font-weight:bold;
	height:23px;
	padding-top:5px;
	text-align:center;
	width:23px;
}
/*TMP*/
.thumbs_banner{
	margin:10px auto;
	width:100%;
}

.thumbs_banner .space-keeper{
	width:25px;
	float:left;
	display:block;
	height:100%;
}

.thumbs_banner .space-keeper a.prev{
	background:transparent url(../img/icon/serial_scroll_left.gif);
	display:none;
	width:25px;
	text-align:center;
	font-size:1.5em;
	text-decoration:none;
	background-color:#EEE;
}
#scenes_list{
	overflow:hidden;
	width:514px;
	float:right;
	border:1px solid #EEE;
	background:white;
}
#scenes_list ul{
	list-style-type:none;
}

#scenes_list li{
	float:right;
}

#scenes_list a{
	display:block;
}

.thumbs_banner a.next {
	background:transparent url(../img/icon/serial_scroll_right.gif);
	width:25px;
	float:right;
	display:block;
	text-align:center;
	font-size:1.5em;
	text-decoration:none;
	background-color:#DDD;
}

کد حذف شده
/*TMP*/
#scenes .cluetip span{
	background:transparent url(../img/icon/cible.gif) no-repeat scroll center center;
	color:black;
	display:block;
	font-size:1.1em;
	font-weight:bold;
	height:23px;
	padding-top:5px;
	text-align:center;
	width:23px;
}
سپس اون ایکون + حذف شد اما میترسم چیز اضافه تری پاک کرده باشم لطفا چک کنید
admin

    مدیر و موسس انجمن

  • مدیر کل
  • 999 محبوبیت
  • 5297 ارسال

ارسالی 12 July 2013 - 04:34 PM

اگر آیکون در فایل css استایل داده شده باشه که میتونید نام اون رو در پنجره ی سمت راست فایرباگ پیدا کنید
اگر داخل فایل تی پی ال باشه که احتمالا یا در header.tpl هست یا footer.tpl و یا tpl صفحه ای که در ان قرار دارید. این آیکون در کجای سایت شماست؟
hidden

    عضو قدیمی

  • عضو انجمن
  • ستارهستارهستارهستارهستاره
  • 16 محبوبیت
  • 1059 ارسال

ارسالی 12 July 2013 - 04:47 PM

درود بر شما
لطفا ارسال قبلی رو بخونید
در لینک زیر
http://www.iroption....option-tondar90
من میخوام دقیقا اون علامت + که روی طرح نگاری تصاویر اومده اون رو حذف کنم.
admin

    مدیر و موسس انجمن

  • مدیر کل
  • 999 محبوبیت
  • 5297 ارسال

ارسالی 12 July 2013 - 05:19 PM

در فایل زیرthemes/thgr00001/css/scenes.css

خط 70 تکه کد زیر رو پاک کنید:

background: transparent url(../img/icon/cible.gif) no-repeat scroll center center;
hidden

    عضو قدیمی

  • عضو انجمن
  • ستارهستارهستارهستارهستاره
  • 16 محبوبیت
  • 1059 ارسال

ارسالی 12 July 2013 - 09:04 PM

سپاس
ایا من اشتباه حذف کرده بودم ؟
الان با حذف اون کدی که شما دادی انجام دادم و اون + حذف شد اما هنوز قسمتی از عکس طرح نگاری لینک دار هست.... چطوری کامل لینکش رو پاک کنم؟شرمنده تو تاپیک اموزشی مطرح شد
admin

    مدیر و موسس انجمن

  • مدیر کل
  • 999 محبوبیت
  • 5297 ارسال

ارسالی 12 July 2013 - 09:51 PM

حذف کاملش نیاز به تغییر تی پی ال داره که الان دقیق نمیتونم بهتون بگم کدوم فایل و کدوم خط. بگردید پیداش میکنید. در image mapping دنبالش بگردید
hidden

    عضو قدیمی

  • عضو انجمن
  • ستارهستارهستارهستارهستاره
  • 16 محبوبیت
  • 1059 ارسال

ارسالی 12 July 2013 - 10:11 PM

عزیز متاسفانه بلد نیستم... میتونید زحمت بکشی یه وقت بزاری پیداش کنی ؟ من تازه کار با فایر باگ رو مبتدی یاد گرفتم لطفا کمکم کنید
hidden

    عضو قدیمی

  • عضو انجمن
  • ستارهستارهستارهستارهستاره
  • 16 محبوبیت
  • 1059 ارسال

ارسالی 14 July 2013 - 02:37 PM

admin عزیز ایا روش خودم غلط بود ؟ فکر کنم با روش خودم به طور کامل حذف میشد و دیگه اثری از لینکش هم نبود.. اینطوری با کدی که شما گفتی ما فقط عکسش رو حذف کردیم...
admin

    مدیر و موسس انجمن

  • مدیر کل
  • 999 محبوبیت
  • 5297 ارسال

ارسالی 14 July 2013 - 02:52 PM

عذر خواهی میکنم به خاطر مشغله کاری فرصت نکردم رسیدگی کنم. اگه با روش خودتون حذف شده همون روش رو انجام بدید

موفق باشید
hidden

    عضو قدیمی

  • عضو انجمن
  • ستارهستارهستارهستارهستاره
  • 16 محبوبیت
  • 1059 ارسال

ارسالی 14 July 2013 - 10:17 PM

ادمین عزیز ایا روش من غلط نبوده که بعدا دچار مشکل در گوشه ای سایت بشم ؟ و چون مبتدی هستم متوجه نباشم ؟
admin

    مدیر و موسس انجمن

  • مدیر کل
  • 999 محبوبیت
  • 5297 ارسال

ارسالی 15 July 2013 - 02:11 PM

2 روز دیگه یاد آوری کنید یه نگاهی بندازم. الان به هیچ وجه فرصت ندارم

موفق باشید
hidden

    عضو قدیمی

  • عضو انجمن
  • ستارهستارهستارهستارهستاره
  • 16 محبوبیت
  • 1059 ارسال

ارسالی 17 July 2013 - 08:58 AM

ادمین عزیز میه زحمتش رو بکشید ؟
admin

    مدیر و موسس انجمن

  • مدیر کل
  • 999 محبوبیت
  • 5297 ارسال

ارسالی 17 July 2013 - 01:08 PM

فایل scenes.tpl رو از پوشه قالبتون ادیت کنید و خط زیر رو از اون حذف کنید:

<span style="margin-top:{math equation='a/2 -10' a=$product.zone_height}px; margin-left:{math equation='a/2 -10' a=$product.zone_width}px;"> </span>


موفق باشید
goldpower

    عضو جدید

  • عضو انجمن
  • 0 محبوبیت
  • 2 ارسال

ارسالی 07 January 2014 - 09:28 AM

برای این کار باید CCC رو غیر فعال کنید تا همه ی css ها در یک فایل جمع نشن ، روی آدرس هر فایلی که ماوس رو ببرید آدرسش رو میگه

سلام
این CCC چی هست ؟ چه طور غیر فعالش کنیم ؟؟؟

0 کاربر در حال خواندن این موضوع است

0 کاربر، 0 مهمان و 0 عضو مخفی