/ اموزش اضافه کردن چند رنگ به استایل (اختصاصی ویکی وی بی)
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
صفحه 5 از 7 نخستنخست ... 34567 آخرینآخرین
نمایش نتایج: از 41 به 50 از 68

مقاله: اموزش اضافه کردن چند رنگ به استایل (اختصاصی ویکی وی بی)

    1. اموزش اضافه کردن چند رنگ به استایل (اختصاصی ویکی وی بی)

      اموزش اضافه کردن چند رنگ به استایل (اختصاصی ویکی وی بی)

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

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

      اما بعد ار این همه مقدمه بریم سراغ اموزش:

      در ایتدا باید یک فایل css جداگانه در پوشه قالب خود بسازید ، به عنوان مثلا یک فایل blue.css بسازید ( با استفاده از نرم افزار notepad++ )



      این فایل را باید با استفاده از فایل additional.css یا هر فایل Css قالب اصلی بسازید ، مثلا کد زیر مربوط به قسمت تصویر تالار ها در قالب forumbits.css میباشد :

      کد PHP:
       .forumhead, .forumhead_display {     background:#c2ad74 url(images/wikivb-Ver1/misc/forumhead.png) repeat-x;     border-radius: 5px 5px 0px 0px;     _background-image: none;     padding: 0;     font:  normal 16px BKoodakBold,Calibri !important;  } 



      که دارای رنگ قهوایی با کد c2ad74 و عکس بک گراند با ادرس images/wikivb-Ver1/misc/forumhead.png و کد های دیگر می باشد .

      در اینجا باید کد های بالا را در فایل blue.css که ساخته اید بزارید ، سپس تغییرات لازم را برای قالب مثلا آبی بدهید ( کد رنگ c2ad74 را آبی کنید بک گراند را ابی کنید و .... )

      خوب یاد گرفته ایید که هرجایی که میخواهید تغییر رنگ پیدا کند باید کد اصلی را از فایل های Css قالبتان داخل فایل blue.css بزارید و کد ها یا عکس ها را تغییر دهید.

      در اخر که فایل blue.css را تکمیل کردید ذخیره کنید و آن را داخل هاستتان آپلود کنید ( در پوشه قالب آپلود کنید)

      حال فایل headinclude_bottom قالب را باز کنید و تمام کد های آن را پاک و کدهای زیر را بزارید :


      کد PHP:
      {vb:cssfile additional.css} {vb:raw template_hook.headinclude_bottom_css}  <link rel="stylesheet" type="text/css" href="http://wikivb.ir/images/wikivb-Ver1/asli.css" />  <link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="http://wikivb.ir/images/wikivb-Ver1/blue.css" />  <script src="http://wikivb.ir/images/wikivb-Ver1/styleswitch.js" type="text/javascript"></script> 
      که حالا کد php:

      کد PHP:
       <link rel="stylesheet" type="text/css" href="http://wikivb.ir/images/wikivb-Ver1/asli.css" /> 


      مربوط به رنگ پیش فرض قالب میباشد ، به جای images/wikivb-Ver1/asli.css ادرس فایل css که ساخته اید را بنویسید ( اگر میخواهید قالب اصلی پیش فرض باشد ادرس را حذف کنید )

      کد PHP:
      <link rel="alternate stylesheet" type="text/css" media="screen"  title="blue-theme" href="http://wikivb.ir/images/wikivb-Ver1/blue.css" /> 
      مربوط به رنگ دیگر قالب شماست ( بجای images/wikivb-Ver1/blue.css ادرس فایل css که ساخته اید را بدهید )

      همینطور میتوانید کدهایی برای رنگ های دیگر اضافه کنید ....
      ( red.css . green.css , brown.css و ... )


      در اینجا کار رو به پایان است .

      و اما قسمت مهم این مقاله اجرا کردن اونه که همگی باهم دنبال میکنیم:

      کد های زیر را به اخر قالب additional.css اضافه کنید :

      کد PHP:
      .change-color floatleftbackgroundurl(http://wikivb.ir/images/wikivb-Ver1/choose.png) no-repeat right; padding-right: 75px; margin-top: -20px; margin-left: 11px; } 
      به نسبت مکان قالب مقدار ها را تغییر دهید .

      کافیست کدهای زیر را در محلی که میخواهید تنظیمات تغییر رنگ قالب نشان داده شود بزارید :

      کد PHP:
        <div class="change-color"> <a href="javascript:chooseStyle('none', 60)" checked="checked"><img width="28" height="26" src="http://wikivb.ir/images/wikivb-Ver1/asli.png" alt="انتخاب رنگ اصلی" title="انتخاب رنگ اصلی"></a> <a href="javascript:chooseStyle('blue-theme', 60)"><img width="28" height="26" src="http://wiki.ir/images/wikivb-Ver1/blue.png" alt="انتخاب رنگ آبی" title="انتخاب رنگ آبی"></a>  </div>

       
      و در اخر:ادرس images/wiki-Ver1/blue.png ایکون مربوط به تغییر رنگ میباشد 
      چنانچه این مطلب مورد پسند شما واقع شده بر روی کلیک کنید .

  1. #41
    saeidx57 آنلاین نیست.
    saeidx57
    کاربر سايت
    194نوشته24مورد پسند

    تاریخ عضویت
    May 2014
    شماره عضویت
    5418
    پسندیده است
    133 پست
    بلاگ
    پست
    میزان امتیاز
    34
    www.iran-foreca.com
    آهان اگه مثال بوده که بدتر...
    الان باید از کجا بدونم که کدوم کد رو باید بردارم ؟ چون چیزی ازش نمیدونم

  2. #42
    Danial آنلاین نیست.
    Danial
    کانديد مديريت
    625نوشته1,060مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    64
    پسندیده است
    692 پست
    بلاگ
    0 پست
    میزان امتیاز
    1070
    www.delgia.ir
    کد هایی که می خواید تغییر رنگ پیدا کنه.مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    کاربر زیر پست Danial را پسندیده است:



  3. #43
    saeidx57 آنلاین نیست.
    saeidx57
    کاربر سايت
    194نوشته24مورد پسند

    تاریخ عضویت
    May 2014
    شماره عضویت
    5418
    پسندیده است
    133 پست
    بلاگ
    پست
    میزان امتیاز
    34
    www.iran-foreca.com
    شرمنده انقدر اذیت میکنم... اینو زیادی لازم دارم .. منم خیلی خنگم چیزی نمیفهمم از اینا..
    مشکل اینه که اون کدی که میخوام تغییر رنگ پیدا کنه رو از کجا پیدا کنم.. چجوری بدون کدوم کد برا کجاس ؟

  4. #44
    CodeSaz آنلاین نیست.
    CodeSaz
    مدير بخش
    3,403نوشته6,851مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    54
    پسندیده است
    3,264 پست
    بلاگ
    0 پست
    میزان امتیاز
    6858
    مسئول 3 ستاره
    wikivb.ir
    عزیز هزار تا هم مثال زده بشه زیاد نمی تونید متوجه بشید
    باید کد نویس باشید عزیز ، یا لا اقل به css آشنایی داشته باشید تا بتونید با المنیت ها خوب بازی کنید ، زمانی که آشنایی ندارید و می خواید اینگونه کار هارو انجام بدید قالب خراب میشه مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    کاربر زیر پست CodeSaz را پسندیده است:


    Coming Soon New Project ■

  5. #45
    Am!rH0ssein آنلاین نیست.
    Am!rH0ssein
    کاربر فعال و مفيد
    576نوشته605مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1583
    پسندیده است
    444 پست
    بلاگ
    پست
    میزان امتیاز
    615
    No Set
    بعد از رفرش صفحه متاسفانه رنگ به حالت اولیه بر می گرده !

  6. #46
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,610مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26487
    wikivb.ir
    نقل قول نوشته اصلی توسط Am!rH0ssein نمایش پست ها
    بعد از رفرش صفحه متاسفانه رنگ به حالت اولیه بر می گرده !
    مطمئنا نادرست انجام دادید آموزش رو که کوکی ها رو سیو نمیکنه چک کنید ببینید برای فرد دیگه ای هم مشکل داره یا خیر اگر مشکل داشت آموزش رو نادرست انجام دادید اگر نداشت کوکی های خودتون پاک میشه
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  7. #47
    ANONYMOS آنلاین نیست.
    ANONYMOS
    کاربر سايت
    284نوشته116مورد پسند

    تاریخ عضویت
    Feb 2014
    شماره عضویت
    4365
    پسندیده است
    190 پست
    بلاگ
    پست
    میزان امتیاز
    126
    No Set
    آقا چیزی که من فهمیدم اینه

    مثلا من میخوام در قالبم رنگ رو تغییر بدم در سی اس اس پیدا میکنم که کد رنگش چیه

    بعد میام در نوت پد اینطوری مینویسم
    کد:
    .forumhead { background: none repeat scroll 0% 0% #BB04E9; .postbit .posthead, .postbitlegacy .posthead, .eventbit .eventhead { background: none repeat scroll 0% 0% #BB04E9;

    بعدش خاصیت بک گراند رو در قالب حذف میکنم (در قالب اصلی )

    بعد خلاصه همه ی قسمت هایی که میخوام رو اینطوری زیر هم اضافه میکنم آخرش به شکل css ذخیره میکنم

    حالا سوال

    این فایل css رو دقیقا کجا اضافه میکنم

    بعد یه چیزی اگر درست متوجه شده باشم باید یک فایل css اصلی هم بسازیم درسته ؟ ینی رنگ اصلی اون باشه

    بعد تو قالب آپلود کنیم اینم درسته ؟

    خب حالا سوالات آخر

    در کد زیر

    کد:
     .change-color { float: left; background: url(http://wikivb.ir/images/wikivb-Ver1/choose.png) no-repeat right; padding-right: 75px; margin-top: -20px; margin-left: 11px; }  
    که آدرس عکس هستش اون آدرس چه عکسیه ؟ لینکش خرابه

    سوال دوم :

    اینکه نوشتید کد های زیر رو در قسمتی که میخواید نمایش داده بشه بزارید
    کد:
    <div class="change-color"> <a href="javascript:chooseStyle('none', 60)" checked="checked"><img width="28" height="26" src="http://wikivb.ir/images/wikivb-Ver1/asli.png" alt="انتخاب رنگ اصلی" title="انتخاب رنگ اصلی"></a> <a href="javascript:chooseStyle('blue-theme', 60)"><img width="28" height="26" src="http://wiki.ir/images/wikivb-Ver1/blue.png" alt="انتخاب رنگ آبی" title="انتخاب رنگ آبی"></a>  </div>
    اینجا باید کودوم کد ها ادیت بشه و چه آدرس هایی عوض بشه و اینکه من میخوام مثل این قالب

    http://www.wikivb.ir/showthread.php?...5&goto=newpost

    بزارمش در زیر هدر در کادر موجود

    اینو نمیدونم باید چیکار کنم

    اگر ممکنه اشتباهاتم رو تصحیح کنید تا کار رو آغاز کنم

    ممنونم از شما

  8. #48
    Am!rH0ssein آنلاین نیست.
    Am!rH0ssein
    کاربر فعال و مفيد
    576نوشته605مورد پسند

    تاریخ عضویت
    Apr 2013
    شماره عضویت
    1583
    پسندیده است
    444 پست
    بلاگ
    پست
    میزان امتیاز
    615
    No Set
    نقل قول نوشته اصلی توسط ANONYMOS نمایش پست ها
    آقا چیزی که من فهمیدم اینه

    مثلا من میخوام در قالبم رنگ رو تغییر بدم در سی اس اس پیدا میکنم که کد رنگش چیه

    بعد میام در نوت پد اینطوری مینویسم
    کد:
    .forumhead { background: none repeat scroll 0% 0% #BB04E9; .postbit .posthead, .postbitlegacy .posthead, .eventbit .eventhead { background: none repeat scroll 0% 0% #BB04E9;

    بعدش خاصیت بک گراند رو در قالب حذف میکنم (در قالب اصلی )

    بعد خلاصه همه ی قسمت هایی که میخوام رو اینطوری زیر هم اضافه میکنم آخرش به شکل css ذخیره میکنم

    حالا سوال

    این فایل css رو دقیقا کجا اضافه میکنم

    بعد یه چیزی اگر درست متوجه شده باشم باید یک فایل css اصلی هم بسازیم درسته ؟ ینی رنگ اصلی اون باشه

    بعد تو قالب آپلود کنیم اینم درسته ؟

    خب حالا سوالات آخر

    در کد زیر

    کد:
     .change-color { float: left; background: url(http://wikivb.ir/images/wikivb-Ver1/choose.png) no-repeat right; padding-right: 75px; margin-top: -20px; margin-left: 11px; }  
    که آدرس عکس هستش اون آدرس چه عکسیه ؟ لینکش خرابه

    سوال دوم :

    اینکه نوشتید کد های زیر رو در قسمتی که میخواید نمایش داده بشه بزارید
    کد:
    <div class="change-color"> <a href="javascript:chooseStyle('none', 60)" checked="checked"><img width="28" height="26" src="http://wikivb.ir/images/wikivb-Ver1/asli.png" alt="انتخاب رنگ اصلی" title="انتخاب رنگ اصلی"></a> <a href="javascript:chooseStyle('blue-theme', 60)"><img width="28" height="26" src="http://wiki.ir/images/wikivb-Ver1/blue.png" alt="انتخاب رنگ آبی" title="انتخاب رنگ آبی"></a>  </div>
    اینجا باید کودوم کد ها ادیت بشه و چه آدرس هایی عوض بشه و اینکه من میخوام مثل این قالب

    http://www.wikivb.ir/showthread.php?...5&goto=newpost

    بزارمش در زیر هدر در کادر موجود

    اینو نمیدونم باید چیکار کنم

    اگر ممکنه اشتباهاتم رو تصحیح کنید تا کار رو آغاز کنم

    ممنونم از شما
    داداش وقتی اصولی بلد نباشی کدنویسیو درک نمی کنی
    ببین من برات توضیح می دم ببین می فهمی یا نه
    کلاس ها و آی دی هایی که باید تغییر رنگ پیدا کنه را جدا می کنی
    می ریزی توی یه فایل و کد رنگ هارو تغییر می دی (اسم فایل هم مثلا بزار green.css)
    یک فایل هم برای رنگ اصلی باید بسازی و کد رنگ های اصلی (مثلا brown.css)

    بعد باید به شیوه ای که بالا توضیح دادند در آخر فایل headinclude_bottom فراخوانیشون کنی
    رنگ اصلی بدون attribute اضافی و رنگ ها فرقی یه سری attribute اضافی دارند که بالا توضیح دادند
    در آخر بعد از فایل های سی اس اس
    فایل styleswitch.js را فراخوانی می کنی
    توی قالب باید به ازای هر رنگ یه دکمه درست کنی که اون رنگ را فراخوانی کنه
    اگه از دکمه استفاده کردی باید به شکل onclick="javascript:chooseStyle('blue-theme', 60)" بنویسی و اگر از متن یا آیکون باید به شکل href="javascript:chooseStyle('blue-theme', 60)" بنویسی

  9. #49
    ANONYMOS آنلاین نیست.
    ANONYMOS
    کاربر سايت
    284نوشته116مورد پسند

    تاریخ عضویت
    Feb 2014
    شماره عضویت
    4365
    پسندیده است
    190 پست
    بلاگ
    پست
    میزان امتیاز
    126
    No Set
    نقل قول نوشته اصلی توسط Am!rH0ssein نمایش پست ها
    رنگ اصلی بدون attribute اضافی و رنگ ها فرقی یه سری attribute اضافی دارند که بالا توضیح دادند
    در آخر بعد از فایل های سی اس اس
    فایل styleswitch.js را فراخوانی می کنی
    توی قالب باید به ازای هر رنگ یه دکمه درست کنی که اون رنگ را فراخوانی کنه
    اگه از دکمه استفاده کردی باید به شکل onclick="javascript:chooseStyle('blue-theme', 60)" بنویسی و اگر از متن یا آیکون باید به شکل href="javascript:chooseStyle('blue-theme', 60)" بنویسی
    در قسمت های قبلی مشکلی نیست اوکیه افتاد داداش مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    اما این قسمت که نقل قول کردم

    این چیه دقیقا attribute اینو نفهمیدم

    باقی رو هم اصلا متوجه نشدم اگر میشه کمی ساده تر توضیح بدی

    مرسی

  10. #50
    J⑩nAt⑩N آنلاین نیست.
    J⑩nAt⑩N
    مدير بازنشسته
    3,937نوشته6,621مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    53
    پسندیده است
    4,639 پست
    بلاگ
    0 پست
    میزان امتیاز
    6632
    sooon
    از این ساده تر والله نتونستم
    این ساده ترین راهه
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

صفحه 5 از 7 نخستنخست ... 34567 آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی