[Resolved] Helping out – Spacious Theme

[Karel]

Hi,

I would like to ask you for help with Spacious theme.

1) I cannot find a file for Homepage / Blog, so I could edit things through elementor or use WP show posts.
2) I would like to have white hover over row after clicking on the Search icon.
3) Is there any Plug-in which creates an active button? I would like to place one in Header and after clicking it would scroll down on posts.

Thank you for your patience and help 🙂

[Leo]

Hi there,

1. The home page is the posts page so it’s automatically generated by WordPress.

If you want to use Elementor or WP Show Posts, you can just create a new static page and assign it under WordPress Readings settings:
https://wordpress.org/support/article/settings-reading-screen/

2. Try this CSS:

.navigation-search input[type="search"], .navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus  {
    background-color: #ffffff;
    color: #000000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

3. You could add a button in the header element using HTML:
https://docs.generatepress.com/article/adding-buttons/

Then use our smooth scroll script:
https://docs.generatepress.com/article/smooth-scroll/

Let me know 🙂

[Karel]

Hello Leo,

Thank you for the code it is working perfectly, but I cannot figure out the smooth-scroll feature on a button, I put one in the header on Main Page and after clicking I would to smooth scroll on first 2 ( or any other post ).

I don’t know where to place class=”smooth-scroll” as I cannot edit MainPage code.

Thank you 🙂

[David]

Hi there,

Smooth Scroll only works with anchor links on the same page, they won’t work if you’re navigating to a new page.

The smooth-scroll class is added to the Link/Button not the anchor e.g

<a href="#jumpto" class="smooth-scroll">Smooth Scroll to somewhere"</a>

Then the element it jumps to for example a heading:

<h2 id="#jumpto">This is where it the link takes me</h2>

[Karel]

Hello David,

That I know

Smooth Scroll only works with anchor links on the same page, they won’t work if you’re navigating to a new page.

I just want to make a button on main page in the header and after clicking it will scroll on posts, but I cannot find a way how to edit the home page. Since I dont have any in Pages.

[David]

Sorry my bad 🙂

You can add the HTML for your button in the Header Element or use a Hook Element to add it elsewhere:

https://docs.generatepress.com/article/hooks-element-overview/

Visual Hooks:

https://docs.generatepress.com/article/hooks-visual-guide/

When setting the display rules for your Hook you need to choose the Front Page location for it to show on the Home

[Karel]

Okay, I managed to do it through a hook thank you and can you explain to me now where I should put this snippet? Please.

add_filter( ‘generate_smooth_scroll_duration’, ‘tu_smooth_scroll_duration’ );
function tu_smooth_scroll_duration() {
return 800; // milliseconds
}

So I can slow it down a lot:)?

[David]

That is a PHP Snippet so this article explains:

https://docs.generatepress.com/article/adding-php/

[Karel]

Well, I used CodeSnippet, copied code there.

add_filter( ‘generate_smooth_scroll_duration’, ‘tu_smooth_scroll_duration’ );
function tu_smooth_scroll_duration() {
return 40000; // milliseconds
}

Activated. Yet not slowed down.

[Leo]

I would think 40000 milliseconds is over the upper limit.

40 seconds smooth scroll is quite slow and not very common.

[Karel]

Well, it was more like testing if it was working, even when I set it like on 1000ms it does not work.

I really don’t know where could be the problem, all I want is just a nice smooth(slow)-scroll from the header to first 2 posts at Homepage after clicking on the button in the header.

this is code for the button:

a class=”button” href=”#jumpto” class=”smooth-scroll”

code for an anchor:

<span id=”jumpto”></span>

And code in the code-snippet plugin:

<?php
add_filter( ‘generate_smooth_scroll_duration’, ‘tu_smooth_scroll_duration’ );
function tu_smooth_scroll_duration() {
return 3000; // milliseconds
}

[David]

Can you re-add the smooth-scroll. And the filter snippet. Then i can take a look.

[Karel]

What do you mean exactly? Re-add it is still there at the website , I have not changed anything.

[David]

I am looking at your Home Page – there is a Scroll Down button in the Header Element – which has no scroll-down class applied to it ?

[Karel]

Im an idi.. sorry I have realised why it didn’t work the whole time because I had two classes in that code

class=”button” href=”#jumpto” class=”smooth-scroll”>Scroll down

So I have just moved smooth-scroll to button class.
Problem Solved, thank you David and Leo for patience and help (y)

[Author]

Posts