Seren - Capable of being a one page scrolling website?

Permalink Browser Info Environment
Hi there

I was wondering if it's possible to use Seren as a one page website, e.g., when the nav links are clicked it scrolls down to the relevant section? It would be great if this would work.

Grateful for advice,

Bruce Manning

Type: Discussion
Status: Resolved
heritageboy
View Replies:
pilipala replied on at Permalink Reply
pilipala
Hi,

Seren isn't a one page website theme; however, there should be some on the marketplace (e.g. Long Story Short).

You can customise your theme, if you feel comfortable doing so. To create a one page website, you could set up div or section tags with anchors in them in the page template. Then you can add a link to the anchor in sitemap. If you search on the internet for one page templates and one page tutorials, you will find examples to copy.

To edit a page template, you would need to select one that you liked the style, e.g. home.php located in the Seren package folder here:
seren\themes\seren

Open this up in something like Notepad++ or Dreamweaver and rename it, e.g. one-page.php. You can add anchors (id="nameofsection") to existing divs in the page template, e.g.
<div class="seren-full-width seren-home-1" id="portfolio">

<div class="seren-full-width seren-home-2" id="about">

Then you would need to upload the new page template to your server under seren/themes/seren, go to the dashboard and select pages and themes > page templates button next to Seren > your new page template should be showing > click OK. Then navigate to your home page and choose your new page template under Design.

To add the links in, go to Dashboard > Full Sitemap > click on Home > Add external link > e.g. if your section was called "Portfolio" you would put name: Portfolio URL:http://yourwebsite.com/#portfolio...

Then you need to exclude from navigation any pages you don't want to show in the menu (attributes > exclude from nav).

I'm not sure if this is the best way to do it in concrete5, but this is how we did it for one of our websites. See this link for an example (right click view source to see the sections):
http://www.concrete5-webdesign.com/...

Obviously, with this method, you would have to make the changes in the page template and CSS yourself, and you couldn't add sections dynamically. Whereas, if you bought a one page website theme from the marketplace (such as Long Story Short) then you would have it all done for you, and have the appropriate styles etc. So it is possible, but might be easier to start with a one page theme.

Thanks,

Jennifer
heritageboy replied on at Permalink Reply
heritageboy
Hi Jennifer

Thanks - that must be the most comprehensive and useful reply I've ever encountered on a support forum! This is all a bit over my head so I think I'll stick with Seren as it is. For info I used Long Story Short on my first C5 projecthttp://www.onewebpage.co.uk

Bruce
pilipala replied on at Permalink Reply
pilipala
Hello,

You're welcome - probably is a bit easier to start with a one page theme! Thanks for sharing your one page website - it looks good. If you want to share it publicly, you can post it herehttps://www.concrete5.org/profile/showcase/... It's nice to see what is being done with concrete5.

Best wishes,

Jennifer
heritageboy replied on at Permalink Reply
heritageboy
Hi again Jennifer

I managed to get the 'one page' look by using anchors and the Smooth Scrolling add-on. Thanks again for the help.

Bruce,http://www.maison72.co.uk
pilipala replied on at Permalink Reply
pilipala
Hi Bruce,
Thanks, that's a good idea. Looks good :)
Jennifer

concrete5 Environment Information

# concrete5 Version
Core Version - 8.4.4
Version Installed - 8.4.4
Database Version - 20180717000000

# concrete5 Packages
Seren (1.0.2)

# concrete5 Overrides
None

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - On
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache

# Server API
cgi-fcgi

# PHP Version
7.2.13

# PHP Extensions
bcmath, bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dba, dom, exif, fileinfo, filter, ftp, gd, gettext, hash, iconv, imap, intl, json, libxml, mbstring, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, Reflection, session, shmop, SimpleXML, soap, sodium, SPL, sqlite3, standard, tidy, tokenizer, wddx, xml, xmlreader, xmlwriter, xsl, zip, zlib

# PHP Settings
max_execution_time - 50000
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - -1
max_input_vars - 5000
memory_limit - -1
post_max_size - 64M
upload_max_filesize - 64M
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 7200
soap.wsdl_cache_limit - 5

Browser User-Agent String

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.