[Resolved] I need your support on homepage

[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.

[Leo]

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/

[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.

[David]

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.

[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>

[David]

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

[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.

[David]

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;

[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.

[David]

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;
    }
}

[An Nguyen]

Sorry David,

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

[David]

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.

[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.

[Tom]

Did you get the menu sorted?

[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.

[Author]

Posts