تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 2 از 3 نخستنخست 123 آخرینآخرین
نمایش نتایج: از 11 به 20 از 22

مقاله: آموزش قراردادن Tooltip بسیار زیبا در ویبولتین ( همانند وی بی ایران )

    1. آموزش قراردادن Tooltip بسیار زیبا در ویبولتین ( همانند وی بی ایران ) »

      آموزش قراردادن Tooltip بسیار زیبا در ویبولتین ( همانند وی بی ایران )

      نگارش: , by (مدیر بازنشسته)
      2013/03/26 03:37 AM
      امتیاز: 

      درود .

      همانطور که در استایل فعلی وی بی ایران مشاهده میکنید Tooltip در بعضی جاها قرار داده شده ،

      همانند عکس زیر :




      1.
      به قالب headinclude بروید و آخرش اضافه کنید :

      کد:
      <script type='text/javascript' src='http://cdn.vbiran.ir/images/vbiranv6/jquery.min.js'></script><script type="text/javascript" src="http://cdn.vbiran.ir/images/vbiranv6/yousafe.js"></script>

      2 . به قالب Additional.css بروید و تهش اضافه کنید :

      کد:
      #tooltip {
          font-family: Tahoma;
          font-size: 11px;
          text-align: center;
          text-shadow: 0 1px rgba( 0, 0, 0, .5 );
          line-height: 1.5;
          color: #fff ;
          background: #333 ;
          background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .6 ) ), to( rgba( 0, 0, 0, .8 ) ) );
          background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
          background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
          background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
          background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
          background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
          -moz-box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
          box-shadow: 0 3px 5px rgba( 0, 0, 0, .3 );
          position: absolute;
          z-index: 100;
          padding: 15px;
      }
      #tooltip :after {
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top-color: #333 ;
          border-top: 10px solid rgba( 0, 0, 0, .7 );
          content: '';
          position: absolute;
          left: 50%;
          bottom: -10px;
          margin-left: -10px;
      }
      #tooltip .top:after {
          border-top-color: transparent;
          border-bottom-color: #333 ;
          border-bottom: 10px solid rgba( 0, 0, 0, .6 );
          top: -20px;
          bottom: auto;
      }
      #tooltip .left:after {
          left: 10px;
          margin: 0;
      }
      #tooltip .right:after {
          right: 10px;
          left: auto;
          margin: 0;
      }



      3. حالا به Div یا img یا ul یا li که خواستید میتونید ، به صورت

      کد:
      rel="tooltip" title="متن مورد نظر شما"
      اضافه کنید .

      مثلا <div class="faq" rel="tooltip" title="در این قسمت مشکلاتی که بار ها و بار ها پرسیده شده و می شوند گرداوری شده است !">


      ممنون .
  1. Top | #11
    کاربر سایت

    ورژن ویبولتین
    5.0.0
    نوشته ها
    83
    میزان امتیاز
    14

    پیش فرض

    بازم مشکل داره




  2. گیفت کارت آیتونز

  3. Top | #12

    پیش فرض

    نقل قول نوشته اصلی توسط rslrezaie نمایش پست ها
    متأسفانه نتونستم همچنان. در قالب من هيچي نشون نمي ده
    شما جای کدی که تو additional.css گذاشتی اینو بذار :

    کد:
    #tooltip{font-family:Tahoma;font-size:11px;text-align:center;text-shadow:0 1px rgba( 0,0,0,.5 );line-height:1.5;color:#fff;background:#333;background:-webkit-gradient( linear,left top,left bottom,from( rgba( 0,0,0,.6 ) ),to( rgba( 0,0,0,.8 ) ) );background:-webkit-linear-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );background:-moz-linear-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );background:-ms-radial-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );background:-o-linear-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );background:linear-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 3px 5px rgba( 0,0,0,.3 );-moz-box-shadow:0 3px 5px rgba( 0,0,0,.3 );box-shadow:0 3px 5px rgba( 0,0,0,.3 );position:absolute;z-index:100;padding:15px}#tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top-color:#333;border-top:10px solid rgba( 0,0,0,.7 );content:'';position:absolute;left:50%;bottom:-10px;margin-left:-10px}#tooltip.top:after{border-top-color:transparent;border-bottom-color:#333;border-bottom:10px solid rgba( 0,0,0,.6 );top:-20px;bottom:auto}#tooltip.left:after{left:10px;margin:0}#tooltip.right:after{right:10px;left:auto;margin:0}

    2 تشکر توسط:


  4. Top | #13
    کاربر سایت

    ورژن ویبولتین
    4.2.1
    نوشته ها
    565
    میزان امتیاز
    65

    پیش فرض

    عالی بود مرسی

  5. Top | #14
    کاربر سایت

    ورژن ویبولتین
    5.0.0
    نوشته ها
    83
    میزان امتیاز
    14

    پیش فرض

    نقل قول نوشته اصلی توسط m.yMJJ نمایش پست ها
    شما جای کدی که تو additional.css گذاشتی اینو بذار :

    کد:
    #tooltip{font-family:Tahoma;font-size:11px;text-align:center;text-shadow:0 1px rgba( 0,0,0,.5 );line-height:1.5;color:#fff;background:#333;background:-webkit-gradient( linear,left top,left bottom,from( rgba( 0,0,0,.6 ) ),to( rgba( 0,0,0,.8 ) ) );background:-webkit-linear-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );background:-moz-linear-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );background:-ms-radial-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );background:-o-linear-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );background:linear-gradient( top,rgba( 0,0,0,.6 ),rgba( 0,0,0,.8 ) );-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 3px 5px rgba( 0,0,0,.3 );-moz-box-shadow:0 3px 5px rgba( 0,0,0,.3 );box-shadow:0 3px 5px rgba( 0,0,0,.3 );position:absolute;z-index:100;padding:15px}#tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top-color:#333;border-top:10px solid rgba( 0,0,0,.7 );content:'';position:absolute;left:50%;bottom:-10px;margin-left:-10px}#tooltip.top:after{border-top-color:transparent;border-bottom-color:#333;border-bottom:10px solid rgba( 0,0,0,.6 );top:-20px;bottom:auto}#tooltip.left:after{left:10px;margin:0}#tooltip.right:after{right:10px;left:auto;margin:0}
    با استفاده از این درست شد

  6. Top | #15
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    161
    میزان امتیاز
    24

    پیش فرض

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

  7. Top | #16

    پیش فرض

    باید قسمت زیر رو ویرایش کنید :

    کد:
        background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        background: -moz-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        background: -ms-radial-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        background: -o-linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
        background: linear-gradient( top, rgba( 0, 0, 0, .6 ), rgba( 0, 0, 0, .8 ) );
    رنگ دهی به صورت rgb هست ، اون قضیه -o- , -moz- , -webkit- هم که قبل از شروع هر liner-gradient میبینید ، برای هماهنگ شدن با مرورگر های مختلف هست ، پس حذفشون نکنید

    مثلا moz برای Mozila Firefox هست . webkit برای کروم و سافاری هست . o برای Opera هست و ...... اینم یه سایت که کد رنگ های rgb میده :

    Online RGB Color Wheel

    2 تشکر توسط:


  8. Top | #17
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    161
    میزان امتیاز
    24

    پیش فرض

    نقل قول نوشته اصلی توسط m.yMJJ نمایش پست ها
    باید قسمت زیر رو ویرایش کنید :
    ..........
    با تشکر از پاسختون اگر یک مثال بزنید در مورد نحوه کد رنگ به صورت rgb ممنون میشم مثلا کادر رو به رنگ آبی تعریف کنید .

    ویرایش توسط OffLineFA : 2013/04/03 در ساعت 07:36 AM

  9. Top | #18
    مدیر بازنشته

    ورژن ویبولتین
    My Own Version
    نوشته ها
    2,440
    میزان امتیاز
    361

    پیش فرض

    برای من که با وجود پُست 12 بازم کار نکرد..

  10. Top | #19
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    26
    میزان امتیاز
    0

    پیش فرض

    نقل قول نوشته اصلی توسط OffLineFA نمایش پست ها
    با تشکر از پاسختون اگر یک مثال بزنید در مورد نحوه کد رنگ به صورت rgb ممنون میشم مثلا کادر رو به رنگ آبی تعریف کنید .

    آبی به این صورت میشه :

    کد:
     background: -webkit-linear-gradient( top, rgba( 0, 34, 255, .6 ), rgba( 0, 34, 255, .8 ) );
        background: -moz-linear-gradient( top, rgba( 0, 34, 255, .6 ), rgba( 0, 34, 255, .8 ) );    background: -ms-radial-gradient( top, rgba( 0, 34, 255, .6 ), rgba( 0, 34, 255, .8 ) );    background: -o-linear-gradient( top, rgba( 0, 34, 255, .6 ), rgba( 0, 34, 255, .8 ) );     background: linear-gradient( top, rgba( 0, 34, 255, .6 ), rgba( 0, 34, 255, .8 ) );

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


  11. Top | #20
    کاربر سایت

    ورژن ویبولتین
    4.2.0
    نوشته ها
    161
    میزان امتیاز
    24

    پیش فرض

    نقل قول نوشته اصلی توسط iGraph نمایش پست ها
    آبی به این صورت میشه :

    کد:
     background: -webkit-linear-gradient( top, rgba( 0, 34, 255, .6 ), rgba( 0, 34, 255, .8 ) );
        background: -moz-linear-gradient( top, rgba( 0, 34, 255, .6 ), rgba( 0, 34, 255, .8 ) );    background: -ms-radial-gradient( top, rgba( 0, 34, 255, .6 ), rgba( 0, 34, 255, .8 ) );    background: -o-linear-gradient( top, rgba( 0, 34, 255, .6 ), rgba( 0, 34, 255, .8 ) );     background: linear-gradient( top, rgba( 0, 34, 255, .6 ), rgba( 0, 34, 255, .8 ) );
    این عدد آخر رو چطور تعریف میکنید چون در سایت نام برده هم برای رنگ آبی این کد رو میده
    کد:
    0, 34, 255

صفحه 2 از 3 نخستنخست 123 آخرینآخرین

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

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

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

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. آموزش تغییر پست بیت ویبولتین به IP.Board ( بسیار زیبا )
    توسط VBIran در انجمن آموزش های وی بولتین
    پاسخ: 7
    آخرين نوشته: 2013/04/11, 12:31 PM
  2. پاسخ: 10
    آخرين نوشته: 2012/11/09, 08:10 PM
  3. پاسخ: 24
    آخرين نوشته: 2012/07/05, 09:36 PM
  4. پاسخ: 19
    آخرين نوشته: 2012/02/17, 04:44 AM
  5. پاسخ: 8
    آخرين نوشته: 2010/11/23, 01:07 PM

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

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

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