Beta 3 - Scroll Top Anchor

Beta
#1

H Guys,

I realise this isn’t purely a Beta issue but is there an easy way to do an image replacement on the Scroll Top Anchor.

I am recreating a non-pro site on Beta 3 and even created a section using css grid to replicate the original design…

but on the original design (non-pro) there is an image that acts as the scroll to top anchor (as in the theme/misc options). I would like to replicate this using the same gif but in the pro page. How could I do this please? and also would that be something that could be an option in the theme options in future?

#2

Hi Scot!

No problem. The markup is similar enough that we can just do a little custom CSS (mostly copying styles from the existing site).

/* update base styles */
.x-scroll-top {
    overflow:hidden;
    border: none;
    border-radius: 0;
    height: auto;
    width: auto;
    cursor: pointer;
    bottom: 30px;
}
.x-scroll-top.right {
    right: 30px;
}
/* hide arrow */
.x-scroll-top > i {
    display: none;
}

/* change in/hover opacity */
.x-scroll-top.in {
  opacity: 0.875;
}

.x-scroll-top.in:hover {
    opacity: 1;
}

/* copy over images */
.x-scroll-top:before {
    background: url(https://popgardens.co.uk/wp-content/themes/gardening/images/totop.png) no-repeat left top;
    width: 45px;
    height: 54px;
    display: block;
    background-size: 45px;
    content: "";
}

.x-scroll-top:after {
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	background:url(https://popgardens.co.uk/wp-content/themes/gardening/images/totop-bottom.png) repeat;
	width: 500px;
    height: 7px;
	background-size: 45px;
	animation: moveSlideshow 17s linear infinite;
}

@keyframes moveSlideshow {  
  100% { 
    -webkit-transform: translateX(-90%);  
  }
}

As for more styling options, this is something we’ll likely revisit as part of the Theme Options reboot.

#3

As per usual @alexander you are a star!, thank you and the comments in the code help me to sort the ‘new’ from the ‘old’

I’m just about to try and replicate stuff with custom attributes for another part of the site reconstruction!

#4

You’re welcome! Hope all went well with custom attributes.

#5

The custom attributes worked well thanks to a little starter help from Miro

One thing I would say, it would be great to be able to paste multiple settings in one go rather than a repeat of name/value repeat repeat repeat

1 Like
#6

Good point. Misho brought that up as well. I don’t want to force it just yet because we’ve talked about a general copy/paste function for like controls. For example, you would be able to copy a box shadow, and paste it to another box shadow control in the Inspector. This could extend to most control types, including custom attributes.

#7

On another note… it would be great it there was a site wide version of the paste style (similar to the paste headline styles within a section)… Thinking when the client does a u-turn on design ideas. either that or if there was some kind of update to a preset. I know the whole global preset idea has been banded before but would be really helpful if each element could be marked as belonging to a global style, even if that style update is manually pushed (to save resources)

#8

Yeah, that is something we’ve been considering more lately. Like a Global Element so to speak. It’s a fairly big technical challenge to wrangle, so we’ve not yet re-approached it in light of other priorities such as the Grid element and layout builder. With a Global Block, we’re effectively bringing the performance load of rendering an additional page. With elements being used more frequently, we’d have to find a better strategy performance wise.

#9

I have some ideas on how it could work, using the template manager. I think my idea could be less process intensive.

What would be the best way to chat about it? if you want to that is

#10

Sure! Feel free to share any thoughts here. Happy to discuss it further. I can bring it back to the team afterwards.