blog-tutorial-post-template

Tutorials

Setup

Add the Webfont Helper stack to the stacks editor. Then simply select the font you want to use and drag/drop it anywhere outside of the Webfont Helper stack.

Important: Do not publish your project with the Webfont Helper stack still in the editor. While this will certainly not cause any harm to your project/website it can cause an insanely long upload time as there are over 1000 font files included in this stack. We have broken each of the 45 fonts into separate stacks that can be dragged and dropped outside of the Webfont Helper stack to use. Once you have chosen fonts you want to use, delete the Webfont Helper stack from the editor and only the selected font files will be uploaded.

Each individual font stack has its own settings for implementation.

Manually

By default you must apply the font manually by using any of the highlighted font titles in a “Font-family” field inside of another stack. You may need to add quotation marks (“”) around the title depending on the stack you are using.

If you are familiar with CSS you can use the titles in the “font-family” rule. The example below will apply the font to the entire webpage.

body {
  font-family: “Nunito”;
}

Headers, Text, Headers & Text

There are options to automatically apply the font to Headers, text, or both.

Note: Some stacks may overwrite the font if they have their own font settings.

Wrapped content

When set to apply to wrapped content, only text content placed inside of the font stack will have the font applied to it.

Custom CSS Class

There is also an option to create a custom class if you have the ability to add classes to your elements.

GDPR Compliance

Google Fonts fall into a grey area with the new GDPR regulations and most professionals suggest you do not load fonts externally to be safe. This stack allows you to use some great fonts hosted on your own server without linking to Google.

More info: https://www.lifehacker.com.au/2018/06/how-to-be-gdpr-compliant-if-you-use-google-fonts-on-your-website/

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software