XF 2.2 trying to add particles to header

williamt · Oct 30, 2023

Can anyone help me add particles to the header please. I have this code and not sure where to place it and how to make it show in the header. It works fine for the background. I added this to the extra.less for the background.

.pg-canvas {
position: absolute;
z-index: 1;
}
* {
z-index: 2;
}

JavaScript:

<!--XF:JS-->
    <script src="https://cdn.rawgit.com/jnicol/particleground/69195da3/jquery.particleground.min.js"></script>

    <script>

        $(".p-body").particleground();

    </script>

Mr Lucky · Oct 30, 2023

If it needs to be in the header you can put it in the PAGE_CONTAINER template (between <head> ... </head>

Either by editing that or by template modification

williamt · Oct 30, 2023

Ok I added it to page_container and it doesn't show would I have to add this to extra.less and what would it be.

.pg-canvas {
position: absolute;
z-index: 1;
}
* {
z-index: 2;
}

this maybe

.p-header {
position: absolute;
z-index: 1;
}
* {
z-index: 2;
}

Mr Lucky said:
If it needs to be in the header you can put it in the PAGE_CONTAINER template (between <head> ... </head>

Either by editing that or by template modification

Mr Lucky · Oct 30, 2023

Sorry I thought you were just asking where to put the script. I don't know what you mean by particles I was just trying to help you with where you put the javascript

Any css needs to be in extra.less

williamt · Oct 30, 2023

Mr Lucky said:
Sorry I thought you were just asking where to put the script. I don't know what you mean by particles I was just trying to help you with where you put the javascript

Any css needs to be in extra.less

I put the script in the page_container between <head>.....</head>
here is the particle demo https://jnicol.github.io/particleground/

XF 2.2 trying to add particles to header

williamt

Member

Mr Lucky

Well-known member

williamt

Member

Mr Lucky

Well-known member

williamt

Member

Similar threads

We value your privacy