/ اموزش اضافه کردن چند رنگ به استایل (اختصاصی ویکی وی بی)
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
صفحه 6 از 7 نخستنخست ... 4567 آخرینآخرین
نمایش نتایج: از 51 به 60 از 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. #51
    ANONYMOS آنلاین نیست.
    ANONYMOS
    کاربر سايت
    284نوشته116مورد پسند

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

    ببنید من انجمنم رنگش سبز هستش میخوام به قرمز و آبی و قهوه ای و چند رنگ دیگه هم بشه تغییر رنگ داد

    باید فایل های

    brown.css
    blue.css
    red.css
    و هر رنگی که میخوام قرار بدم رو بسازم درسته ؟

    این از این

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

    این کد رو میزارم

    کد:
    .header-box { height: 158px; background: none repeat scroll 0% 0% #1CC918; }

    این کد کد مربوط به هدرم هستش که رنگ اصلی رو داره

    مثلا میخوام آبی کنم کد رنگ رو در کد بالا تغییر میدم و در فایل Blue.css ذخیره میکنم

    و باقی قسمت ها هم همینطور اینم درست ؟

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

    خب اینجا یه سوال

    اینی که گفتید برای اضافه کردن هر رنگ باید یه کد اینجوری با آدرس فایل css بزارم

    کد:
    <link rel="alternate stylesheet" type="text/css" media="screen"  title="blue-theme" href="http://wikivb.ir/images/wikivb-Ver1/blue.css" />  
    
    
    اینو باید کجای headinclude_bottom بزارم؟

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

    اون فایل های css که باید بسازیم اینطوری میشه دیگه مثلا من قسمتیش رو اینجا میسازم ببینید درسته یا نه

    کد رنگ های اصلی :
    کد:
    .header-box { height: 158px; background: none repeat scroll 0% 0% #1CC918; } .forumhead { background: none repeat scroll 0% 0% #1CC918; padding: 8px 0px 13px; font: 15px/1 YekanWeb; color: #000; clear: both; margin-top: 8px; float: right; width: 100%; border-radius: 5px; margin-bottom: 10px; height: 46px; box-sizing: border-box; } .featured-threads span { color: #FFF; font: 14px/1.5 YekanWeb; background: none repeat scroll 0% 0% #009C18; display: block; padding: 8px 10px; border: 1px solid #CBCBCB; height: 40px; box-sizing: border-box;
    کد ها بعد از تغییر رنگ به مثلا سیاه


    کد:
    .header-box { height: 158px; background: none repeat scroll 0% 0% #000; } .forumhead { background: none repeat scroll 0% 0% #000; padding: 8px 0px 13px; font: 15px/1 YekanWeb; color: #000; clear: both; margin-top: 8px; float: right; width: 100%; border-radius: 5px; margin-bottom: 10px; height: 46px; box-sizing: border-box; } .featured-threads span { color: #FFF; font: 14px/1.5 YekanWeb; background: none repeat scroll 0% 0% #000; display: block; padding: 8px 10px; border: 1px solid #CBCBCB; height: 40px; box-sizing: border-box;

    درسته ؟

    لطفا راهنمایی کنید به شدت به این قسمت نیاز هستش مرسی

    - - - Updated - - -

    @J⑩nAt⑩N

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

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    64
    پسندیده است
    692 پست
    بلاگ
    0 پست
    میزان امتیاز
    1070
    www.delgia.ir
    و هر رنگی که میخوام قرار بدم رو بسازم درسته ؟
    بله کاملا درسته!
    مثلا میخوام آبی کنم کد رنگ رو در کد بالا تغییر میدم و در فایل Blue.css ذخیره میکنم

    و باقی قسمت ها هم همینطور اینم درست ؟
    کاملا درسته ولی دقت کنید که در additional.css خود ویبولتین نباید رنگی به بکگراند داده باشید و باید در هر فایل css بکگراند جداگانه بدید.
    این
    و باید کجای headinclude_bottom بزارم؟
    آخرش دوست عزیزممرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    بقیش هم درست هست فقط نکته ای که در مورد additional.css رو گفتم رعایت کنید.
    یعنی مثلا تو additional.css بصورت زیر قرار میدید:
    کد:
    .ads-box {
    width: 50%;
    height: 100px;
    }
    و برای هر رنگ در فایل css مربوطه بصورت زیر قرار میدید:
    کد:
    .ads-box {
    background: your color;
    }

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



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

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

    http://wikivb.ir/images/wikivb-Ver1/styleswitch.js

    لطفا لینک سالم میدید یا خود استایل سویچ رو بدید آپ کنم

    ممنونم...

    - - - Updated - - -

    این لینک هم خرابه....

    http://wikivb.ir/images/wikivb-Ver1/choose.png

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

    تاریخ عضویت
    Feb 2014
    شماره عضویت
    4365
    پسندیده است
    190 پست
    بلاگ
    پست
    میزان امتیاز
    126
    No Set
    خب ممنونم از همه ی دوستان من تقریبا یادگرفتم و تونستم این کار رو انجام بدم کدی که دادید برای نشان دادن تغییر رنگ رو گذاشتم در ناوبار اما به شکل درست به نمایش در نمیاد و اینطوریه http://upload.wikivb.ir/images/lwgrqk0k9djjemlx58q.png ممنونم

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

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

    @J⑩nAt⑩N

    - - - Updated - - -

    لطفا یکی از دوستان کمک کنند

    @J⑩nAt⑩N

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

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

  7. #57
    farzadi آنلاین نیست.
    farzadi
    کاربر سايت
    331نوشته105مورد پسند

    تاریخ عضویت
    Feb 2014
    شماره عضویت
    4303
    پسندیده است
    40 پست
    بلاگ
    پست
    میزان امتیاز
    115
    www.etplus.ir
    درود دوستان من میخوام رو یه جای دیگه غیر ویبلوتین عملیش کنم همه چیزشم میتونم درست کنم کد نویسیش مشکلی نداره فقط فایلی چیزی نمیخواد تو هاستم اپلود کنم؟مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    ایتی پلاس بزرگ ترین مرجع پشتیبانی ایتی چت

    www.etplus.ir

    کارت شارژ رایگان

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

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    53
    پسندیده است
    4,639 پست
    بلاگ
    0 پست
    میزان امتیاز
    6632
    sooon
    نقل قول نوشته اصلی توسط farzadi نمایش پست ها
    درود دوستان من میخوام رو یه جای دیگه غیر ویبلوتین عملیش کنم همه چیزشم میتونم درست کنم کد نویسیش مشکلی نداره فقط فایلی چیزی نمیخواد تو هاستم اپلود کنم؟مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    خیر چیزی نداره فقط فایل که میسازید مثلا red.css بریزید تو پوشه قالب مربوطه
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  9. #59
    farzadi آنلاین نیست.
    farzadi
    کاربر سايت
    331نوشته105مورد پسند

    تاریخ عضویت
    Feb 2014
    شماره عضویت
    4303
    پسندیده است
    40 پست
    بلاگ
    پست
    میزان امتیاز
    115
    www.etplus.ir
    حله فقط یه لینک عکس با js توش بود داستان اونا چی میشه؟؟؟ خراب بودن مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    ایتی پلاس بزرگ ترین مرجع پشتیبانی ایتی چت

    www.etplus.ir

    کارت شارژ رایگان

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

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    53
    پسندیده است
    4,639 پست
    بلاگ
    0 پست
    میزان امتیاز
    6632
    sooon
    نقل قول نوشته اصلی توسط farzadi نمایش پست ها
    حله فقط یه لینک عکس با js توش بود داستان اونا چی میشه؟؟؟ خراب بودن مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    در بعضی جا از اموزش لینک عکس ها و .. برای تست می باشد
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

صفحه 6 از 7 نخستنخست ... 4567 آخرینآخرین

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

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

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

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

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

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