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

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 7 از 7

مقاله: آموزش اضافه کردن تولتیپ فلت رنگی

    1. آموزش اضافه کردن تولتیپ فلت رنگی »

      آموزش اضافه کردن تولتیپ فلت رنگی

      نگارش: , by (کاربر سایت)
      2015/02/03 01:07 AM
      امتیاز: 

      سلام


      قبل از اضافه کردن این تولتیپ اگر از قبل تولتیپ داره قالبتون حذفش کنید که قاطی نشه.


      شات :



      این کدها رو اضافه کنید انتهای header (میتونید توی هاست هم قرار بدید این فایل ها رو) :

      کد:
      <script type="text/javascript" src="http://www.up.jazireeh.com/images/9ejnjex30zzatctike4.js" ></script>
      <script type="text/javascript" src="http://www.up.jazireeh.com/images/enphykxyh1jz5eaiplo.js"></script>
      این کدها رو اضافه کنید به انتهای additional :

      کد:
      #tooltip{font-size:13px;text-align:center;background:#8aca1a;line-height:1px;color:#f4f4f4;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;position:absolute;z-index:100;padding:10px 7px 12px}#tooltip:after{width:0;height:0;border-left:2px solid transparent;border-right:14px solid transparent;border-top:8px solid #8aca1a;content:'';position:absolute;left:85%;bottom:-5px;margin-left:-10px}#tooltip.top:after{border-top-color:transparent;border-bottom-color:#333;border-bottom:10px solid rgba( 0,0,0,.8 );top:-20px;bottom:auto}#tooltip.left:after{left:10px;margin:0}#tooltip.right:after{right:10px;left:auto;margin:0}#tooltip:before{content:'';background:url('http://up.vbiran.ir/uploads/44281142291333743712_un3onyn243xk1c6834bb.png');width:16px;height:16px;float:right;margin:-7px 0px -7px [email protected]*/
      قسمت هایی که قرمز کردم رنگ تولتیپ هست، این کد تولتیپ سبز هست، برای تغییر رنگ دو کد رنگی که قرمز کردم رو تغییر بدید.


      روش استفاده هم :

      کد:
      <div rel="tooltip" title="متن داخل تولتیپ">vbiran</div>
  1. Top | #2
    کاربر سایت

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

    پیش فرض

    ممنون از کدها

    2 تشکر توسط:


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

    ورژن ویبولتین
    4.2.2
    نوشته ها
    131
    میزان امتیاز
    16

    پیش فرض

    سلام
    میشه به جای اون عکسه از فونت آیکون استفاده کرد؟
    http://up.vbiran.ir/uploads/44281142...xk1c6834bb.png

  3. Top | #4
    کاربر مفید و فعال

    ورژن ویبولتین
    4
    نوشته ها
    482
    میزان امتیاز
    63

    پیش فرض

    نقل قول نوشته اصلی توسط j.ali.li نمایش پست ها
    سلام
    میشه به جای اون عکسه از فونت آیکون استفاده کرد؟
    http://up.vbiran.ir/uploads/44281142...xk1c6834bb.png
    اره چرا نشه ...

    فقط باید اون بکگراند رو ( عکسشو بردارید ) و توی html فونت ایکون رو اضافه کنید

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

    ورژن ویبولتین
    4.2.2
    نوشته ها
    131
    میزان امتیاز
    16

    پیش فرض

    نقل قول نوشته اصلی توسط Soalfarsi نمایش پست ها
    اره چرا نشه ...

    فقط باید اون بکگراند رو ( عکسشو بردارید ) و توی html فونت ایکون رو اضافه کنید
    فونت ایکون میذارم چیزی نشون نمیده
    جاش خالی میاد
    کد:
    #tooltip:before{content:'';background:url('http://up.vbiran.ir/uploads/44281142291333743712_un3onyn243xk1c6834bb.png');
    این یه تیکه رو با فونت آیکون مینویسید
    شاید من اشتباه مینویسم کدشو

  5. Top | #6
    کاربر مفید و فعال

    ورژن ویبولتین
    4
    نوشته ها
    482
    میزان امتیاز
    63

    پیش فرض

    نقل قول نوشته اصلی توسط j.ali.li نمایش پست ها
    فونت ایکون میذارم چیزی نشون نمیده
    جاش خالی میاد
    کد:
    #tooltip:before{content:'';background:url('http://up.vbiran.ir/uploads/44281142291333743712_un3onyn243xk1c6834bb.png');
    این یه تیکه رو با فونت آیکون مینویسید
    شاید من اشتباه مینویسم کدشو
    باید اول به قالبتون اضافش کنید فونت ایکون رو . بعد مثلا مثل کد زیر اضافه کنید بهش

    کد:
    <i class="fa fa-user"></i>

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

    ورژن ویبولتین
    4.2.2
    نوشته ها
    131
    میزان امتیاز
    16

    پیش فرض

    فونت آیکون رو بیخیال
    اون شکلک رو که حذف میکنم جاش خالی میشه
    یعنی یه فضای کوچیک جای اون عکسه میمونه
    چطور اون فضا رو وردارم؟
    ویرایش توسط j.ali.li : 2015/10/22 در ساعت 10:14 AM

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

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

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

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

  1. آموزش ساخت تولتیپ {Tooltip} هوشمند [سریع - جالب]
    توسط OM!DTAK در انجمن آموزش های وی بولتین
    پاسخ: 29
    آخرين نوشته: 2013/07/11, 11:01 AM
  2. تولتیپ چیست؟
    توسط Mr.vb در انجمن پرسش و پاسخ
    پاسخ: 1
    آخرين نوشته: 2013/04/25, 11:43 PM
  3. درخواست اموزش تولتیپ {Tooltip}
    توسط mamadmatrex در انجمن پرسش و پاسخ
    پاسخ: 1
    آخرين نوشته: 2012/12/13, 03:19 PM
  4. [آموزش] قرار دادن عنوان در تولتیپ با CSS3
    توسط Mohsen Neo در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 1
    آخرين نوشته: 2012/08/19, 02:13 PM

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

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

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

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