About SyttenThe name Sytten translates to seventeen in Norwegian. This was the seventeenth theme design developed by seyDesign, since launch in mid-November of 2005. This theme offers a big and bold design that allows your ideas and creativity to flow freely. With practically no limitations set for logo size, a bold title and a vast space for beautiful vistas, Sytten presents your visitors with an above-the-fold experience like no other. True Scandinavian design - exciting, simple and impactful!
This breathtaking theme is chock-full of great features like vast vistas that fill the top of your site and fantastic designer fonts for those finishing touches. Built on the Twitter Bootstrap framework, Sytten is now fully mobile-first responsive straight out of the box. The theme includes many powerful features like FreeStyle banners, Font Awesome Icons, Nivo lightbox, jQuery, retina display-optimized images, responsive video embeds and so much more. It comes as no surprise that Sytten is one of the most popular RapidWeaver themes available.
Tip: Sytten has support for 5 'header vista' images. You can add an unlimited number of your own images using this special CSS code snippet exclusive to Sytten:
background-position: center top;
http://example.com/image1.jpgwith the actual address to your own image. Pop this entire code snippet into the custom CSS box, in RapidWeaver.
A free demo version of Sytten can be downloaded here (see the user guide for details of restrictions applied to the free demo).
We no longer host a live demo for this theme. We instead suggest you download the free demo version to install into RapidWeaver. You can either use your own project file to test the theme in RapidWeaver, or download a sample RapidWeaver project file using this link. Themes like Sytten have a very wide choice of colour and style settings; so trying the theme in RapidWeaver lets you fully experiment with what Sytten can do. You can also test the responsive behaviour for this theme.
Some of the key features that make Sytten so good! As always, if you have any questions about the features or capabilities of Sytten, please get in contact and we'll be happy to help.
RapidWeaver 7 Ready
We've updated Sytten, so that it's 100% compatible with both RapidWeaver 6 and 7. Take advantage of clever new features in RapidWeaver 7; like SEO health checks, drag-and-drop banners, automatic backups, optimized code and more reliable publishing.
Built On Bootstrap
Sytten is built on Twitter Bootstrap, the world's most successful and popular frontend web development framework. A sleek and intuitive framework perfect for building faster and more flexible websites.
Simple CSS embellishments (like rounded corners and shadow effects) remove the need to use or edit lots of individual graphic files. Completed webpages are faster, more flexible and optimized for retina displays.
Use the popular 'ExtraContent' technique to construct sophisticated page layouts. ExtraContent allows you to break-outside of the normal content / sidebar page configuration. Works with the ExtraContent code snippet and any ExtraContent stack.
Font Awesome Icons
Sytten includes the free version of the Font Awesome Icon library. This gives you instant access to several hundred quality icons. Font Awesome icons are optimised for retina displays and can be styled using CSS code.
Font Style Settings
Customize font styling with ease from a theme level, for greater consistency over multiple pages. Use a choice of web safe and semi web safe font faces, font size and line height settings. Plus change the color of written content, headings, links and other elements with simple color pickers.
Built On Modern Standards
Sytten is built with the latest technologies and newest standards. This means you get better browser compatibility, stronger security, excellent search engine optimization and improved website accessibility.
Includes Nivo Lightbox
Turn your images, embedded video, iFrames and other content in attractive popups that scale to fit any screen size. The opensource Nivo Lightbox effect works on all page types and does not require extra addons. See the user guide for setup information.
For RapidWeaver 6 users, the free or paid RWmultitool app makes it easy to safely edit the banner images supplied with Sytten or replace them with your own.
Mobile & Tablet Responsive
Mobile is the future. Sytten is fully responsive straight out of the box, and requires no additional configuration. This lets you build and deploy websites viewable across a wide range of screen sizes and device orientations.
seyDesign Simple Slider (S3)
Use our free seyDesign Simple Slider (S3) stack to effortlessly create beautiful and responsive image sliders. Easy to configure, no Flash or complicated code required.
Fewer theme files and excellent caching / consolidation support makes for faster webpages; requiring reduced disk space, energy and bandwidth. CSS animation effects need less processing power, compared to other methods. Dedicated printer stylesheets reduce paper and ink consumption, when pages are printed.
The current version of Sytten available is version 3.0, which got released on 13th May 2018. The RapidWeaver Addons Manager window will give you a clearer indication of what version you currently have installed on your computer.
All newer versions of Sytten purchased or updated from us since August 2016 support the update methods discussed below. If you are attempting to update an older version of the theme, you can buy the latest version of Sytten from this page. Try the free demo version first.
Automatic UpdatesRapidWeaver 7 and later has basic support for automatic update checking. You may see notifications (when you open RapidWeaver) that there are add-on updates pending installation. Update notifications are not supported for copies of RapidWeaver purchased from the Apple app store, Beta versions or in instances where the option to send usage data has been disabled.
WaterfallAdd a Waterfall page type to your RapidWeaver project. Allow it to run for several minutes to scan your installed themes and to check for updates. You can optionally let Waterfall download and install theme updates that are found. Waterfall does not work for older themes, simply because these lack the data Waterfall needs.
Your Paddle LockerLogin to your secure Paddle Locker here. The latest version of Sytten will be shown, if you purchased Sytten using Paddle. Download and install the updated theme. The updated version of Sytten will be installed alongside existing versions, so you can gradually migrate projects over.
What are the purpose of theme updates?Updates are periodically released to introduce new features, to improve compatibility with other RapidWeaver addons or web browsers and to fix bugs. Commonly we'll also update internal frameworks or libraries within in themes at the same time; like Bootstrap, jQuery and Font Awesome Icons.
Our themes are continually evolving. Users have a significant influence over the future direction that themes take. Therefore we greatly appreciate any feedback, feature requests and bug reports submitted directly to us via the support page.
Here are some useful resources and pointers to help you use Sytten and get the most from this theme.
The basic stepsThis theme requires RapidWeaver, by Realmac Software. It will not function with other publishing platforms like Dreamweaver, Drupal or Wordpress. We strongly recommend that you use RapidWeaver 6 or later. Apply any updates that are available for RapidWeaver. You can purchase RapidWeaver directly from Realmac Software, and upgrade pricing is available if you already own an older version of RapidWeaver. Click here for more information.
If you are new to RapidWeaver or you have not used RapidWeaver for sometime, you should definitely download and read the free RapidWeaver 7 PDF user guide. This will teach you all the basics of using RapidWeaver and how to overcome common problems. Getting started videos are also available.
Another resource well-worth bookmarking is the ThemeFlood Knowledgebase. Although the ThemeFlood Knowledgebase is mostly intended for users of ThemeFlood RapidWeaver themes, there's some terrific content; much of which is applicable to seyDesign themes.
Experimenting, downloading and installing the themeBefore committing to a purchase of this theme, please download the free demo version and install it onto your computer. The demo version is fully functional, with the exception of page navigation links being disabled and a credit in the footer. Automatic updates are disabled too. Free demo versions are generously provided so that you can fully explore the full choice of options available in the theme and test compatibility with other addons you may be intending to use.
Themes are downloaded as simple, compressed .zip files to your designated downloads folder. If your computer does not already unpack the .zip file, double-click the file in Finder to uncompress it.
Installing the theme can be done by dragging and dropping the theme file icon or dragging and dropping the theme icon onto your RapidWeaver icon, in the dock. RapidWeaver will normally display a message to say if the theme was successfully installed.
If you've not done so already, start a new website in RapidWeaver. Add a page and then continue to build-out your website with additional pages. Open the themes panel and click on your newly installed theme to apply it to the project.
Web browser compatibilityYou can expect webpages published using Sytten to display correctly in all modern, mainstream web browsers. These include popular desktop browsers like IE10, IE11, Edge, and newer versions of Firefox, Chrome, Safari and Opera. Compatibility is also offered with all recent versions of iOS and Android handheld devices too.
As always, the exact compatibility of completed webpages can be effected by other factors; like browser extensions an end user has installed, web server configurations and other code or addons that reside in the page.
Optimal settingsIn the RapidWeaver site setup, click the 'Advanced' button or tab. Make sure that CSS consolidation is enabled (checked). This is very important, because theme resources (like font icons and images) are pathed specifically to use consolidated files. Not enabling CSS consolidation would have the result of website assets missing and pages appearing broken. You will also find CSS consolidation improves website loading speed and web browser compatibility, when enabled. Always have CSS consolidation enabled.
If you intend to use theme features like breadcrumb trails, these can be enabled in the site settings too. We also recommend that cache-busting links, compression and tidied links are also enabled for optimal website performance. These features are exclusive to RapidWeaver 7 and above.
Theme style settingsseyDesign themes include numerous groups of style and color settings and Sytten is no different. These let you change the basic appearance of a theme, without needing to edit any complicated code. Spend sometime to explore the choice of settings available. You might be surprised at how capable your theme is!
In the RapidWeaver sidebar, you can set a 'master style'. A master style is one set of chosen settings that can be applied to one or more pages. If at a later time you change the master style, then those changes will take effect on all website pages that are selected to use the master style. Master styles are a useful way to quickly apply the same style to multiple webpages in a project.
Sometimes you may need to break-away from using a master style. For example, you might have an individual page where you wish to remove or display a sidebar. In such instances, you'll need to open the RapidWeaver Page Inspector and click onto the Styles tab. Uncheck the 'uses master style' option. At this point, all the theme style and color settings will become unlocked for you to edit on that specific page.
If you've created one or more theme styles that you really like the appearance of (and want to quickly apply to other pages or projects), you can also save these as 'saved style sets'. To do so, click the cog button in the styles inspector. Follow the onscreen prompts for naming and saving the style set. It will be available for you to reuse from the styles pull-down menu.
ExtraContentYou may notice that all our themes contain 'ExtraContent Containers'. As the name implies, this is quite simply a method of getting content into other parts of the page that are not normally editable in RapidWeaver. Some themes have a 'Preview ExtraContent Containers' theme setting (this is normally the very-last theme style option) to highlight the name and location of ExtraContent containers in your chosen theme. From here, you can use the simple HTML code snippet to target ExtraContent containers with your content. Or choose to use any number of addon stacks that support ExtraContent.
FreeStyle bannersWe often get asked "how do I place my own image in the theme header or banner"? This process should be a whole lot easier now and no longer requires the purchase of additional theme editing software. If you're using RapidWeaver 7, simply open the Page Inspector and drag-and-drop a suitable image into Banner Image drop well. The dimensions shown are just for guidance in our themes, and in theory any shape or size of image can be used. In most instances, the banner will resize automatically to fit the image (or can be adjusted in the theme style settings).
Themes often come supplied with either ten or twenty example banner images that you are welcome to reuse in your personal or commercial projects (as part of the theme license). Similar to the ExtraContent code snippet, you can use the simple FreeStyle code snippet to embed one of these numbered images, complete with an SEO friendly alternative text (ALT) attribute:
<div id="fs"> <img src="%pathto(images/editable_images/1.jpg)%" alt="The beach at sunset"> </div>
This basic code snippet can be entered into your main content area or sidebar (where you would normally put your website content). Do not enter it in the custom header box, as this is for entirely different purposes. The SRC attribute can be edited to use your own images added as RapidWeaver resources or images that are stored on your web server already.
If you're seeking to get something a bit more sophisticated setup (like a video or slideshow) the Stacks plugin might be easier to use. Browse websites like seyDesign Stacks, RWExtras or Stacks4Stacks and search for any stack elements advertised as having support for FreeStyle. Some like the dedicated FreeStyle stack or seyDesign Super Simple Slider are perfect for the job and are free!
Font Awesome IconsWe've already included Font Awesome Icons in this theme design, so there is no further code or configuration you need to perform. The Font Awesome library is frequently updated every couple of months with new or revised icon designs. We make an effort to to try any keep seyDesign themes updated with to the latest major releases of Font Awesome. If theme updates are published for other reasons, we will try to include the latest build of Font Awesome in the update too.
To use Font Awesome icons in your projects, navigate onto the Font Awesome website and view the choice of icons available. Click an icon you want to use and copy the HTML markup. This HTML markup can then be pasted into your page. Inline or custom CSS code can be used if you want to change the appearance of the icon.
A clever trick you may see us do in some theme designs is to display a chevron or caret icon after some navigation links, to denote the presence of subpages. This is accomplishable by pasting Font Awesome Icon markup after the page name, in the RapidWeaver sidebar.
<i class='fa fa-chevron-down arrow'></i>
We also include the 'arrow' class name, so that these icons in the navigation structure are excluded from other parts of the page, like the mobile toggle navigation, footer navigation links and breadcrumb trails. Using single quotes instead of double quotes in the markup ensures links will still display correctly in the sitemap. To prevent icons markup showing in browser titles, simply ensure each page of your website has a unique and proper browser title set in the RapidWeaver page inspector.
Using the Nivo Lightbox effectThe Nivo Lightbox plugin is a modern, responsive lightbox effect; which can confidently handle many different content types. The normal Nivo Lightbox plugin is a paid addon for Wordpress; however the source code is opensource (MIT licensed) and can therefore be freely incorporated into non-Wordpress sites. We've included the source code for Nivo Lightbox into Sytten, so everything is setup and ready for you to use.
The most common use for Nivo Lightbox is to display images. Oftentimes you may want to create a link to a large image and don't want that image to be loaded on a separate page, but rather on top of the current page. Here's how you can do this with Nivo Lightbox in Sytten:
- Add your image to RapidWeaver's Resources sidebar or upload an image to a directory on your web server.
- Highlight some text or an image and create a link that points to the image you want to lightbox.
- Before clicking Set Link, expand the Custom Attributes section.
- Click on the + button in the custom attributes section, and type in
classfor the Name column, and
lightboxfor the Value column.
- Now click on Set Link.
- Preview in RapidWeaver and see Nivo Lightbox in action!
The ThemeFlood knowledgebase has a more in-depth illustrated article about Nivo Lightbox, which covers some of the more advanced capabilities.
Unfortunately theme modifications, for as unique as each request can be, is a terribly time consuming task. Therefore it is not a service that we are able to offer you for free. If you require a theme modification, we can be hired to perform the consultation, coding and retesting required. A choice of fixed and hourly rates are available. Turnaround is normally quite quick. So please get in contact with us to chat about your requirements.
Getting in contactIf you have any further questions (which are not covered in existing resources like RapidWeaver 7 PDF user guide, the ThemeFlood Knowledgebase or the RapidWeaver forums) please get in contact via the seyDesign Support page. We aim to answer most questions daily, between Monday to Friday. To ensure your message can be dealt with in the fastest and friendliest manner, please remember to include any essential details; like the name / version number of the theme being used and a reply email address. Technical questions normally need to be accompanied with a link to your test page or a link to download your RapidWeaver project file in .zip format from a service like Dropbox.
This theme requires RapidWeaver. It will not work with other platforms (like Wordpress). We recommend you aim towards installing the latest version of RapidWeaver that your computer is capable of running (preferably RapidWeaver 6 or greater).
You may use this purchased theme an unlimited number of times in personal or commercial projects, request technical support and receive free updates in future.
This theme can be installed or synced onto all computers that you own. You are permitted to make archival backup copies of the theme.
You may not resell or make this theme available for download, remove copyright credits or license information.
The software is provided "as is" without any implied or expressed warranty of merchantability or fitness for purpose. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise arising from, out of or in connection with the software or the use or other dealings in the software.
By purchasing this theme, you agree that your purchase will be available immediately via digital download and that you waive your statutory right of withdrawal.
All purchases are final and refunds will not be provided (we physically cannot un-download or remove themes from your computer).
You are reminded to make use of the free demo versions already provided on the website, to fully evaluate themes for compatibility and suitability before purchase.
If you have questions that relate specifically to this theme, you should make contact via the support page. We aim to answer all messages within 12 hours, Monday to Friday.
If you require a faster response at weekends or during public holidays, please post your question(s) to the RapidWeaver forums, where a support volunteer may be able to assist you quicker.