[Resolved] I need your support on homepage

Home Forums Support I need your support on homepage

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1038553
    An Nguyen

    Hi Tom,

    Could you help me to archive like your simple homepage without using plugin “praticles” or child-theme. I’m using CSS (simple css) only without child theme. How can I achieve this? It’s so cool.

    I did preference this post; however, they are using child-theme. If I need to use child theme, how can I do without change my current setting & format?

    Thanks Tom.

    #1038676
    Leo
    Staff
    Customer Support

    Hi there,

    Child theme is needed for that.

    You won’t lose any of your existing setting when adding a child theme:
    https://docs.generatepress.com/article/using-child-theme/

    #1038821
    An Nguyen

    Hi Leo,

    I did setup child-theme and following this Jamal’s post that includes 4 steps. I’m not sure missing other steps. It’s not worked!
    I want my home page is same like https://tomusborne.com/.

    So that, How can I achieve this?

    Thanks.

    #1038998
    David
    Staff
    Customer Support

    If you check your site using the developer tools you will see a console warning.
    You’re calling the JS script from HTTP so its being blocked.

    #1039002
    An Nguyen

    Hi David,

    It’s my typo. I fixed it. Now, it has worked, but it seems to be white color, isn’t it? How can I achieve exactly the link above in my home page?

    #particles-js {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        left: 0;
    }
    .inside-page-header-container {
        position:relative;
        z-index:9999;
    } 

    My current script

    <script type='text/javascript' src='https://mysite/wp-content/themes/generatepress_child/particles.min.js?ver=2.0.0'></script>
    <script type='text/javascript'>
    particlesJS("particles-js", {"particles":{"number":{"value":400,"density":{"enable":true,"value_area":800}},"color":{"value":"#fff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":10,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":500,"color":"#ffffff","opacity":0.4,"width":2},"move":{"enable":true,"speed":6,"direction":"bottom","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":"bubble"},"onclick":{"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":0.5}},"bubble":{"distance":400,"size":4,"duration":0.3,"opacity":1,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
    </script>
    #1039003
    David
    Staff
    Customer Support

    You need to add a background-color property to #particles-js

    #1039005
    An Nguyen

    Hi David,

    I see the background color change by time and the layout without contents. I just want to keep menu and footer.

    Thanks.

    #1039010
    David
    Staff
    Customer Support

    Sorry but i don’t understand what you mean.
    #particles-js is set to position: fixed; so it occupies the entire viewport. If you want to keep it within the header element then use position: absolute;

    #1039019
    An Nguyen

    You can come here and see (https://tomusborne.com/). I mean the background-color of this website changes (by time or random) and layout of menu… are different with mine.

    I want my homepage is the same like this page.

    #1039033
    David
    Staff
    Customer Support

    It uses this CSS on the body:

    body {
    -webkit-animation: colorchange 30s;
        /* Chrome and Safari */
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-play-state: running;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-play-state: running;
    }
    
    @keyframes colorchange {
        0% {
            background: #1e73be;
        }
    
        25% {
            background: #7B5C75;
        }
    
        50% {
            background: #E85140;
        }
    
        75% {
            background: #27AE60;
        }
    
        100% {
            background: #1e73be;
        }
    }
    
    @-webkit-keyframes colorchange
    
    /* Safari and Chrome - necessary duplicate */
        {
        0% {
            background: #1e73be;
        }
    
        25% {
            background: #7B5C75;
        }
    
        50% {
            background: #E85140;
        }
    
        75% {
            background: #27AE60;
        }
    
        100% {
            background: #1e73be;
        }
    }
    #1039037
    An Nguyen

    Sorry David,

    It doesn’t work. I tested it on safari & chrome.

    #1039038
    David
    Staff
    Customer Support

    It is working – you can see it lower down the page. You need to remove the background color you added to the #particles-js container.

    #1039048
    An Nguyen

    I removed background color of #particles-js container. It works David!

    So, what are next steps David? My menu background color is still black even though I set “merge with header on desktop” mode. I did deactivate Home-page but the contents of home-page are still there.

    Updated: Thanks for support Leo & David, I can handle other stuffs.

    #1039311
    Tom
    Lead Developer
    Lead Developer
    #1039319
    An Nguyen

    Hi Tom,

    No Tom. I dont know how to sort the menu!.

    P/s I want to change on homepage only. I try to achieve this page like https://tomusborne.com/. It’s simple but very cool.

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.