Lodestar Theme

thevirtualpurser · Member · Apr 30, 2017 at 10:53 pm
Copy link

Add topic to favorites
Hello,

I’d like to add a ‘down arrow’ to the header image to encourage people to scroll down on pages as the header image is large.
I’d also like to create another static page within the site, is that possible?

Thanks

Amy

The blog I need help with is: (visible only to logged in users)
otpidusprime · Member · May 1, 2017 at 8:27 am
Copy link
Hello @thevirtualpurser,
Use this CSS to add the down arrow:
```
.site-branding:after {
    content: "▼";
    font-family: sans-serif;
    font-size: 30px;
    position: absolute;
    bottom: 100px;
}
```
If you want it to look somewhat fancy(possibly matching the theme of your site), then here’s the CSS code for that:
```
.site-branding:after {
    content: "▼";
    font-family: sans-serif;
    font-size: 22px;
    position: absolute;
    bottom: 100px;
    color: rgba(0,0,0,0.5);
    background: #ffffff;
    padding: 5px 10px;
    border-radius: 1000000px;
}
```
I’d also like to create another static page within the site, is that possible?

Yes you can add as many static pages you want. To add a static page, go to My Site(s) and click the Add button right beside the Pages option, or just click here: https://wordpress.com/page/

Hope this helps 🙂
thevirtualpurser · Member · May 2, 2017 at 9:00 pm
Copy link
Thank you so much otpidusprime!

That works, I just need to centre the arrow, is it possible to do that? I’ve been playing around but cant get it to work.

Is it possible to create a template so I can make other pages within the site look like the homepage? It uses 4 panels and looks great and I’d like to make other pages look like that if possible?

Thanks again!
otpidusprime · Member · May 3, 2017 at 7:59 am
Copy link
Thank you so much otpidusprime!

You’re welcome @thevirtualpurser 😇

That works, I just need to centre the arrow, is it possible to do that? I’ve been playing around but cant get it to work.

If by this you mean, the fix the circle(that does not look like a circle currently) that wraps the arrow then just adjust the padding value like this:
```
.site-branding:after {
    content: "▼";
    font-family: sans-serif;
    font-size: 22px;
    position: absolute;
    bottom: 100px;
    color: rgba(0,0,0,0.5);
    background: #fff;
    padding: 4px 10px;    /*changed from 5px to 4px*/
    border-radius: 1000000px;
}
```
If this is not what you meant then please describe what you mean when you say “center”. Because the arrow is already on the center(horizontally).

Is it possible to create a template so I can make other pages within the site look like the homepage? It uses 4 panels and looks great and I’d like to make other pages look like that if possible?

I suppose that is not possible because the panels can only work on a static front page.

However, you can create a page and use custom CSS to make it “almost” look like the front page.
thevirtualpurser · Member · May 4, 2017 at 2:31 am
Copy link
Thanks very much! That’s been a great help :)
otpidusprime · Member · May 4, 2017 at 8:38 am
Copy link
@thevirtualpurser you’re welcome 😇

No items found.