Skrollr

[vallhund]

Skrollr theme
Just another GetSimple website
An experimental horizontal one-page theme.


Live demo | Download

This is a variant of the single-page approach. The content is divided into separate horizontal slides (looks like a 'classic' site) and pages switch with animated transitions.

---

First slide is not a page, actually, it's the landing slide (can be easily changed by switching to template-flat.php for your index page).

---

Local links are rebuilt by /js/init.js script automatically (href removed, links binded to slides). External links and image links remain untouched.
Also, the script allows you to build your own controls. The API is quite simple - add one of the 4 classes to an element and it becomes a control:

Code:

.slider-next //advance to next slide

.slider-prev //go to previous slide

.slider-jump //jump to a page of a given slug
//specify 'data-jump' attribute with the page slug

.slider-goto //jump to a slide/page with of a given index
//specify 'data-goto' attribute with the page index (note that actual pages start from 1)

The script also initializes the slider plugin (bxSlider is used), controls the mobile-menu etc.

---

A simple 12-unit CSS grid is included. Use .row as container and .uN class for columns (where N is 12th of container width - like u3, u4 etc).

---

Customizing is made easier (I hope) by separating CSS into two files: layout.css for pure structure and /css/skin.css for colours, fonts, margins and other styles.

---

v0.6 - Options for initialization script can be passed to the following call in template.php:

Code:

$(document).ready(function () {
   $('#pages').skrollr();
});

zeroSlide Boolean Turns on the landing screen. Default value: true

speed IntegerTransition time when switching slides, in milliseconds. Default value: 1000

easing String Name of the CSS easing function (for slide transitions). Possible values are: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'. Default value: "ease"

menu String Element, which contains menu items. (A CSS Selector) Use this parameter when you modify template structure. Default value: "#nav ul"

mobileMenu String Element, which contains mobile menu trigger ('hamburger' icon for example). (A CSS Selector). Use this parameter when you modify template structure. Default value: "#mobile-menu"

---

Comments, bug tracking, suggestions will be really appreciated.

[Timbow]

I really like that. Brilliant.

[shawn_a]

why no footer, there a bunch of plugins that wont work if you dont call
get_footer

[vallhund]

Thanks for responding

get_footer

You're absolutely right, I forgot that.

I updated the theme:
1. template.php - added get_footer
2. layout.css - fixed mobile version behaviour (height was not 100% in some browsers)
3. skin.css - replaced the unicode mobile menu icon (☰) with css gradient trick, as the unicode symbol doesn't show on Android.
4. some insugnificant minor cleanup

[-FrA-]

Brilliant, I love it!

How can I skip the landing and go straight to the homepage?

[vallhund]

Brilliant, I love it!

How can I skip the landing and go straight to the homepage?

Thanks!

Here's an update that removes the landing page.
  mod.zip (Size: 2.47 KB / Downloads: 14)

Unzip the contents of the attached file to the installed theme folder (replace all).

[shawn_a]

demo url suspended....

Why not have 2 templates with or without landing

[-FrA-]

Awesome!
Thank you, it works smoothly!

[Nokes]

really nice, thanks!

[pepe]

Hello,

I like this Theme Skrollr, really nice.

I´ve found a conflict with plugin "cbcontact". It does not work properly in this Theme. It can not reload the captcha neither send the message.

I´m trying to use this theme but I can´t find the error above. Any help will be gratefull.

Thank you.

[pepe]

Hello
At the moment all plugins with captcha (reload) , used in contact forms, do not work with this Theme.

[vallhund]

Thanks for finding this bug, pepe, I'll try to fix it asap

[vallhund]

Hello
At the moment all plugins with captcha (reload) , used in contact forms, do not work with this Theme.

Pepe, my friend, everything works fine (at least with cbcontact).
See the Demo (I inserted the contact form to "Credits" page)

Seems like the problem is not the theme. If you could provide an online example of your site, maybe we could find a solution.

[pepe]

Thank you very much for answering Vallhund.
I tried your demo and I at least, pressing the reload button did not upload a new image. I do not understand why: in your own demo I can not reload the image. I have also installed the plugin in other Themes to see if it was mine error, but it works there. Please confirm me that pressing the reload button on your demo will load a new image.
Finally I want to express my gratitude for sharing with all this brilliant work. I used this theme as a basis for the web from a friend and everyone liked it.

[Lechuga]

Hello,

I have installed and successfully configured the skrollr theme, but I can't get i18n-gallery to work (no matter what I try). I thought it might be a jquery version conflict, but disabling jquery in i18n-gallery (as suggested elsewhere) does not fix it.

EDIT: I also tried all the things suggested in the forum for i18n-gallery without success.

I'm stuck. Could someone assist me? TIA

[davetest]

Hello,

I have installed and successfully configured the skrollr theme, but I can't get i18n-gallery to work (no matter what I try). I thought it might be a jquery version conflict, but disabling jquery in i18n-gallery (as suggested elsewhere) does not fix it.

EDIT: I also tried all the things suggested in the forum for i18n-gallery without success.

I'm stuck. Could someone assist me? TIA

Me too! I18n gallery works fine on my site with other themes, but when I change to Skrollr instead of my gallery I get the (% gallery name=gal1 %) from my page content. My other plugins seem to be working ok, just I18n Gallery that doesn't. I've checked and get_header and get_footer are both in the template. I'll report back when I've investigated better, but thought it worth asking first if anyone has experienced this and found the reason?

[Carlos]

Try this (not tested):

edit template.php, find this:

Code:

<?php getPageContent($pag); ?>

and change it to:

Code:

<?php getPageContent($pag, 'content'); ?>

[davetest]

Try this (not tested):

edit template.php, find this:

Code:

<?php getPageContent($pag); ?>

and change it to:

Code:

<?php getPageContent($pag, 'content'); ?>

Sadly it didn't make any difference for me, but thanks for trying.

[Faramir]

Hi


thanks for this theme, it looks very nice.
I tried it out, and noticed one disturbing thing (at least for me ) : on the right side of the page (on every slide) one can see the beginning of the next slide. As if the current container wasn't wide enough.

See attached image, the vertical white stripe is actually the left border of the next page.

What do you think ? Can the stripe be removed, i.e. page containers be defined a bit wider on initialization ?

Cheers

[vallhund]

I tried it out, and noticed one disturbing thing (at least for me ) : on the right side of the page (on every slide) one can see the beginning of the next slide. As if the current container wasn't wide enough.

Thanks for attention, I didn't notice that

The workaround is simple: in css/layout.css add to rules for

Code:

#pages, .bx-wrapper, .bx-viewport {
  left: 0 !important;

will update the theme soon

thanks, Faramir

[Faramir]

Thanks for attention, I didn't notice that

The workaround is simple: in css/layout.css add to rules for

Code:

#pages, .bx-wrapper, .bx-viewport {
 left: 0 !important;

will update the theme soon

ok, as simple as that ! I was completely on the wrong track with these slider options.
Perfect, it's all nice and balanced now

[vallhund]

v0.6 Uploaded to Extend

Changelog:
1. I18N plugin dependency removed at last.
Core functions are used to build the menu and glue the pages together.
However, if I18N plugin exists, its functions are used. 

2. External linking to a particular page is now handled correctly.
(http://mysite.com/index.php?id=pageid)
The corresponding slide is shown.

3. A few parameters can be passed to initialization script in template.php
See the first post for details.
The first two parameters, menu and mobileMenu, set the correct css selectors for navigation, in case you've changed the layout.
zeroSlide turns off the zero screen ('landing page'). speed and easing let you customize the slide transition.

4. Made further cleanup in layout.css, moved some non-essential selectors to style.css

5. Other minor bugfixes and refactoring.

Updating:

Be sure to save your skin.css file, it will be overwritten. (Better save a backup of the old SkrollrGS theme folder).

[Byteler]

Н1!
You received my PM?

[vallhund]

Н1!
You received my PM?

Hi. Unfortunately I didn't

[Byteler]

I tried to repeat your demo at http://grad-piter.ru
Perhaps there is an error because menu items Credits and Credits-2 did not work and freeze site.
Username and password see in PM