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

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 1 از 3 123 آخرینآخرین
نمایش نتایج: از 1 به 10 از 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 | #2
    کاربر اخراجی

    ورژن ویبولتین
    Suite 4.2
    نوشته ها
    1,141
    میزان امتیاز
    0

    پیش فرض

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

  2. Top | #3
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    67
    میزان امتیاز
    10

    Lightbulb

    درود.
    لطفا آموزش این قسمت رو هم قرار دهید...


    با تشکر

  3. Top | #4
    مدیر بازنشته

    ورژن ویبولتین
    4.1.10
    نوشته ها
    905
    میزان امتیاز
    140

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

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

    پیش فرض

    نقل قول نوشته اصلی توسط Special_One نمایش پست ها


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

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

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

    اين قسمت آخر را مي شه كمي توضيح بدهيد؟ اين كد دقيقا كجا اضافه مي شه؟

  5. Top | #6

    پیش فرض

    نقل قول نوشته اصلی توسط rslrezaie نمایش پست ها
    اين قسمت آخر را مي شه كمي توضيح بدهيد؟ اين كد دقيقا كجا اضافه مي شه؟
    هر جا که بخواهید نمایش بده ! مثلا میخواهید با رفتن ماوس روی قسمت مورد نظر بنویسه ، سلام
    کد:
    <div class="faq" rel="tooltip" title="سلام"> </div>

    کاربر مقابل از [email protected] بابت این پست مفید تشکر کرده است:


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

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

    پیش فرض

    title="عليك سلام"

    ممنون از پاسختون ... چرا اين رو در قالب triangle نشون نمي ده... انگار نه انگار ... نكنه اين قالب اين قابليت ها رو نداره؟!

  7. Top | #8

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

    ورژن ویبولتین
    4.1.10
    نوشته ها
    905
    میزان امتیاز
    140

    پیش فرض

    الان چک کنید .

    2 تشکر توسط:


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

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

    پیش فرض

    نقل قول نوشته اصلی توسط Special_One نمایش پست ها
    الان چک کنید .
    متأسفانه نتونستم همچنان. در قالب من هيچي نشون نمي ده

صفحه 1 از 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)

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

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