YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar thomas.p Support asked

[Tutorial] Copy the scroll message from Nic & Em to another theme

The Nic & Em Theme comes with a scroll message feature having a nicely animated mouse. This might be useful on other themes as well. To replicate this feature on another theme, take the following steps.

  • download and extract the Nic & Em Joomla 3.x Demo Package
  • copy the file /images/yootheme/demo/default/icon-scroll.svg into the images folder of your installation, e.g. to /images/icon-scroll.svg
  • edit an existing module or create a new custom module and paste the following content (make sure your code doesn't get cleansed by the editor)

Content for your scroll message module (set href attribute to the target you need)

<div class="tm-scroll-message">  
  <a href="#target" data-uk-smooth-scroll>  
    <img class="tm-icon-scroll" src="images/icon-scroll.svg" width="14" height="21" alt="icon-scroll" data-uk-svg style="width: 14px; height: 21px;">  
    <p class="uk-margin-small-top">Scroll Down</p>  
  </a>  
</div>
  • add the following code to your custom.css file (preferably /templates/yoo_YOUR-TEMPLATE/styles/YOUR-STYLE/css/custom.css)

CSS for the scroll message

.tm-scroll-message {  
  min-width: 100px;  
  text-align: center;  
}  
svg.tm-icon-scroll > path {  
  fill: #808080;  
}  
.tm-scroll-message a {  
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;  
  font-size: 9px;  
  font-weight: 300;  
  color: #808080;  
  text-transform: uppercase;  
  letter-spacing: 1px;  
  -webkit-transition: all 0.2s ease-in-out;  
  transition: all 0.2s ease-in-out;  
}  
.tm-scroll-message a:hover {  
  color: #2a2a2a;  
}  
.tm-scroll-message a:hover svg.tm-icon-scroll > path {  
  fill: #2a2a2a !important;  
}  
.tm-icon-scroll {  
  -webkit-animation: tm-icon-scroll 3s ease-out infinite;  
  animation: tm-icon-scroll 3s ease-out infinite;  
}  
@-webkit-keyframes tm-icon-scroll {  
  0% {  
    -webkit-transform: translateY(0);  
  }  
  20% {  
    -webkit-transform: translateY(0);  
  }  
  25% {  
    -webkit-transform: translateY(3px);  
  }  
  30% {  
    -webkit-transform: translateY(-3px);  
  }  
  35% {  
    -webkit-transform: translateY(3px);  
  }  
  40% {  
    -webkit-transform: translateY(0);  
  }  
  100% {  
    -webkit-transform: translateY(0);  
  }  
}  
@keyframes tm-icon-scroll {  
  0% {  
    transform: translateY(0);  
  }  
  20% {  
    transform: translateY(0);  
  }  
  25% {  
    transform: translateY(3px);  
  }  
  30% {  
    transform: translateY(-3px);  
  }  
  35% {  
    transform: translateY(3px);  
  }  
  40% {  
    transform: translateY(0);  
  }  
  100% {  
    transform: translateY(0);  
  }  
}

Note that depending on your theme, the desired positioning and other variables you might need to adjust the content and/or the custom.css. In my example I used the master 2 template and added the scroll message to the module named Home Warp Teaser. The result looked like this:

Image

Update for YOOtheme Pro: If you want to add smooth scroll in YOOtheme Pro, you need to use the attribute uk-scroll instead of data-uk-smooth-scroll as YOOtheme Pro is based on UIkit 3 having a different syntax than UIkit 2.

  • Joomla
  • Tutorial

Edited

4 Answers

0

Avatar pixvisual answered

I want to use this scroll message in Yootheme Pro. I've followed the instructions above and I've added the code as a section in my layout.

On my starting page I load a Widgetkt slideshow in the Top position and it covers (more than) the viewport.
Beneath it I see the scroll message, that I've added as a section in the Builder of Yootheme Pro.

However, how can I position the scroll message to always be on the bottom of the page (in front of the slideshow)?

Help would be very much appreciated!

0

Avatar thomas.p Support answered

Hi pixvisual,

please create a new, separate question (= thread) on your issue.

When you do so, please add the problem description you posted here and of course post a link to your site and a page showing your issue as well as admin credentials.

Thank you

Know someone who can answer? Share a link to this question via email or twitter.