Viewing 30 posts - 31 through 60 (of 60 total)
  • Author
    Posts
  • #901624

    Nice one Two Trees you are a diamond!
    3 questions (for anyone):
    – Is there a way to add it to the header and footer background?
    – Is there a way to add it to an entire page behind the color sections and show through?
    – It only works in the first color section I add the code block to. How do I get it to appear in more than one color section?
    Thanks again
    Rob

    #901857

    Hi,

    I haven’t tested the script personally but maybe you can try the following.

    1.) Use the “#header” and “#footer” selectors, respectively.

    2.) Use the color sections’ Section ID field.

    3.) Maybe you need to re-initialize another particlesJS callback for another selector or container.

    JS:

    particlesJS.load('another-particles-js', 'another-particles.json', function() {
      console.log('another-particles.js loaded - callback');
    });

    HTML:

    
    <div class="another-particles-js"></div>
    

    JSON: (another-particles.json)

    Same as: https://github.com/VincentGarreau/particles.js/blob/master/demo/particles.json

    Best regards,
    Ismael

    #925736

    Thanks – worked on the first try!

    #925852

    Hi,

    Glad to hear that :) Let us know if you need further assistance.

    Best regards,
    Nikko

    #999151

    Hey guys, would it be possible to show the particle animation as a background of a full screen slider?

    • This reply was modified 1 year, 3 months ago by  kilimats.
    #999261

    Hi,

    Probably yes but you would probably need to customize the theme files. It’s something which is beyond the scope of our support forum. I’ll leave this thread open in case another user can help you.

    Best regards,
    Dude

    #1092704

    Hi Guys,

    I’m maybe a bit behind on this but having issues with the particles appearing below the color section content rather than behind it.

    Followed the steps as required and my custom styling for app.js is all working fine, just can’t seem to get it behind the other color section content.

    I’ve typed the main <div id="particles-js"></div> into the top content area in the code block (Code Block Content. Add your own HTML/CSS/Javascript here.

    Should I tick any of the check boxes (escape HTML Code, Disable Shortcode Processing, Deactivate schema.org markup?

    Also, is it possible to use in a color section to keep content within the wrapper but allow the particle background to be 100% width to match the background color of the color section?

    Any help much appreciated.

    Thanks!

    • This reply was modified 7 months, 3 weeks ago by  mintsuze.
    #1093185

    Hi,

    Have you tried adding the target ID in the color section’s Section ID field?

    // https://kriesi.at/support/topic/trying-to-add-js-particles-background-via-enfold-theme/page/2/#post-901857

    Best regards,
    Ismael

    #1094357

    Hi Ismael,

    Sorry for the delay in replying. Unfortunately, this doesn’t work either. I tried adding position: absolute (which works in Inspect/Dev Tools when added to the particles-js id via element.style but doesn’t seem to work when added to the actual style.css.

    Thanks for the suggestion though.

    #1094385

    Hi,
    If your css is working in the inspector but not when you add it to the style.css of your child theme, please try this step:
    perhaps your css/js file merging is on in your performance settings, so your merged css needs to be re-built. Please try going to Enfold Theme Options > General Styling > Quick CSS field and add a blank space in the field, then save your theme settings by clicking the big blue button “Save all changes”, then clear or purge any cache plugin, then clear your browser cache.
    Your css should work now, if not then try disabling your merged css in the performance settings, and clear any cache.
    If this still doesn’t work, please try adding your css to the: WordPress > Customize > Additional CSS field:
    This loads last and overrides all other css if you are using !important;.

    Best regards,
    Mike

    #1094396

    Hi Mike,

    Thanks for the quick response. It was indeed the Performance css merging that was causing the issues. I now have it loading as a background element within a color section using the code block method. It looks ok but ideally I would prefer this to be the full width of the color section rather than just the content container but when trying to add to the color section ID it throws the particles to the very top of the screen (position: absolute, top: 0).

    I’ll stick with what I have at the moment unless I get a flash of inspiration.

    Thanks Mike.

    #1094558

    Hi,
    I’m glad this helped some, but to try to adjust the script we will need to see the site and backend.
    I don’t see any links to your site in the thread.

    Best regards,
    Mike

    #1094670

    Morning Mike,

    Thanks for coming back on this. It’s not a massive issue but if you have 5 minutes to take a look and offer any suggestions that would be great.

    Thanks,
    .andy

    #1094729

    Hi,
    Thanks for the login, but it doesn’t include admin access so I can’t see the css you are currently using, please check.

    Best regards,
    Mike

    #1094732

    Sorry, Mike, login access level updated.

    #1094932

    Hi,
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_script(){
      ?>
      <script>
    (function($){
      $(document).ready(function(){
      $( '#particles-js:first' ).insertBefore( '#av_section_3 .container' );
      });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_script');

    and add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #particles-js {
    z-index: 10 !important;
    }

    Best regards,
    Mike

    #1095214

    Morning Mike,

    Again thanks for the input on this. It worked a treat and all is good now. Thanks again for the continued support and going above and beyond.

    As usual, the service and support in regards to Enfold and kriesi.at, in general, is second to none.

    Thanks!

    #1095564

    Hi,
    Glad to help, I assume we can close this now, but I like to ask first. Shall we close this then?

    Best regards,
    Mike

    #1096509

    Mike, sorry for delay in getting back to you. Yes all is good now with my requests. I did jump onto someone elses old thread so I’m happy for you to close action on my requests. Not sure if that also means closing off replies to the original posting though.

    Thanks!

    #1096750

    Hi mintsuze,

    Thanks for the update :-)

    Best regards,
    Rikard

    #1113087

    Hello, I’m not a very experienced web developer… but I have confidence that I followed the steps properly. After reviewing my work, I still have a problem:

    The particle effect is not in the background but is instead underneath the color section content. I’ve checked and double checked my work. I’ve tried reworking my files (this is the only custom code in my theme), and redoing the process… I can’t find the problem, any help is appreciated.
    The problem may be outside of Enfold support but I would appreciate it if a moderator could at lease check the things that are in the realm of support, like the code block and page settings.

    Thank you, access is in the private content.

    • This reply was modified 5 months, 2 weeks ago by  chanjelin.
    • This reply was modified 5 months, 2 weeks ago by  chanjelin.
    • This reply was modified 5 months, 2 weeks ago by  chanjelin.
    #1113440

    Hi,

    @chanjelin: Add this css code to move the particle container inside the color section.

    canvas.particles-js-canvas-el {
        position: absolute;
        left: 0;
        top: 0;
    }

    Thank you for using Enfold.

    Best regards,
    Ismael

    #1113470

    Thank you @ismael for the quick response, however it hasn’t worked. I am a novice and I may not have added the code correctly… maybe I had to remove some code as well? This is simple enough, I’m not sure what I might have done incorrectly…

    Would you take another look?

    Thank you!

    #1113818

    Hi,

    Thank you for the update.

    The Enfold > Performance > File Compression settings are enabled when we checked. The site probably loaded the old version of the stylesheet the last time you checked. We disabled the compression temporarily and added the code in the Quick CSS field. Please enable the particle script again.

    If you have the time, please create your own thread so that we can close this one.

    Best regards,
    Ismael

    #1113949

    Thanks Ismael, it’s working decently well now. The element is stretched and doesn’t quite respond to my cursor’s precise location, but it’s working well enough. I’m happy with how it is now.

    Have a great day :)

    #1114157

    Hi,
    Glad Ismael could help, thank you for using Enfold.

    Best regards,
    Mike

    #1143004

    I tried the above methods and work fine, the only issue, I get this error (Uncaught TypeError: Cannot read property ‘getElementsByClassName’ of null) in all pages I don’t using the particles-js effect.
    How I can fix this?
    Any help will be grate!
    Sorry my English is not my best.
    Also I try Mike solution (#1094932) to make it full width on color section i use it but goes in every color section on the page.

    #1143053

    Hi,
    Please see this solution

    Best regards,
    Mike

    #1143612

    Thanks again Mike for your quick respond.
    I’m not a very experienced web developer, so the steps to follow from the solution you recommend me is looking very hard for me.
    Thanks for try to help me.

    #1144414

    Hi,

    @nickthe: What exactly are you trying to do? Please open your own thread and try to explain there what you’re trying to create — screenshots will also help. You can upload them to imgur or dropbox. We’ll close this thread for now.

    Best regards,
    Ismael

Viewing 30 posts - 31 through 60 (of 60 total)

The topic ‘Trying to Add JS Particles Background via Enfold theme’ is closed to new replies.