Royal
Below you'll find some useful tips on using Royal.
In RapidWeaver, go “View > Page Inspector > General”, then drag and drop your image in the Override Site Banner input box.
1. In your SuperFlex 3 stack settings, enable the Import option.
2. In the Royale style options, Set the Banner Type to “SuperFlex 3 (Import)”.
SuperFlex 3 was a stack from Nick Cates Design and is no longer available.
You can add a functional Cartloom eCommerce cart or basket to your imported social icon set. * Tutorial requires a Cartloom eCommerce account, if you don’t have one, you can sign up here: https://cartloom.com
1. Add a cart or basket social icon. Paste one of the snippets below in RapidWeaver, “Settings > Code > Body”. For a shopping cart icon:
<a class="social-import social-cart cartloom-viewcart" href="#"></a>
For a shopping basket icon:
<a class="social-import social-basket cartloom-viewcart" href="#"></a>
2. Paste the Cartloom Javascript snippet below into RapidWeaver, “Settings > Code > Head”.
<script type="text/javascript" id="cljs" src="https://sellername.cartloom.com/cl4/cart.js"></script>
IMPORTANT: Change “sellername” in the snippet above to match your Cartloom seller name.
To style links with forward arrow icons, click a link to open the link panel, add a Custom Attribute, give it the name “class”, and value “social-forward”.
Paste the code below into your content area to create a line break. Highlight your code and apply “Format > Ignore Formatting”.
<hr>
In RapidWeaver, go Settings → General, then drag and drop your image in the Banner input box.
By default, Royale limits the site logo width to 100px, but here’s some CSS to paste into Settings > Code > CSS, to adjust the logo width to your needs.
@media screen and (min-width: 480px) { header.theme .shift #site_logo { max-width: 200px; } }
Then adjust the 200px value to best suit your site layout needs.
1. Add your audio file to the RapidWeaver Resource panel. For example, our audio file might be called “guitar.wav”.
2. Paste the code below into the content area
<audio preload="auto" controls><source src="%resource(guitar.wav)%" /></audio>
Highlight your code, go Format > Clear, then Format > Ignore.
Change “guitar.wav” to match your audio file name. Try to avoid filenames with spaces.
In preview, your audio player should now be ready!
Convert embedded video links from YouTube or Vimeo, to responsive video playback.
1. Copy the embed/share code from the video host.
2. Paste the embed code into the content edit area.
3. Highlight your code, go Format > Clear, then Format > Ignore.
In preview, your video should now be ready!
When downloading Royale, in the folder you’ll find the Royale Split stack. Using a Stacks page, you can add the Royale Split stack to create an “edge to edge” section within the main content area.
When using the Split stack, all following content MUST be contained within a Split stack to correctly inherit theme padding.
This feature is not compatible when using a theme sidebar, set the sidebar to “Hide” within the style options when using the Royale Split stack.
Use the theme styles as shown on the Royale preview site. You access these by going Inspector → Styles → Theme Styles, and choosing a preset title.
While the colors and style options can be presets, the banners unfortunately cannot be included.
1. Add your .mp4 video to the RapidWeaver Resources panel.
2. In edit mode, add the video snippet below to your content or sidebar area.
<video loop muted autoplay class="feature"><source src="%resource(my_video.mp4)%" type="video/mp4"></video>
3. Clear the code formatting on the video tag.
4. Change “my_video” to your video title (no spaces).
5. Go Inspector > Styles > Banner Type, choose “HTML or Embed Video”.
6. When in preview mode, you’re HTML5 video should now be playing!.
7. Drop in a fall back image banner for iOS devices.
1. In edit mode, paste your YouTube or Vimeo embed/share code into your RapidWeaver project page.
2. Clear the code formatting on the iframe tag.
3. Add a class name of “feature” to the iframe tag.
4. In the Royale style options, Set the Banner Type to “HTML or Embed Video”.
Switch to preview mode, you’re embed video banner should now be ready!
1. Double click a page link (left panel) to edit the page title.
2. Paste the snippet below in front of the page title.
<i></i>
When in preview mode, you should now see your featured desktop navigation links!
Last modified 10mo ago