Scroll arrow, how can I insert that? Theme Artful

RapidWeaver Classic
1

does anyone know how I can insert a scroll arrow that shows, that there will be some content below? like the red one I inserted…

RW8
RW81429×726 360 KB

2

Not easily. The ‘hacky’ freebie method would be to have this HTML code at the top of your main content container, either in the main page area or an HTML stack:

<a href="#scrollToHere" id="scrollDown">&darr;</a><div id="scrollToHere">Scroll to here</div>

That code displays your button and provides an anchor point to scroll the page to. Then add this custom CSS code to change the style and position of your down arrow:

#scrollDown {
     position: absolute;
     top: -32vh;
     left: 35%;
     font-size: 60px;
     text-decoration: none;
}

#scrollDown:hover {
     text-decoration: none;
}

#scrollToHere {
     height: 0px;
     overflow: hidden;
}

That code combined will give you something like this:

30
301882×1063 306 KB

When the button is clicked, the page immediately jumps down to your main content area.

I suspect you might need to adjust the positioning of the button some-more to get it properly aligned. And additional code might be needed for mobile too. One suggestion could be to place the arrow button after your site slogan, with a line break tag between both. The button would then be closer to the slogan and might be better aligned too.

These free themes bundled with RapidWeaver 8 are mostly intended as a ‘taster’ of what the software can do and therefore don’t have as many style and colour options as other themes you buy separately. For example, the Exposure theme has many design similarities to Artful, but includes your scroll-down button already built-in (with a smooth-scrolling animated effect) and a whole swath of other useful features.

4 Likes
3

@nickcates used to have a stack called ScrollPage which might have helped, depending on where Artful places the Site title, but I can’t find it on his site any more.

Rob

1 Like
4

I’m going to suggest Big White Duck’s ‘Mouser stack’.

https://www.bigwhiteduck.com/stacks/mouser/

It’s customisable so presumably you could use a red arrow as the graphic.

1 Like
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.