blog-tutorial-post-template

Tutorials

HTML Element Settings

html settings

Element Tag – This field is where you will declare what type of HTML element to use. Accepts any valid HTML element (div, section, article, a, input, img, etc). Note: The element that is created will not be wrapped in Stacks’ standard div elements.

Classes – Optionally declare an unlimited amount of CSS classes. Each class should be separated by a space. This field does not accept special characters (# ” ? $ . etc) and is case sensitive.

ID – Optionally declare a single ID for the element. Your ID should be unique and not contain any spaces. This field does not accept special characters (# ” ? $ . etc) and is case sensitive.

Href/Src – Use RapidWeaver’s link window to set a link to a page or resource. This field is only visible if the element has been set to “a” or “img” element.

Attributes – Optionally add any custom attribute. The attribute should be added in the following format with the equal sign and quotation marks added: attribute-name=”attribute-value”

Content Type – “Wrap” will allow you to nest other HTML elements and stacks inside this element. “HTML text” will allow you to type in text, which is useful if your element is a header or paragraph tag. In the image below, the top element is set to “Wrap” while the bottom is set to “HTML text”. The element type will display in the Stacks’ editor as well as the assigned class names to help with organization.

breakdown

 

CSS Settings

CSS Only / Remove Element – Enable this option if you do not wish to create a new HTML element but declare a CSS Rule instead. Once enabled the HTML element will be removed and the CSS Selector Title will display in the Stacks’ editor. This title will only display in edit mode and wont add anything to the actual published HTML. All of the declared CSS will be added the the current page’s Stacks CSS file.

Element Selector – By default this field is set to “[this]”. This value will automatically apply a random generic classname to the element and apply all of the non-default CSS to this element only. To apply the non-default CSS to elements with a specific class you can create a unique classname.

To create a classname type a period ( . ) into the “Element Selector” field, this period stands for “class”. Follow the period by typing any unique name. The name must begin with a letter (a–z) and accepts more letters, numbers, hyphens ( – ), and underscores ( _ ) with no spaces in-between. The name must also be at least 2 characters long.

Good Examples:

.myClass
.my-class
.my_class
.myclass2

Incorrect Examples:

.my class (has a space)
.2myClass (begins with a number)
.&my-class (contains unsupported "&" character)

You can then add this classname to any HTML element’s “Classes” field to have the CSS apply to it. Since this field is specific to classnames you will not need to add the class symbol (or period symbol) to the name when entering it into this field. Each classname you add should be separated by a space.

Note: If you leave the “Element Selector” field blank none of the CSS rules will be applied.

Single class example:

classnames

 

An advanced selector example with IDs and element selectors:

detailed name

CSS Rules – An explanation of every CSS rule will not be detailed in this tutorial. We recommend checking out w3schools for a property by property explanation.

CSS Properties

Custom Rules and Media Queries

custom feilds

If there is a rare CSS rule that is not listed in the settings panel you can add it to the “Custom Rules” fields. Additionally if you need to add an “!important” tag to a specific field you can declare it here as well. To do so, list the rule title followed by a colon (:) and then the value. You will not need to add a semi-colon(;) to the end unless you wish to declare a second rule in the same field (good for copy and pasting large amounts of CSS rules).

Media queries can be declared for responsive purposes. To add a media query size declaration first type in “and” followed by the rule encased in parenthesis. You can add multiple size declarations in a single field as long as each is prefixed by the word “and”. For example, “and (max-width: 1000px) and (min-width: 600px)” can be typed into the same field as opposed to one in each of the two fields.

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