Advertisement:
« previous next »
Pages: [1]

Author Topic: Particles.js for the background  (Read 1815 times)

prosto4u

  • Newbie
  • *
  • Posts: 11
Particles.js for the background
« on: January 06, 2018, 03:25:00 am »
Dear friends!

I am inspired by particle.js and want it as a background for the osclass pages!
But dont now how to manage it!

In the main.php I put:
 <head>
<meta charset="utf-8">
      <link rel="stylesheet" href="css/style.css">
    </head>

in the middle (as tag body is absence in main.php):
<div id="particles-js"></div>
<!-- scripts -->
<script src="js/particles.js"></script>
<script src="js/app.js"></script

style.css is in css folder, particles.js and app.js are in js folder, particles. json is in bender folder where main.php.

After putting this there were no changes! Dont know what to do? :o How to manage thist?

Thank you so much!
« Last Edit: January 06, 2018, 03:27:03 am by prosto4u »
Logged

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 1652
  • "BE GRATEFUL TO THOSE THAT SUPPORTED YOU"
Re: Particles.js for the background
« Reply #1 on: January 06, 2018, 12:34:48 pm »
Try to put them in header.php
Logged

prosto4u

  • Newbie
  • *
  • Posts: 11
Re: Particles.js for the background
« Reply #2 on: January 06, 2018, 01:46:17 pm »
I did. But still don't know why it doesn't work!
Example of header.php:

<head>
        <?php osc_current_web_theme_path('common/head.php') ; ?>
       
      </head>
<body <?php bender_body_class(); ?>>
<div id="header">

    <!-- header ad 728x60-->
    <div class="ads_header">
    <?php echo osc_get_preference('header-728x90', 'bender'); ?>
    <!-- /header ad 728x60-->
    </div>
   
   <style type="text/css">
   <!-- particles.js container -->
<div id="particles-js"></div>
<!-- scripts -->
<script src="js/particles.js"></script>
<script src="js/app.js"></script>

</style>   

It looks like  *js and *css files are unreadable and they are not included in page structure.
Logged

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 1652
  • "BE GRATEFUL TO THOSE THAT SUPPORTED YOU"
Re: Particles.js for the background
« Reply #3 on: January 06, 2018, 01:51:00 pm »
Style must be in head tag and div doesn't belong in style tag. Neither the js references. They must be in head or footer.
Logged

prosto4u

  • Newbie
  • *
  • Posts: 11
Re: Particles.js for the background
« Reply #4 on: January 06, 2018, 02:23:02 pm »
I put link in the <head>

        <head>
        <?php osc_current_web_theme_path('common/head.php') ; ?>
       <link rel="stylesheet" href="css/style.css">
                  
   </head>

after <body <?php bender_body_class(); ?>>
   I put

 <div id="particles-js"></div>
  <!-- scripts -->
    <script src="js/particles.js"></script>
    <script src="js/app.js"></script>

then goes the following standard phrase
<div id="header">
.....
style.css includes:

body
{
margin:0;
padding:0;
height:100vh;
}

/* ---- particles.js container ---- */

#particles-js
{
  width: 100%;
  height: 100%;
  background: #262626;
 
 }

Thank You!
Logged

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 1652
  • "BE GRATEFUL TO THOSE THAT SUPPORTED YOU"
Re: Particles.js for the background
« Reply #5 on: January 06, 2018, 02:36:39 pm »
Not good. Read again what I wrote and head and header are not the same thing.
Logged

prosto4u

  • Newbie
  • *
  • Posts: 11
Re: Particles.js for the background
« Reply #6 on: January 06, 2018, 02:44:12 pm »
"head and header are not the same thing"

Well... thank you for patience, but now I don't understand  :) what file should I edit? main.php?
« Last Edit: January 06, 2018, 03:10:31 pm by prosto4u »
Logged

prosto4u

  • Newbie
  • *
  • Posts: 11
Re: Particles.js for the background
« Reply #7 on: January 06, 2018, 02:54:44 pm »
Even if I put it  in the <head> it doesn't work. I even cant change background color!

        <head>
        <?php osc_current_web_theme_path('common/head.php') ; ?>
      <link rel="stylesheet" href="css/style.css">
           <div id="particles-js"></div>
  <!-- scripts -->
    <script src="js/particles.js"></script>
    <script src="js/app.js"></script>       
       </head>



 
Logged

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 1652
  • "BE GRATEFUL TO THOSE THAT SUPPORTED YOU"
Re: Particles.js for the background
« Reply #8 on: January 06, 2018, 03:41:45 pm »
Quote from: prosto4u on January 06, 2018, 02:54:44 pm
Even if I put it  in the <head> it doesn't work. I even cant change background color!

        <head>
        <?php osc_current_web_theme_path('common/head.php') ; ?>
      <link rel="stylesheet" href="css/style.css">
         
  <!-- scripts -->
    <script src="js/particles.js"></script>
    <script src="js/app.js"></script>       
       </head>

Try like above and use !important for color. Also the above must be placed in header.php.
Logged

prosto4u

  • Newbie
  • *
  • Posts: 11
Re: Particles.js for the background
« Reply #9 on: January 06, 2018, 04:29:17 pm »
That doesn't work!

I think it should be putted between <style type> </style>
like in example for image

<style type="text/css">
    body {
        background-image: url('{url of image}');
    }
</style>

in *css

body {
        background-image: url('{url of image}');
    }


but don't know how make it right.
Logged

marius-ciclistu

  • issues
  • Hero Member
  • *
  • Posts: 1652
  • "BE GRATEFUL TO THOSE THAT SUPPORTED YOU"
Re: Particles.js for the background
« Reply #10 on: January 06, 2018, 04:34:03 pm »
Edit main.css from bender theme then.
Logged

prosto4u

  • Newbie
  • *
  • Posts: 11
Re: Particles.js for the background
« Reply #11 on: January 07, 2018, 04:17:46 am »
tried many ways, but without results...
in tutorials examples are simple and they work, but don't understand how to apply examples in osclass theme. What is the difference?

So i repeated and did in header.php

<head>
        <?php osc_current_web_theme_path('common/head.php') ; ?>
       <link rel="stylesheet" href="style.css">
      <script type="text/javascript" src="particles.js"></script>
      <script type="text/javascript" src="app.js"></script>
            
   </head>
   
<body <?php bender_body_class(); ?>>
   <div id="particles-js"></div>

style.css includes (but I think it doesn't mater what style.css includes, osclass doesn't read this information)
body
{
margin:0;
padding:0;
height:100vh;
}

/* ---- particles.js container ---- */

#particles-js
{
  width: 100%;
  height: 100%;
  background: #f00!important;
 
}

I don't have any ideas how to talk with header.php page and what this page want to see my favorite particle.js!
Logged

prosto4u

  • Newbie
  • *
  • Posts: 11
Re: Particles.js for the background
« Reply #12 on: January 07, 2018, 09:14:15 am »
WoooooooooW! Yahoooo!  :o 8) :D ;)   (this type https://github.com/marcbruederlin/particles.js was used)

I talked with footer.php

in the end  before </body> (i put it by myself)  i insert

<style type="text/css">
html,body {  margin: 0;  padding: 0;}.background {  position: absolute;  display: block;  top: 0;  left: 0;  z-index: 0;}
</style>
<canvas class="background" width="1898" height="322" style="width: 100%; height: 100%;"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.1.0/particles.min.js"></script>
    <script>
   window.onload = function() {Particles.init({selector: '.background'  });};
   </script>
   
« Last Edit: January 07, 2018, 09:51:40 am by prosto4u »
Logged

prosto4u

  • Newbie
  • *
  • Posts: 11
Re: Particles.js for the background
« Reply #13 on: January 07, 2018, 10:56:52 am »
It is better to insert those code in header.php between <head> </head> as buttons blocked.
Logged
Pages: [1]
« previous next »