رفتن به مطلب
shape1
انتشار نسخه IPS Community Suite 4.5.4
19 دی 1399
انتشار نسخه IPS Community Suite 4.5.4.2
آخرین نسخه سایت ساز می باشد که در آن تغییرات کلیدی اعمال شده و هم اکنون می توانید آنرا دریافت و نصب نمایید
اطلاعات بیشتر
فارسی ساز IPS Community Suite
3 شهریور 1398
فارسی ساز IPS Community Suite
بسته فارسی ساز ips شامل کلید های ترجمه شده برنامه های ارائه شده میباشد.
اطلاعات بیشتر
قالب Arcturus
4 آذر 1399
قالب Arcturus
نام قالب آرکتوروس Arcturus الهام گرفته از بازی سرزمین ستاره های بسیار بزرگ گرفته شده است
اطلاعات بیشتر
Instagram Badge Twitter Badge

پست های پیشنهاد شده

  • مدیریت سایت

سلام در این آموزش می خواهیم بپردازیم به استفاده از افکت های particles در قالب های ips

Screenshot_2020-02-15 ای پی بورد ایران.png

جهت تنظیم و ایجاد افکت مورد علاقه خود می توانید به این سایت مراجعه نمایید:

https://vincentgarreau.com/particles.js/

در سمت چپ صفحه می توانید افکت مورد علاقه خودرا ساخته و از تنظیمات آن فایل خروجی گرفته و در قالب خود بکار ببرید.

در وسط صفحه هم فایل های مربوط به particles را می توانید دریافت نمایید، بعد از دانلود و ورود به این پوشه ما به فایل particles.min.js احتیاج داریم تا به قالب خود اضافه کنیم

برای اضافه کردن این فایل به منابع قالب مورد نظرمان به بخش قالب ها رفته و از آنجا گزینه مدیریت منابع را انتخاب نمایید:

Screenshot_2020-02-15%20%D9%82%D8%A7%D9%

سپس فایل particles.min.js را در قسمت انتخاب فایل، از مسیر کامپیوتر خود انتخاب می نمایید و ذخیره می نماییم، حال با جستجوی کلمه particles می توانید لینک این فایل را جهت افزوندن به قالب مشاهده نمایید:(لینک موجود در برچسب قالب را کپی نموده و به مرحله بعد بروید)

Screenshot_2020-02-15%20%D9%81%D8%A7%DB%

به لیست قالب های خود برگردید و روبروی نام قالبی که می خواهید این افکت را به آن اضافه کنید دکمه ویرایش( </> ) کلیک نمایید، در صفحه باز شده(global template) می بایست لینک فایلی که در مرحله قبل کپی کردید را با تگ اسکریپت بعد از تگ body قرار دهید:

<script src="{resource="particles.min.js" app="core" location="admin"}"></script>

بدین ترتیب فایل شما به قالب اضافه شده و قابل خواندن توسط قالب شما می شود:

Screenshot_2020-02-15%20%D8%AF%D8%B1%20%

در مکانی که می خواهید این افکت را به آن اضافه کنید کد فراخوانی آنرا اضافه نمایید:

 <div id="particles-js"></div>

بعد از این کد هم می بایست تنظیماتی که در بالا از سایت مربوط به particles را انجام دادید دریافت کرده(در انتهای صفحه گزینه download current config) و محتویات آن فایل که شامل تنظیمات افکت می باشد اضافه نمایید:

Screenshot_2020-02-15%20particles%20js%2

کد دریافت شده را می بایست در قالب تگ اسکریپت در قالب فراخوانی کنید بدین شکل:

<script>
 particlesJS("particles-js",{
  "particles": {
    "number": {
      "value": 99,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#3fbe91"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 3,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}); 
</script> 

حال می بایست افکت مربوط با تنظیماتی که شما قرار دادید در مکانی که تعریف نموده اید به نمایش در آید.

لینک به ارسال
به اشتراک گذاری در سایت های دیگر
  • مدیریت سایت

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

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

html/core/admin/system/login.phtml

بنده تست نکردم این مورد رو

لینک به ارسال
به اشتراک گذاری در سایت های دیگر
  • 1 ماه بعد...

سلام،

چهار اسکرین شات فوق نمایش داده نمی شوند.

   متشکرم

لینک به ارسال
به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

هم اکنون می توانید ارسال داشته باشید و بعد ثبت نام خود را در سایت کامل نمایید. اگر حساب کاربری در سایت دارید، جهت ارسال با حساب کاربری خود هم اکنون وارد سایت شوید

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

ای پی بورد ایران

ای پی بورد ایران پشتیبان رسمی سایت ساز IPS Community Suite می باشد که با بکارگیری تیم حرفه ای، در زمینه نشر افزونه ها و قالب های مرتبط با این اسکریپت فعالیت می نماید.تمام حقوق این وبسایت برای گروه ای پی بورد ایران محفوظ می باشد و هرگونه کپی برداری و انتشار مطالب، فایل ها پیگرد قانونی دارد.

با خیال آسوده خرید کنید!

×
  • افزودن...