Space Age

Page Settings

Learn how to customize settings that effect your entire page here

Customization Options

  • Colors
    • Content Text
    • Content Background
    • Accent (Buttons, Links, etc.)
    • Accent Text (Button text colors)
  • Toggle
    • Sticky Menu Button
    • Transparent Navigation Background

Page > Colors

There are 4 different colors that you can customize, which will affect your entire page.

  • Content Text
  • Content Background
  • Accent
  • Accent Text

Content Text

This option will simply change the color of the text in the content area of the page. It will not affect the color of links.

Content Background

This option changes the background color of the content area, underneath the header, like so:

Accent

Th Accent color option will change the color of Links, Buttons, Input Highlights, and other generally stylistic accents on the page.

Accent Text

The Accent text color option is used to change the text color of accented elements on the page like buttons. For example, if you change your Accent Color to a light color like violet, then you would want to change the Accent Text color to something darker, so that it will be easier to see.


Page > Font Family

This option changes the font family for the entire page, including the Title, Slogan, and all text within the content area.

We made a single option for all of these areas to keep your site looking great aesthetically. It’s considered bad practice to use multiple fonts on a single page, as it can make it hard for the users eyes to read.

There are 10 Font Family presets that you can choose from:

  • Raleway
  • Open Sans
  • Abril Fatface
  • Arvo
  • Josefin Slab
  • Lato
  • Old Standard TT
  • Playfair display
  • Ubuntu
  • Vollkorn

Header Settings

Learn how to configure your header styles

Customization Options

  • Background
  • Text Alignment
  • Logo
    • Size
    • Animation

Header > Colors

There are only a few color options that you can change for your header. We tried to keep it simple to make sure that your theme looks great no matter what. The color options that you can change are:

  • Title & Slogan
  • Title & Slogan Highlight
  • Custom Background Color

You can ignore the third option, Custom Background Color as we will cover this in the next section of the tutorial.

For now lets focus on the first two options, Title & Slogan and Title & Slogan Highlight:

Title & Slogan

This color option will simple change the text color of your Title and your Slogan. We’ve kept them both the same color for aesthetic correllation.

Title & Slogan Highlight

This color option will the rectangular area that is highlighting the Title and the Slogan.


Header > Background

This option will allow you to change the background of the header section on your page. There are three specific options to choose from:

  1. Choose between 1 of 7 included space-style presents
  2. Use a custom background color
  3. Use Rapid Weavers’ banner image feature

Using one of the space-style presets

Using the included presets are extremely simple. All you have to do click on the Header > Background dropdown and choose one of the included options labeled “Space Preset”

Using a Custom Background Color

If you’d like to use a custom background color, first click on the Header > Background dropdown and choose the option labeled “Use Custom Background Color”

Next, you can choose the color that you would like to use by clicking on the color picker under the Header > Colors section.

Now you will see that your page’s header has changed to the custom background that you’ve selected. Awesome!

Using a Rapid Weavers Banner Image Feature

If you’d like to use a custom banner image through Rapid Weaver, first go to the General area under Settings.

From here you can click on the area that says Banner Image:

Once you have an image selected, it will look like this:

After this, you can go to your page, click on the Header > Background dropdown menu, and change it to the User Banner Image option.

!!! Note it is very important to set your banner image in Rapid Weaver before changing the option to User Banner Image on your page.

Alas, you should see your custom banner image as the background of your page header:


Header > Text Alignment

This option is allows you to choose the alignment of your header Logo, Title, and Slogan all at once. By default they are aligned to the center of the page, but you can also choose to align them to the left or the right.

Align Center

Align Left

Align Right


Header > Logo > Size

This option is used to specificy whether your header will have a Rectangular logo image, or a Square one. This allows your page to have the best fit for your logo.

You can set your sites logo image in the General section of Rapid Weaver, similar to how you set up your banner image.

Next, you can go to your page and click on the Header > Logo > Size dropdown, to choose the proper size.

There are only two options, so simply choose the option that best fits your logo images shape.

Rectangular

Square


Header > Logo > Animation

This option will allow you to add a special animation to the logo image in your page’s header. There are 10 option to choose from:

  • Bounce
  • Flash
  • Jello
  • Pulse
  • Rubber Band
  • Shake
  • Swing
  • Tada
  • Wobble

You can select the animation by clicking on the Header > Logo > Animation dropdown, and choosing the animation that you’d like.

By default the animation is set to none

If you’d like to choose an animation, change this to one of the specified animation names.


THE END

Congrats! If you’ve made it this far, you should fully understand how to customize your page’s header. Easy eh?

Navigation Settings

Learn how to customize your navgiation styles here

Customization Options

  • Colors
    • Text
    • Background
  • Toggle
    • Sticky Menu Button
    • Transparent Navigation Background

There are two color options that you can specify for your navigation. Changing this two colors can give your page and your navigation a whole new look.

The colors you can change are:

  • Text
  • Background

Text

Changing the text will change the color of all text within your navigation menu.

Background

Changing this option simply changes the background of your navigation to whichever color you choose.


There are two options that you can toggle for the navigation:

  • Sticky Menu Button
  • Transparent Navigation Background

This option allows you to choose whether or not your navigations menu button will be fixed to the top of the page, or whether it will follow the user as they scroll down the page. By default, the menu button is set to follow the page as it scrolls.

  1. (Checked) Menu Button follows the user as they scroll

  1. (Unchecked) Menu Button Stays at the top corner of the page, even on scroll

Transparent Navigation Background

This option allows you to choose whether the background of your nivagation will be see-through or not.

  1. (Checked) Navigation background is transparent allowing you to see the page contents underneath

  1. (Unchecked) Navigation background is completely opaque


THE END

Great job! You now know how to customize your navigation menu and make it awesome.

Menu Button Settings

Learn how to customize our Menu Button Styles here

Customization Options

  • Colors
    • Text
    • Border
    • Background
  • Icon
    • 3 Bars
    • 3 Bars Left
    • 3 Bars Centered
    • Plus
    • Plus Circle
    • Plus Circle Outline
    • Grid
    • Dots Horizontal
    • Dots Vertical
    • Cog
  • Shape
    • Circle
    • Square
    • Rounded Square

There are 3 specific color options that you can customization with the menu button:

  • Menu Button text color
  • Menu Button border color
  • Menu Button background color

Text

The text color option will change the color of the icon inside of the menu button.

Border

This will change the color of the border around the Menu Button.

Background

This will change the background color of the Menu Button, like so:


This dropdown menu allows you to choose which icon you would like to show up inside of your Menu Button. We’ve included 10 different icon presets to choose from.

 

menu 3 Bars

 

sort 3 Bars Left

filter 3 Bars Centered

add Plus

add_circle Plus Circle

add_circle_outline Plus Circle Outline

apps Grid

more_horiz Dots Horizontal

more_vert Dots Vertical

settings Cog

 

You can change the icons using the Menu Button > Icon dropdown menu like so:


This option is used to set the desired shape of the Menu Button, There are 3 options:

Circle

Square

Rounded Square

These options can be changed with the Menu Button > Shape dropdown menu.


THE END

You’re amazing. Now you’re an expert at customizing your pages Menu Button~~ ^_^

BLOG SETUP

Learn how to make your blog page look great with the Space Age theme

Setting up your blog page to look just right

Out of the box, Space Age works perfectly with Rapid Weavers Blog plugin, though there are a few recommended tweaks that can be made in order to make your blog page look even better with this theme.

Recommended Changes

  • Tags
  • Dates

Tags

If you decide that you want to enable tags for your blog page in Rapid Weaver

Then you will find that the default separate will be set as a comma ( , ) like so:

Which will cause the tags on your blog page to look like this:

This is fine, but stylistically it doesn’t look that great.

We recommend change the default separator of your tags from a comma ( , ) to a single space, like so:

Which will create a much more appealing and simple look on your blog, like so:

This is not absolutely necessary, but we think it adds a more clean look to the blog page, rather than the default value in Rapid Weaver.


Dates

The default date style in Rapid Weaver is also not that appealing stylistically. We recommend the follow Date formate for your blog page:

Which would end up looking something like this:

This is a subtle change, but we think it makes all the difference in making your page look cohesive and stylish.


THE END

PHOTO ALBUM SETUP

Here you will learn how to setup your photo album to make it look amazing

Setting up your Photo Album to look like our example page

Out of the box, the default photo album settings for Rapid Weavers Photo Album plugin will not make your album look like our example page. Luckily, you’ll only need to change a few settings to get it looking amazing, like ours.

Recommended Changes

  • Change Slideshow to Gallery
  • Sizes and Captions
  • Change the Album Title Color (for light header backgrounds only)

Change Slidedshow to Gallery

By default the album type option for RW’s Photo Album plugin will be set to “slideshow”, which isn’t that impressive.

We recommend changing this to “Gallery” which will make your page display a gallery of photos like on our example page:


Sizes and Captions

We also recommend 2 more customizations.

  1. we recommend customizing the “Thumbnail Size” to a size that suits your needs, and checking the “Use Squre Thumbnails” option.
  2. We recommend that you change the “Captions” option to “Everywhere”, which will make it so that you can have the cool caption popups in our example photo album.


Change the Album Title Color

ONLY NECESSARY FOR LIGHT HEADER BACKGROUNDS

This last tweak is only for those who are using the Custom Header Background option for your photo album page.

The default album title color for Space Age’s photo album is white, if you choose to use a lighter background color for your photo albums header, then you might find that the white colored text does not show up very well.

For this case, we’ve provided a color option in the Photo Album Styles section of your pages theme settings.

If you decide that you want to use a very light custom background color for your photo albums header, then we suggest setting this color option to something darker, in order to make the text more visible, like so:


THE END

That’s it! Your photo album page should be looking super stylish, just like our example page.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Omnicon

Menu Sub Titles

To add a sub title to a top level menu page, double click the page title in the “Pages” section (left side of the RapidWeaver window).

Edit Title

After the title of your page (“Home Page” in this example) type in a forward slash “/”. This will let Omnicon know to separate the next couple of words from the title of the page and create a subtitle from it. After the forward slash add a sub title for your page.

add subtitle

 

Note: Sub titles are not supported in sub menu pages (second level menu items).

Menu Icons

To change the icon for a top level menu page, double click the page title in the “Pages” section (left side of the RapidWeaver window).

Edit Title

If you have not added a sub title to your page and do not wish to add one, type in 2 forward slashes “//” after your page title. If you wish to add a sub title (tutorial on how to do so above) or have already added a subtitle, type in one forward slash “/”. This will let Omnicon know that what ever you place after this second slash will be the icon you want to use.

You can find a list of usable icons in the cheatsheet file (included when you downloaded Omnicon). After you find the icon you want to use, just type it’s classname after the second forward slash. (You can also refer to this page: http://ionicons.com/ for a list of usable icons and their classnames)

ion icon classname

In my example I will be using a lightbulb and it’s classname is “ion-ios-lightbulb”.

Icon example input with no sub title:

add icon no subtitle

Icon example input including a sub title:

add an icon

Press enter to save your changes. When you preview your page you will see something like this:

example menu item

 

Note: You can also use Font-Awesome Icons. Just be sure to add the Font-Awesome Stack or Font-Awesome as a resource. The only difference in set up is you will need to type “fa fa-” (thats two “fa”s and a dash) before the Font-Awesome classname you want to use. Font-Awesome classnames can be found at http://fontawesome.io/icons. Example:  To use the “bus” icon you would type “fa fa-bus” after the second slash.

By default RapidWeaver will grab whatever you type into the page title and use it as the browser title (This is the title that displays in the tab of your page visitor’s browser, in the Site Map page, in the breadcrumb trail, in Google search results , and also in the themes own search results). You wouldn’t want your browser title to display as “Home Page / Subtitle / ion-lightbulb”. So in order to set your own browser title you will need to go to your Page Inspector > General Settings tab > Browser Title and type in the page name as you want it to display.

change your browser title

Note: Icons are not supported in sub menu page titles (Second level menu items).

Banner Image

To add a banner you can insert an image anywhere you like (Anywhere in a stacks page or in the sidebar for a non-stacks page). Once you have added your image, click the add link button.

link button

In the link settings menu add a new Custom Attribute titled “class” with the value “banner-image” then click “Set Link”.

banner image

Omnicon will now grab this linked image and move it to the formatted banner spot.

Slider Stacks

slider stacks

To set up the slider, first drag and drop the  Slider Stack into the Stacks editor.

Then drag and drop the Slide Stack into the “Drop stacks here” section located underneath the heading “Add Slide Stacks Below”. Repeat this step until you have as many slides as you want to use.

Now select one of the Slide Stacks and in the settings panel on the right side of the RapidWeaver window, underneath the section labeled “Slide Settings”, click the button titled “Browse”. Locate the image you wish to use. Repeat this step for all of the slides you have added.

You also have options to change the transition animations for each slide as well as add caption settings. To change a caption just double click the caption text.

Column and Row Stacks

row and column stacks

You can use these included stacks to set up responsive columns. First, drag and drop the Row stack into your stacks page. You will be placing the Column stacks inside of this stack. Row stacks have two settings “Type” and “Column Align”. We will cover the “Column Align” in a bit, but first, lets look the the setting “Type”. This allows you to declare how many columns you want to display next to each other,  by default it is set to display 3 columns. For this example we will be using 3 columns so we will leave this setting on it’s default value. Next we need to drag in one Column stack for each of the numbered column sections.

Note: Column stacks must always be placed inside of Row stacks to function correctly. 

column and rows

 

Now you can add content to each Column stack’s “Drop stacks here” section. In my example I will be adding titles and text.

The Second setting “Column Align” allows you to change the alignment of all the contained Column stacks. By default the columns will be aligned to the center of the content with open space to the left and right. You also have an option to left align (open space to only the right of the content) or have the columns stretch to fit the entire width of the content (no space left or right of the content).

Each Column stack has its own settings for how wide you would like them to display at the different breakpoints (certain widths that correspond to different screen sizes, from mobile screens to large desktops). This way you can control how the columns will display on each individual device.

column stack settings

These values are arranged in numbers from 1 to 12. For example, 2 stands for 2/12 (or 1/6 20% of the entire row’s width ) and 12 stands for 12/12 (or 100% full width). Since in my example I want to display 3 columns in desktop browsers I will need to make sure each Column stack’s “Large Desktop” and “Desktop”  settings are set to “4 = 1/3″. This means each column will be 4/12 -> 1/3 (or 33%) wide on those devices.

Desktop browser example:

3 column

Since tablet screens are considerably smaller than desktops’, I have increased the value for the first to columns to be “6 = 1/2″ (or 50%) wide. These two columns will still display next to eachother. The 3rd column stack I will set to “12 = 1/1″, that way it will display at full width beneath the other two columns.

Tablet browser example:

collapsed 3 column

 

Finally I will set each Column “Mobile” Setting to “12 = 1/1″, that way they will each display at full width on small mobile screens.

mobile example

Lightbox Images

By default, any image you add to a “Photo Album” page (with the Album Type set to “Gallery”) will automatically open in a lightbox.

lightbox example

If you would like to use the lightbox on a page other than the Photo Album page, just add the image anywhere you like. Once you have added your image, click the add link button.

link button

In the link settings menu add a new Custom Attribute titled “class” with the value “lightbox” then click “Set Link”.

link settings lightbox

That’s all there is to it. If you would like to change the images display title in the lightbox just change its “alt tag”. By default it will show the file’s name as the title.

alt text example

Icons

Omnicon comes with a cheatsheet file (You can also find it here: http://ionicons.com/cheatsheet.html) that will give you selectable icons that you can copy and paste into RapidWeaver. Just find the icon you want to use and copy the icon found in the “Selectable” field.

selectable icon

 

Once you have copied the icon, just paste into any styled text field (text editor, text stack, sidebar). You can then format it just like you would format any other text using RapidWeaver (change color, font-size, etc).

Styles

Styles

Styles Breakdown

Menu & Sidebar Mode (v1.5.0+): Choose between 3 different display modes. “Visible” is default and will show the menu and sidebar on the left and right of the content. “Off Canvas” will hide the menu and sidebar and they will only be visible when they have been toggled. “Off Canvas / Fixed Topbar” is the same as “Off Canvas” but will keep the Topbar stuck to the top of the browser window so you always have an option to open the menu or sidebar no matter how far down the page you have scrolled.

Theme Interface/Icon Size: Choose between 3 different size settings for the Menu Icons/links, toggle buttons, and topbar.

Theme Title Font: Changes the font of all headers, including the site title.

Theme Body Font: Changes the font for all the text on the page, excluding headers.

Menu Style: Adjust the display styling of the menu. ‘Lines(Dark)’ will add subtle darkened dividing lines between the menu items. ‘Lines(Light)’ will add subtle lighted dividing lines between the menu items. Detailed will add detailed dividing lines between the menu items as well as add a textured background. ‘Custom pattern’ will remove the dividing lines and allow you to use the advanced styles CSS snippet (more info below) to add your own background pattern (by default it will use a step pattern until you define your own).

Logo Fit: Choose how your logo will display. If you have a small square logo and want to use text for the title the option “Square w/ Text Title” will work best. The “Fill” option is useful if your logo image contains the title and you do not need to use text, note however that the logo image will shrink when the menu is collapsed. “Fill and Clip” is useful if your logo image contains the title and has a small square logo on the left of the title, when the menu is collapsed the images will not shrink but part of it will be hidden on the right side.

Menu Toggles:

  • Start Menu Open On Desktop: Enable to have the menu show fully expanded when visitor’s browsers are at least 1280px wide.
  • Hide Home Page in Menu: Enable this to hide the home page in the menu. Since the logo already acts as a homepage link, some users may find the home page link redundant.
  • Fullsize Logo: Enable this to hide your site title and display your logo at full width of the menu. The logo will automatically shrink when the menu is collapsed. When disabled, the logo will only fill the same amount of space an icon would.
  • Fixed Position: Enable this to have the menu stay in place while the page is scrolled.

Topbar Style: Adjust the display styling of the topbar. ‘Lines(Dark)’ will add subtle darkened dividing lines between the toggles. ‘Lines(Light)’ will add subtle lighted dividing lines between the toggles. Detailed will add detailed dividing lines between the toggles as well as add a textured background. ‘Custom pattern’ will remove the dividing lines and allow you to use the advanced styles CSS snippet (more info below) to add your own background pattern (by default it will use a step pattern until you define your own). ‘Collapsed’ will place the topbar over top of a banner or slider if you have one on the page.

Topbar Toggles:

  • Hide Search Bar:
  • Show Site Title in Mobile:

Content Styles: Adjust the display styling of the content. ‘Lines(Dark)’ will add subtle darkened dividing lines between the footer and content. ‘Lines(Light)’ will add subtle lighted dividing lines between the footer and content. Detailed will add detailed dividing lines between the  footer and content as well as add a textured background. ‘Custom pattern’ will remove the dividing lines and allow you to use the advanced styles CSS snippet (more info below) to add your own background pattern (by default it will use a step pattern until you define your own).

Content Toggles:

  • Stacks Page: Enable to remove padding from the content. Leave this disabled if you are not using a stacks page.
  • Show Site Slogan: Enable this to place your Site Slogan centered above the content.

Sidebar Style: Adjust the display styling of the content. ‘Detailed’ will add a textured background. ‘Custom pattern’ will allow you to use the advanced styles CSS snippet (more info below) to add your own background pattern (by default it will use a step pattern until you define your own).

Sidebar Toggles:

  • Start Sidebar Open On Desktop: Enable to have the sidebar show fully expanded when visitor’s browsers are at least 1280px wide.
  • Fixed Position: Enable this to have the sidebar stay in place while the page is scrolled.

Footer Toggles:

  • Alight Left: Enable to align the copyright text and breadcrumbs right to match any left aligned content.

Searchbar – Custom Page Summary

By default, the search function will display the first 60 words as the description for each page in the search results.

page description text

Below is a snippet that you can place inside any text area to mark where you want the search results to grab the description from (Stacks and non-Stacks pages).

<div class="live-search-description"></div>

To change the description on any page, drag and drop the snippet into a text area above the text you want to display as the description for that page. Then highlight the snippet and choose “Ignore Formatting” from the Format drop down menu.

ignore formatting

In the example below, I have placed the Description Marker below the first paragraph and above the second. Now when this page shows up in the search results it will ignore the first paragraph and display the text from the second paragraph, highlighting any terms found in the description.

example description marker

Advanced CSS Styles (Copy/Paste & Edit)

Omnicon comes with a CSS snippet (also found below) that you can use to get advanced control over some of the theme’s styles.

advanced css snippet

This snippet can be placed into the Page Inspector > HTML > CSS section if you want to apply the styles to a single page:

snippet in page inspector

or inside the Settings > Code > Site-wide CSS section if you would like to apply the styles to the entire website:

snippet site wide css

/* Omnicon Advanced CSS
Place this snippet in the Page Inspector > HTML > CSS section if you would like to modify a single page. If you would instead like to modify all pages together, place this snippet in the Settings > Code > Site-wide CSS section.
===============
SPECIFIC ICON COLORS

Use Hexadecimal Color Values. These values can be found in the Color Picker > Color Sliders > RGB Sliders section. The value will appear after you have selected the color you wish to use.

Example:
To change the first page’s icon color from red (#DC5350) to teal (#19979) you would change #icon-1’s “color: #DC5350;” to “color: #19979;”
================ */
#icon-home {
color: #FFFFFF;
}
#icon-1 {
color: #DC5350;
}
#icon-2 {
color: #F07B30;
}
#icon-3 {
color: #F9D246;
}
#icon-4 {
color: #5DB862;
}
#icon-5 {
color: #3795CF;
}
#icon-6 {
color: #842FC4;
}
/* ===============
TOGGLE ICONS

Refer to the Icon Cheatsheet to get the correct “CSS Content” values for the icon you want to use. You may also adjust the "font-size" pixel (px) value to adjust the size of the icon.

Example:
To change the Sidebar Toggle icon to the "ion-android-options" icon, "content: '\f396'" would become "content: '\f39d'"
================ */
#menu-toggle:before { 
content: '\f394';
font-size: 24px;
}
#sidebar-toggle:before {
content: '\f396';
font-size: 24px;
}
/* ===============
BACKGROUND TEXTURES

Drag and drop a pattern image into your "Resources" section (located on the left side of the RapidWeaver window) to use as a background pattern. You can find some great free patterns to use at http://subtlepatterns.com

Example:
If I have a pattern image titled retina_wood.png in my Resources section and I want to use it for the menu background I would replace #menu's "RESOURCE_NAME.jpg" with "retina_wood.png"
================ */
#menu {
background-image: url(%resource(RESOURCE_NAME.jpg)%);
}
#topbar {
background-image: url(%resource(RESOURCE_NAME.jpg)%);
}
#sidebar {
background-image: url(%resource(RESOURCE_NAME.jpg)%);
}
#content {
background-image: url(%resource(RESOURCE_NAME.jpg)%);
}
#footer {
background-image: url(%resource(RESOURCE_NAME.jpg)%);
}
/* ===============
CONTENT WIDTH
To change the content width adjust the "max-width" pixel (px) value. If you would rather your content be left aligned instead of centered, remove the "margin: 0 auto;" line of CSS code.
================ */
#content .container, #footer > div {
max-width: 960px;
margin: 0 auto;
}
/* ===============
FONT WEIGHT
To change the font weight adjust the number value to one of these values: 100,200,300,400,500,600,700,800,900 (100 is very thin, 400 is normal, and 700 is bold)
================ */
/* Titles */
h1, h2, h3, h4, h5, h6 {
font-weight: 200; 
}
/* Content */
body, p, span {
font-weight: 200;
}

Advanced HTML Snippets (Copy/Paste & Edit)

These snippets are for advanced users who feel comfortable working in HTML. Each snippet should either be placed inside of an HTML stack or in a text field with “Ignore Formatting” enabled.

Screen Shot 2016-01-21 at 9.29.09 AM

Pay close attention to the quotation symbols. RapidWeaver’s auto formatting will sometimes change straight quotation symbols  into curly ones . Curly quotes do not work inside HTML code. In order to replace the curly quotes with the correct straight quotes you can select and delete them and then retype them in. Alternativly, whenever you apply “Ignore Formatting” to HTML code it will automatically change the curly quotes to straight quotes.

 

Icon

icon email example

<i class="icon ion-email"></i>

 

Unordered List with Icons and Links

link list

<ul>
  <li><a href="http://www.LINK-ADDRESS-HERE.com"><i class="icon ion-checkmark"></i> LINK TITLE HERE</a></li>
  <li><a href="http://www.LINK-ADDRESS-HERE.com"><i class="icon ion-checkmark"></i> LINK TITLE HERE</a></li>
  <li><a href="http://www.LINK-ADDRESS-HERE.com"><i class="icon ion-checkmark"></i> LINK TITLE HERE</a></li>
  <li><a href="http://www.LINK-ADDRESS-HERE.com"><i class="icon ion-checkmark"></i> LINK TITLE HERE</a></li>
  <li><a href="http://www.LINK-ADDRESS-HERE.com"><i class="icon ion-checkmark"></i> LINK TITLE HERE</a></li>
</ul>

 

Pop-up Message

pop up message

<div class="notify">Your message here.</div>

 

Pop-up Error Message

pop up error

<div class="notify error">Your error message here.</div>

 

Pop-up Success Message

Pop up success message

<div class="notify success">Your success message here.</div>
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Sweep

Sweep is a unique RapidWeaver theme that allows you to build one page websites. In order to make this possible we have created simple to use stacks that you can use to make the different sections of your one page website.

Note:  Sweep requires that you have the Stacks Plugin. More info about stacks here.

Adding Sweep Page Stacks

After you have created a new Stacks page. Open the Stacks library and locate the “Sweep Page” stack.

sweep in the library

Drag and drop the “Sweep Page” stack into the Stacks editor to add a new section to your one page website.

sweep page

Once the stack is in the editor you will see a section at the top that reads “Page Title”. Double click this section to change the title. This title is what will display in the navigation menu.

Screen Shot 2015-11-30 at 9.49.51 AM

 

In the “Drop stacks here” section located under the title add any other stacks (text, images, other 3rd-party stack, etc) to build and add content to your Sweep section. Then repeat these steps to add more sections to your website. Each ”Sweep Page” stack has additional settings (found in the sidebar) that you can customize.

settings

 

Background Image Settings

Image Fit - Adjust how the background image fits into the browser window.

Tile Image - This option will set the background image to repeat which is useful for texture images. Note: You will want to set the “Image Fit” option to “Actual Size” if you enable this option.

Animation Settings

Animation - This option will let you choose between 17 animations that will effect how the current page will animate out when the next page is navigated to.

Easing - This  option allows you to adjust how quickly/slowly the beginning/end of the animation runs.

Speed - This sets the width of the caption content (in pixels) if you have added any.

Scroll Arrow Settings

Add Scroll Arrow – Enabling this option will force a navigation arrow to appear on the page. By default, the scroll arrow is automatically be added to pages who’s content needs a scroll bar. This is to prevent visitors from accidentally going to the next page when scrolling to the bottom of the current page.

Arrow Position – This option allows you to place the arrow on the bottom, left, or right of the window. This option also effects the automatically added scroll arrow.

Color – This will adjust the color of the scroll arrow. This option also effects the automatically added scroll arrow.

Adding An Image Slider or Slideshow

Open the Stacks library and locate the “Sweep Slider” stack.

sweep slider stack

Drag and drop the “Sweep Slider” stack into a “Drop stacks here” section found inside of a “Sweep Page” stack.

Screen Shot 2015-11-30 at 9.49.51 AM

sweep slider added

 

In the settings menu on the left select the number of slides you would like to display. Then simply drag and drop your images into the “Drop an image here” sections. You can optionally add text stacks to the “Drop stacks here” sections to add captions to each slide.

There are some additional settings that you can use to customize your slider.

sweep slider settings

Autoplay – Enabling this option will make the slider automatically transition between the slides.

Transition Speed – This option sets how fast (in milliseconds) the transition animation will play.

Enable Bullets – Enabling this will display a navigation dot for every slide at the bottom of the slider. If a user clicks on one of these dots the slider will navigate to the corresponding slide.

Enable Arrows – Enabling this will display navigational arrows to the left and right of the slider.

Max-width – This sets the width of the caption content (in pixels) if you have added any.

 

Adding Extra External or Internal Links to the Navigation Menu

Open the Stacks library and locate the “Sweep External Link” stack.

external link stack

Drag and drop the “Sweep External Link” stack either at the very top or very bottom of your stack editor.

external link

Click the “Set Link” button in the sidebar settings to set where you would like the external link to navigate to.

set link

Using Font-Awesome Icons in the Navigation Menu

If you would like to use Icons instead of text or bullets in your navigation menu just place the Font Awesome code in-place of the page title. For example if I wanted to use a home icon instead of the word “Home” in my menu I would replace the title with the code below.

1
<i class="fa fa-home"></i>

I would then highlight that code and select “Ignore Formatting” from the Format drop-down menu. For more information on Font Awesome’s Icons and for a complete list of icons vist: http://fontawesome.io/examples/

NOTE: Sometimes the editor will change your ” straight quotation marks into ” curly quotation marks. The curly quotation marks will cause the menu to not work. To change them from curly to straight just delete the quotes and retype them.

How To Enable Lightbox on an Image

Step 1: Navigate to your Page Inspector > Styles Menu and enable the Lightbox by selecting checking the ‘Lightbox On’ checkbox under the Toggles heading.

inspector -> iehjfdjg -> aehagchc

Step 2: View your project in Edit mode by clicking the edit button.

fhcjhjgg

Step 3: Import or drag and drop an image into your editor.

Step 4: Double click the image and in the popup menu change the Filename to something that includes the word ‘lightbox’. You can also change the Alt Tag to set what will display as a caption for the image.

Light Box


How To Add A Button

Step 1: Type in your desired button text into your editor and highlight the text.

ButtonText

 

Step 2: click the Add link button.

cechgeed

 

Step 3: Add a link to where you would like the button to navigate to and then add a ‘class’ with the value ‘button’.

ebejjeeg

 

Step 4: Click ‘Set Link’ and you are done.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Affero 2

How To Set Up the Slider

Step 1: Navigate to your Page Inspector > Styles Menu and enable the Slider by selecting ‘Slider’ under the Banner Setting option.

inspector  -> iehjfdjg -> aacgbdbc

Step 2: View your project in Edit mode by clicking the edit button.

fhcjhjgg
Step 3: Import or drag and drop an image into your editor.

Step 4: Double click the image and in the popup menu change the Filename to something that includes the word ‘slide’.

ficbecib

 

Step 5: Repeat steps 3 and 4 until you have as many images you want to use in the slider. Affero’s Slider will now do the rest! The order you place your images into the slider, is the order the slider will display them.

 


How to Add Captions to Your Slider

Step 1: View your project in Edit mode by clicking the edit button.

fhcjhjgg

 

Step 2: Copy and paste the code below into your editor. Step 3: Highlight the code you pasted and select “Ignore Formatting” from the Format drop-down menu.

Caption

Step 3: Highlight the code you pasted and select “Ignore Formatting” from the Format drop-down menu.

ignore formating
Step 4: Now highlight the white space between the code and select “Ignore Formatting” again. This is so you can use RapidWeaver’s formatting tools on the caption (e.g. change color or font-size)

Caption

 

Step 5: Add your desired caption in the white space between the pink highlighted code.

Captioning

 

Step 6: Repeat Steps 2-5 until you have your desired number of contents. Just like the slide images, the captions will display in the order that you place them. If you want to leave one slide without a caption just don’t add text in between the pink highlighted code.

NOTE: Sometimes the editor will change your straight quotation marks into curly quotation marks. The curly quotation marks will cause caption to not work. To change them from curly to straight just delete the quotes and retype them.

 


 How to Add Videos (iframes) to the Slider

Step 1: View your project in Edit mode by clicking the edit button.

fhcjhjgg

 

Step 2: Copy and paste the code below into your editor.

<li class=”slide”>

</li>

Step 3: Highlight the code you pasted and select “Ignore Formatting” from the Format drop-down menu.

ignore formating

 

Step 5: Locate the video you want to use on Youtube or Vimeo. Use the share link “Embed” option to get the iframe code. Paste the iframe code into the space between <li class=”slide”> and </li>

iaegjdfi

acaijbef

 

NOTE: Sometimes the editor will change your straight quotation marks into curly quotation marks. The curly quotation marks will cause caption to not work. To change them from curly to straight just delete the quotes and retype them.

 


How To Enable Lightbox on an Image

Step 1: Navigate to your Page Inspector > Styles Menu and enable the Lightbox by selecting checking the ‘Lightbox On’ checkbox under the Toggles heading.

inspector -> iehjfdjg -> aehagchc

Step 2: View your project in Edit mode by clicking the edit button.

fhcjhjgg

Step 3: Import or drag and drop an image into your editor.

Step 4: Double click the image and in the popup menu change the Filename to something that includes the word ‘lightbox’. You can also change the Alt Tag to set what will display as a caption for the image.

Light Box


How To Add A Button

Step 1: Type in your desired button text into your editor and hightlight the text.

ButtonText

 

Step 2: click the Add link button.

cechgeed

 

Step 3: Add a link to where you would like the button to navigate to and then add a ‘class’ with the value ‘button’.

ebejjeeg

 

Step 4: Click ‘Set Link’ and you are done.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Phaleg

Phaleg offers a plethora of unique styling controls. Let us go over each option in further detail.

Table of Contents

Parallax Slider Application

Step 1:

applySlider1

Export your desired images on the Resources section of RapidWeaver. Resources is located on the leftmost side of the application. The slider corresponds to the images exported on this section, so take heed to this when applying them.

Step 2:

Copy the Phaleg Slider snippet:

<div class="main">

  <div class="tint"></div>

  <div class="page_container">

    <a href="#" class="is-prev">&laquo;</a>
    <a href="#" class="is-next">&raquo;</a>

    <div id="siteTitle">
      <h1>%site_title%</h1>
      <h2>%site_slogan%</h2>
    </div>

    <div id="immersive_slider">
      <div class="slide" style="background-image: url('%resource(file-name-here.jpg)%')" data-start="background-position:0px -100px;" data-1000="background-position:0px 500px;"></div>
      <div class="slide" style="background-image: url('%resource(file-name-here.jpg)%')" data-start="background-position:0px -100px;" data-1000="background-position:0px 500px;"></div>
      <div class="slide" style="background-image: url('%resource(file-name-here.jpg)%')" data-start="background-position:0px -100px;" data-1000="background-position:0px 500px;"></div>
    </div>

  </div>

</div>

Step 3:

site header snippet

Paste the snippet into the Header of the HTML section of the Page Inspector. Refer to the image above for reference. Areas highlighted require special attention (from top to bottom):

  • Tint: This regulates the tint option for the image slider. You may delete from the snippet should you decide to omit the tint.
  • Slider Navigation: Unicode-based, navigational interface. To adjust, refer to the Unicode Chart to view the full list.
  • Slider Text: Input your title, slogan, miscellaneous text, etc. here. “%site_title%” translates to your site title edited on RapidWeaver, while “%site_slogan%” refers to your site slogan.
  • Add Image/Parallax Effect: This is where the images are attached from the Resources section. This is also where the parallax calculation is determined. Because images differ from size, each parallax effect in each slide has to be manually adjusted using the data attributes:data-start: Starting point of parallax. Determined by X/Y axes of the background position.
    data-1000: Finishing point of parallax. Determined by X/Y axes of the background position.On the example image above, “data-start” of the slider starts at a background-position of 0px/-100px, meaning that the image starts at a Y-axis of -100px, while “data-1000″ ends at 0px/500px, which is where the parallax effect ends after scrolling down 1000px (hence data-1000). Ideally, the Y-axis should be the only adjustment.

At this point, your slider is active and ready for previewing.

Back to Top

Extra Content Stack

*Applies to Stack page only.

Step 1:

extraContent1

Locate the Extra Content stack within your Stack Elements page. Apply the stack anywhere on the page.

Step 2:

extraContent2

Input the number value on the Extra Content stack’s option area. The number value dictates where the Extra Content stack will be placed:

  • 1 = Post-Header
  • 2 = Top Pre-Stack (Before Stacks)
  • 3 = Middle Pre-Stack (Before Stacks)
  • 4 = Bottom Pre-Stack (Before Stacks)
  • 5 = Top Post-Stack (After Stacks)
  • 6 = Middle Post-Stack (After Stacks)
  • 7 = Bottom Post-Stack (After Stacks)

Back to Top

General Options

General options dictate the overall styling of the RapidWeaver page.

GENERAL: Enable Page Titles

Enable page titles & descriptions (Applies to Page Specific areas).

GENERAL: Navigation Arrows (Ascended)

Determine the lightness or darkness of the navigational arrows before the header snaps to the top of the page.

GENERAL: Navigation Arrows Hover (Ascended)

Determine the lightness or darkness of the navigational arrow hover effect before the header snaps to the top of the page.

GENERAL: Navigation Arrows (Descended)

Determine the lightness or darkness of the navigational arrows after the header snaps to the top of the page.

GENERAL: Navigation Arrows Hover (Descended)

Determine the lightness or darkness of the navigational arrow hover effect after the header snaps to the top of the page.

GENERAL: Header Shadows

Determine the lightness or darkness of the header shadow.

GENERAL: Container Shadows

Determine the lightness or darkness of the content container shadow.

GENERAL: Sidebar

Enable sidebar.

GENERAL: Colours

Set general colours for the following:

  • General Background
  • Body Background
  • Image Slider Tint
  • Header Background (Ascended)
  • Header Background (Descended)
  • Navigation Background (Ascended)
  • Navigation Background (Descended)
  • Navigation Background Hover
  • Mobile Navigation Background
  • Footer Background
  • Sidebar Content Background
  • Sidebar Title Background

Back to Top

Page Specific Options

Page specific options dictate styling specific to a particular RapidWeaver page.

PAGE SPECIFIC: Enable Masonry Gallery

Alternate between traditional grid-style or Masonry galleries (Applies to Photo Gallery & Movie Album).

PAGE SPECIFIC: Lightbox Background

Determine the lightness or darkness of the lightbox (Applies to Photo Gallery & Movie Album).

PAGE SPECIFIC: Lightbox Navigation

Determine the lightness or darkness of the lightbox navigation (Applies to Photo Gallery & Movie Album).

PAGE SPECIFIC: Colours

Set page specific colours for the following:

  • Thumbnail Caption Background
  • Blog Background
  • Form Field Background
  • Reset Button Background
  • Submit Button Background
  • File Share Title Background
  • File Share Description Background

Back to Top

Text Options

Text options dictate styling for text.

TEXT: Fonts

Phaleg provides 16 different fonts:

  • Crimson
  • Forum
  • Garamond
  • Medio
  • Ovo
  • Trykker
  • Aileron
  • Basic
  • Dekar
  • Helvetica
  • Spinnaker
  • Vegur
  • Archive
  • Code Pro
  • Eunomia
  • Gent

TEXT: Font Types

Determine the type of font for the following:

  • General Font
  • Heading Font
  • Site Title Font
  • Site Slogan Font
  • Page Title Font
  • Gallery Font
  • Blog Title Font
  • Description Font

TEXT: Colours

Set text colours for the following:

  • Body Text
  • Site Title Text
  • Page Title Text
  • Page Description Text
  • Image Slider Text
  • Navigation Text (Ascended)
  • Navigation Text (Descended)
  • Navigation Text Hover
  • Mobile Navigation Text
  • Footer Text
  • Sidebar Content Text
  • Sidebar Title Text
  • Thumbnail Caption Text
  • Blog Text
  • Blog Title Text
  • Blog Link Text
  • Form Field Text
  • Reset Button Text
  • Submit Button Text
  • Description Text
  • File Share Title Text

Back to Top

Image Slider Options

Image slider options dictate overall styling of the slider.

IMAGE SLIDER: Slider Height

Adjust the height of the image slider.

IMAGE SLIDER: Slider Tint Opacity

Adjust the opacity of the image slider tint.

Back to Top

Extra Content Options

Extra Content options dictate styling for the Extra Content Stack.

EXTRA CONTENT: Colours

Set extra content colours for the following:

  • EC 1 (Post-Header)
  • EC 2 (Top Pre-Stack)
  • EC 3 (Middle Pre-Stack)
  • EC 4 (Bottom Pre-Stack)
  • EC 5 (Top Post-Stack)
  • EC 6 (Middle Post-Stack)
  • EC 7 (Bottom Post-Stack)

Back to Top

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Seaworthy

seaworthy

Seaworthy offers a plethora of unique styling controls. Let us go over each option in further detail.

 

Table of Contents

 


Back to Top

 

Applying Slider

 

Step 1:

applySlider1

Export your desired images on the Resources section of RapidWeaver. Resources is located on the leftmost side of the application. The slider corresponds to the images exported on this section, so take heed to this when applying them.

 

Step 2:

applySlider2

Locate the Seaworthy Slider Snippet on the Snippets section of RapidWeaver. You can also copy and paste it from below.

 

applySlider3

 

<div id="sliderContent">
<div 
 data-image-name="INSERT IMAGE FILE HERE"
 data-split="INSERT SLIDE ANIMATION"
 data-caption-header="INSERT TITLE"
 data-caption-text="INSERT SUB-TITLE 1"
 data-caption-cite="INSERT SUB-TITLE 2"
></div>
</div>

Further examination displays the code for the slider. Each sub-div within the sliderContent div registers as one slide for the slider. Apply another sub-div for two slides, and so forth.

Within each sub-div, there are five data-type options:

  • data-image-name: Insert the name of the image file on this section from the “Resources” section.
  • *data-split: This determines the transitioning animation for each slide (See below for all types of animations).
  • data-caption-header: Adjust the header for each slide.
  • data-caption-text: Adjust the middle text for each slide.
  • data-caption-cite: Adjust the bottom text for each slide.

*Data Split Animations:

  • horizontal
  • horizontal-right
  • horizontal-left
  • horizontal-clockwise
  • horizontal-counterclockwise
  • vertical
  • vertical-top
  • vertical-bottom
  • vertical-clockwise
  • vertical-counterclockwise

 

Step 3:

applySlider4

Attach the snippet onto the Header of the Header section of the Page Inspector. Refer to the image above for reference. At this point, your slider is active and ready for previewing. Remember to adjust the size of the slider on the Style Options section, since the default option for the slider is set to None.

Note: RapidWeaver’s auto formatting will sometimes change straight quotation symbols into curly ones . Curly quotes do not work inside HTML code. In order to replace the curly quotes with the correct straight quotes you can select and delete them and then retype them in. Alternatively, whenever you apply “Ignore Formatting” to HTML code it will automatically change the curly quotes to straight quotes.


Back to Top

 

Extra Content Stack

*Applies to Stack page only.

 

Step 1:

extraContent1

Locate the Extra Content stack within your Stack Elements page. Apply the stack anywhere on the page.

 

Step 2:

extraContent2

Input the number value on the Extra Content stack’s option area. The number value dictates where the Extra Content stack will be placed:

  • 1 = Post-Header
  • 2 = Top Pre-Stack (Before Stacks)
  • 3 = Middle Pre-Stack (Before Stacks)
  • 4 = Bottom Pre-Stack (Before Stacks)
  • 5 = Top Post-Stack (After Stacks)
  • 6 = Middle Post-Stack (After Stacks)
  • 7 = Bottom Post-Stack (After Stacks)

 


Back to Top

 

General Options

General options dictate the overall styling of the RapidWeaver page.

 

GENERAL: Header Width

Header width determines the total width of the header. Alternate between the traditional 960px or full width header.

GENERAL: Footer Width

Footer width determines the total width of the footer. Alternate between the traditional 960px or full width footer. To omit the footer, select “None”.

GENERAL: Sidebar Width

Footer width determines the total width of the footer. Alternate between the traditional 960px or full width footer. To omit the footer, select “None”.

GENERAL: Colours

Set general colours for the following:

  • General Background
  • Page Background
  • Title/Description Background
  • Header
  • Menu
  • Menu Hover
  • Footer Background
  • Footer Border
  • Footer Sitemap Divider
  • Sidebar Border

 


Back to Top

 

Page Specific Options

Page specific options dictate styling specific to a particular RapidWeaver page.

 

PAGE SPECIFIC: Page Title/Description Width

Page Title/Description width determines the total width of the page title & description. Alternate between the traditional 960px or full width sizes. To omit the page title & description, select “None” (Applies to all pages involving the page title & description).

PAGE SPECIFIC: Presentation Style

Presentation Style allows the user to display their photos, movies, and miscellaneous files in either a gallery or list fashion (Applies to Photo Gallery, Movie Album, and File Share pages).

PAGE SPECIFIC: Lightbox Icons

Adjust the Lightbox Icons to either a light or dark color (Applies to Photo Gallery page).

PAGE SPECIFIC: Movie Preview Size

Adjust the size of the movie preview. Sizes are based on sizing options for Photo Gallery image previews in order to regulate page consistency (Applies to Movie Gallery page).

PAGE SPECIFIC: Colours

Set page specific colours for the following:

  • Title/Description Background
  • List Divider
  • Gallery Lightbox
  • Blog Link Background
  • Form Field Focus
  • Form Reset
  • Form Submit
  • File Share Title

 


Back to Top

 

Slider Options

Slider options dictate the overall styling of the slider.

 

SLIDER: Sizes

Adjust the size of the slider. User has the ability to alternate between the traditional 960 or full width, as well as the overall height of the slider.

SLIDER: Caption Position

Position the caption text to the left, right, or middle of the slider.

SLIDER: Colours

Set slider colours for the following:

  • Navigation Arrows
  • Slider Pagination

 


Back to Top

 

Mobile Options

Mobile options dictate styling for the mobile navigation menu. (Viewable only on mobile devices).

 

MOBILE: Menu Shadowing

Enable shadowing for depth purposes.

MOBILE: Menu Highlighting

Adjust the navigation highlighting to either a light or dark color.

MOBILE: Colours

Set mobile navigation colours for the following:

  • Menu Button
  • Menu Background
  • Menu Link
  • Menu Link Hover
  • Menu Current Link

 


Back to Top

 

Extra Content Options

Extra Content options dictate styling for the Extra Content Stack.

 

EXTRA CONTENT: Set Max Width

Enable max width for area within the Extra Content stack, overriding the page’s base width value.

EXTRA CONTENT: Colours

Set extra content colours for the following:

  • EC 1 (Post-Header)
  • EC 2 (Top Pre-Stack)
  • EC 3 (Middle Pre-Stack)
  • EC 4 (Bottom Pre-Stack)
  • EC 5 (Top Post-Stack)
  • EC 6 (Middle Post-Stack)
  • EC 7 (Bottom Post-Stack)

 


Back to Top

 

Text Options

Text options dictate styling for text.

 

TEXT: General Font

Adjust the font for the general content text.

TEXT: Page Title Font

Adjust the font for the page title.

TEXT: Site Title Font

Adjust the font for the site title.

TEXT: Site Description Font

Adjust the font for the site description.

TEXT: Heading Font

Adjust the font for heading text (h1, h2, h3, etc.).

TEXT: Colours

Set text colours for the following:

  • Page Text
  • Page Links
  • Page Navigation
  • Title
  • Description
  • Sub-Title
  • Sub-Description
  • Menu Text
  • Footer Text
  • Sidebar Text
  • Slider Title
  • Slider Blockquote
  • Lightbox Text
  • Form Reset Text
  • Form Submit Text
  • Fileshare Title

 


Back to Top

 

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Charis

Slider/Banner Images

Step 1

Add the images you wish to use to the “Resources” section.

Adding an image to your resources

Step 2

Copy and Paste the code below into the main content editor or into the sidebar content.

<div id="sliderContent"> 
<!--Paste Step 3's Code Here --> 
</div>

Step 3

Select from the 3 options below and copy and paste the code into the sliderContent Div you pasted from Step 2.

1: Single banner image or a default slider image with no caption

<div data-image-name="IMAGE_NAME.jpg" ></div>

2: Slider image with adjustable transition effect

<div 
data-image-name="IMAGE_NAME.jpg" 
data-split="horizontal-counterclockwise" 
></div>

3: Slider image with adjustable transition effect & caption

<div 
data-image-name="IMAGE_NAME.jpg" 
data-split="horizontal-counterclockwise" 
data-caption-header="Title" 
data-caption-text="Place paragraph text here" 
data-caption-cite="Firstname Lastname" 
></div>

You can change the “data-split” value to adjust the transition effect. Each value represents how the image will slice on transtion. The available options are:

horizontal
horizontal-right
horizontal-left
horizontal-clockwise
horizontal-counterclockwise
vertical
vertical-top
vertical-bottom
vertical-clockwise
vertical-counterclockwise

Change the “data-caption-header” value to add a title or delete this line if you do not wish to have a title.
Change the “data-caption-text” value to add text.
Change the “data-caption-cite” value to add a cited name or delete this line if you are not using a quote.

Step 4

Change “IMAGE_NAME.jpg” to exactly match the name of your image in the Resources section (case sensitive)

Step 5

Repeat Steps 3 & 4 until you have as many photos that you want to display in the slider. After you have added your images and changed your values, highlight all of the code and select “Ignore Formatting” from the Format drop down menu. Your finished code should be similar to the screen shot below.

Screen Shot 2013-12-20 at 10.30.01 AM

NOTE: RapidWeaver’s editor uses two types of quotation marks. Be sure your code uses straight quotation marks Screen Shot 2013-12-20 at 10.24.50 AM and not curly quotation marks Screen Shot 2013-12-20 at 10.25.02 AM. The curly quotation marks are not recognized as code and will cause the slider to load improperly.


Adding an Image to the Background

Step 1

Add the image you wish to use to the “Resources” section.

Adding an image to your resources

Step 2

Copy and paste the code below into your Page Inspector > HTML > CSS section.

1
2
3
.charis-background {
    background-image: url(%resource(IMAGE_NAME.jpg)%);
}

Step 3

Change “IMAGE_NAME.jpg” to exactly match the name of your image in the Resources section (case sensitive)


Extra-Content (non-Stacks page)

Step 1

Navigate to the Sidebar Tab of the Page Inspector.

Page inspector sidebar tab

NOTE: if you are using a styled text page you may also use the Main Content editor

Step 2

Copy and Paste the code below into the text area.

<div id="myExtraContent1"> 
Extra-Content 1 content Here 
</div> 
<div id="myExtraContent2"> 
Extra-Content 2 content Here 
</div> 
<div id="myExtraContent3"> 
Extra-Content 3 content Here 
</div> 
<div id="myExtraContent4"> 
Extra-Content 4 content Here 
</div> 
<div id="myExtraContent5"> 
Extra-Content 5 content Here 
</div>

Step 3

Highlight all the code & select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 4

Add your desired content to each section. Highlight everything between and & select Ignore Formatting from the Format Drop down menu (or press command + . ). This will allow you to add formatting to the content you have added.

Step 5

Preview and you are complete. Your finished code in the Sidebar(or Main Content editor) should be similar to the screen shot below.

Extra content in sidebar


Create Button

Step 1

Type into the editor whatever you would like the button to say on it.

Step 2

Highlight your text & select the Add Link button.

Add Link Button or  Stacks add link

Step 3

Type in the URL or select where you would like the button to navigate to.

Step 4

Add a new Custom Attribute Named: class with the Value: btn

Screen Shot 2013-12-20 at 10.48.53 AM

NOTE: You can also add an additional color value after btn. The available values are:

red
blue
green
purple
cyan
yellow

Step 5

Click set link.


Using Font Awesome Icons

Font Awesome’s Icons can just about be used anywhere on your site. Check out the links below to learn more about how to use Font Awesome.

How to Use Font Awesome

See all usable icons


Chocolat Lightbox

Step 1

Turn on Chocolat Lightbox in the Styles section of the Page Inspector.

Screen Shot 2013-12-20 at 11.00.30 AM

Step 2

In order for the Lightbox to work correctly you will need the original image and a thumbnail (smaller version) of the image.

Step 3

Add the original image into the Resources section of RapidWeaver.

Adding an image to your resources

 

Then drag and drop the thumbnail image into the place you would like the image thumbnail popup to display.

Step 4

Next, right click the thumbnail image and select Add Link. (Or click the Add link button after selecting the image)

Step 5

Click on the URL drop down and select the resource from the list.

download

Step 6

Add a custom attribute titled class with the value lightbox and then click Set Link.

Chocolate lightbox add link

Step 7

Switch to preview mode to see if it worked and you are done. To add more photos repeat Steps 3-6.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Ragnarok

Built-in Nivo Slider

note: The background for Ragnarok is the Nivoslider / Banner image

1. Double click and install 1LD– Nivo Image & 1LD – Nivo Image with Caption.

2. Drag & Drop 1LD -Nivo Image & 1LD – Nivo Image with Caption into the sidebar or any other location that allows you to put in content.

1LD Nivo

Nivo Image

3. Add an image to the resources in RW.

Custom Image Resource

4. Copy and paste the name of the file into the 1LD- Nivo Image snippet.

Resource Paste


Font Awesome

1. Double click and install 1LD– font awesome.

2. Drag & Drop 1LD– font awesome into where ever you want to place the icon.

Screen Shot 2015-07-31 at 2.35.37 PM

3. To change the typ of icon refer to the font awesome site where they have a library of all the icons. Here is the link font awesome. All you have to do to change the icon is simple place the name of the icon in-between the “” within class=”". As shown below.

Icon

 

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Asgard

How To Set Up the Slider

Step 1: Navigate to your Page Inspector > Styles Menu and enable the Slider by selecting ‘Slider’ under the Banner Setting option.

inspector  -> iehjfdjg -> aacgbdbc

Step 2: View your project in Edit mode by clicking the edit button.

fhcjhjgg
Step 3: Import or drag and drop an image into your editor.

Step 4: Double click the image and in the popup menu change the Filename to something that includes the word ‘slide’.

ficbecib

 

Step 5: Repeat steps 3 and 4 until you have as many images you want to use in the slider. Asgard’s Slider will now do the rest! The order you place your images into the slider, is the order the slider will display them.

 


How to Add Captions to Your Slider

Step 1: View your project in Edit mode by clicking the edit button.

fhcjhjgg

 

Step 2: Copy and paste the code below into your editor. Step 3: Highlight the code you pasted and select “Ignore Formatting” from the Format drop-down menu.

Caption

Step 3: Highlight the code you pasted and select “Ignore Formatting” from the Format drop-down menu.

ignore formating
Step 4: Now highlight the white space between the code and select “Ignore Formatting” again. This is so you can use RapidWeaver’s formatting tools on the caption (e.g. change color or font-size)

Caption

 

Step 5: Add your desired caption in the white space between the pink highlighted code.

Captioning

 

Step 6: Repeat Steps 2-5 until you have your desired number of contents. Just like the slide images, the captions will display in the order that you place them. If you want to leave one slide without a caption just don’t add text in between the pink highlighted code.

NOTE: Sometimes the editor will change your  straight quotation marks into  curly quotation marks. The curly quotation marks will cause caption to not work. To change them from curly to straight just delete the quotes and retype them.

 


Font Awesome

Here is the Font Awesome tutorial if you want to implement it. FONT AWESOME TUTORIAL

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Odin

Built-in Nivo Slider

1. Double click and install ODIN– Nivo Image & ODIN – Nivo Image Caption.

2. Drag & Drop ODIN -Nivo Image & ODIN – Nivo Image Caption into the sidebar or any other location that allows you to put in content.

Odin banner

 

 

 

Nivo Image

3. Add an image to the resources in RW.

Custom Image Resource

4. Copy and paste the name of the file into the ODIN- Nivo Image snippet.

Nivo Pasted


Parallax BG

1. Double click and install ODIN– parallax main.

2. Drag & Drop ODIN -parallax main into the pageinspector css.

Odin Parallax

Odin Parallax Pasted

3. Add an image to the resources in RW.

Resource Highlight

4. Copy and paste the name of the file into the ODIN- Parallax main snippet.

Odin Para Paste


Extra Content

Odin-Extra-Content

1. Above is a diagram of the ExtraContent areas.

2. Simply figure out with ExtraContent area that you want to use and put that number in the stack or the snippet.

1LD Extra Content

Odin EC

 

note: The snippet comes with the theme and you simply have to double click it to install it.


Font Awesome

1. Double click and install ODIN– font awesome.

2. Drag & Drop ODIN– font awesome into where ever you want to place the icon.

Odin Font Awesome

3. To change the typ of icon refer to the font awesome site where they have a library of all the icons. Here is the link font awesome. All you have to do to change the icon is simple place the name of the icon in-between the “” within class=”". As shown below.

Icon

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Poseidon

Built-in Nivo Slider

1. Double click and install Poseidon – Nivo Image & Poseidon – Nivo Image Caption.

2. Drag & Drop Poseidon -Nivo Image & Poseidon – Nivo Image Caption into the sidebar or any other location that allows you to put in content.

poseidon Nivo

Nivo Image

3. Add an image to the resources in RW.

Custom Image Resource

4. Copy and paste the name of the file into the Poseidon – Nivo Image snippet.

Nivo Pasted

Extra-Content Image Slider

The Extra Content area 1 is built to use image sliders built in stacks or have one imported via plugin. It can be used for what ever you want to fit into it.Example: If using WeaverPix and PlusKit you would first create a WeaverPix page. In this example we’ll call that page WeaverPix. Then we’ll create a PlusKit page and hide it from our navigation menu in the Page Info > General section. Finally, we’ll import the WeaverPix page into the Extra Content section using the command @import((WeaverPix)) where “WeaverPix” is the exact name of the page (case sensitive).

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Hemera

Slider Images

Step 1: Turn on the built in Camera slider in the Page Inspector Styles section.

hemera turn on the slider

Step 2: Add all the images you want to use to the Resources section.

Adding an image to your resources

Image sizes for site 960px width
Small: 960×200 Pixels
Medium: 960×288 Pixels
Large: 960×480 Pixels
Oversized: 960×720 Pixels

Image sizes for 1280px site width
Small: 1280×200 Pixels
Medium: 1280×384 Pixels
Large: 1280×640 Pixels
Oversized: 1280×960 Pixels

Step 3: Copy and Paste the code below into the main content editor or into the sidebar content. (If you are using Stacks, and have the Extra Content Stack copy the code below labeled Extra Content Stack).

Content or Sidebar Editor

<div id="myExtraContent1"> 
  <div id="camera_wrap"> 
    <!--Paste Step 4's Code Here --> 
  </div> 
</div>

Extra Content Stack

<div id="camera_wrap"> 
  <!--Paste Step 4's Code Here --> 
</div>

Step 4: Copy and Paste the code below into the Extra Content & Camera wrap Div you pasted from Step 3. (Or into the Extra Content Stack if you are using stacks).

<div data-src="%resource(IMAGE_NAME.jpg)%" data-fx="simpleFade"> 
  <div> Caption here </div>
</div>

Step 5: Change “IMAGE_NAME.jpg” to exactly match the name of your image in the Resources section (case sensitive)

Step 6: Change “Caption here” to your desired caption or delete the entire section if you wish not to display a caption.

Delete

<div> Caption here </div>

Step 7: Repeat Steps 4-6 until you have as many photos you want to display in the slider. If you are using the main content or sidebar areas, make sure to highlight the code and select “Ignore Formatting” from the Format drop down menu.

Here is an example of what a finished slider code would look like.
<div id="camera_wrap"> 
  <div data-src="%resource(image1.jpg)%" data-fx="simpleFade">
    <div> Caption One </div>
  </div>
  <div data-src="%resource(image2.jpg)%" data-fx="simpleFade">
    <div> Caption Two </div>
  </div>
  <div data-src="%resource(image3.jpg)%" data-fx="simpleFade">
    <div> Caption Three </div>
  </div>
</div>

Transition Slider Effects

Step 1: After you have added images to your slider you will notice a data-fx value after the resource names. You can change the data-fx value to one of the values below to get a different transition effect.

‘random’
‘simpleFade’
‘curtainTopLeft’
‘curtainTopRight’
‘curtainBottomLeft’
‘curtainBottomRight’
‘curtainSliceLeft’
‘curtainSliceRight’
‘blindCurtainTopLeft’
‘blindCurtainTopRight’
‘blindCurtainBottomLeft’
‘blindCurtainBottomRight’
‘blindCurtainSliceBottom’
‘blindCurtainSliceTop’
‘stampede’
‘mosaic’
‘mosaicReverse’
‘mosaicRandom’
‘mosaicSpiral’
‘mosaicSpiralReverse’
‘topLeftBottomRight’
‘bottomRightTopLeft’
‘bottomLeftTopRight’
‘bottomLeftTopRight’
‘scrollLeft’
‘scrollRight’
‘scrollHorz’
‘scrollBottom’
‘scrollTop’

Example: data-fx=”simpleFade” would be changed to data-fx=”curtainTopRight” for a curtain transition effect.

Extra-Content (non-Stacks page)

Step 1: Navigate to the Sidebar Tab of the Page Inspector.

Page inspector sidebar tab

Note, if you are using a styled text page you may also use the Main Content editor

Step 2: Copy and Paste the code below into the text area.

<div id="myExtraContent1"> 
  Extra-Content 1 content Here 
</div> 
<div id="myExtraContent2"> 
  Extra-Content 2 content Here 
</div> 
<div id="myExtraContent3"> 
  Extra-Content 3 content Here 
</div> 
<div id="myExtraContent4"> 
  Extra-Content 4 content Here 
</div>

Step 3: Highlight all the code & select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 4: Add your desired content to each section. Highlight everything between and & select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 5: Preview and you are complete. Your finished code in the Sidebar(or Main Content editor) should be simular to the screen shot below.

Extra content in sidebar

Create Button

Step 1: Type into the editor whatever you would like the button to read.

ButtonText

Step 2: Highlight your text & select the Add Link button.

Add Link Button or  Stacks add link

Step 3: Type in the URL or select where you would like the button to navigate to.

Step 4: Add a new Custom Attribute named “class with” the value “button”

button class

Click Set Link and you are done!

Using Font Awesome Icons

Font Awesome’s Icons can just about be used anywhere on your site. Check out the links below to learn more about how to use Font Awesome.

How to Use Font Awesome

See all usable icons

Chocolat Lightbox

Step 1: Turn on Chocolat Lightbox in the Styles section of the Page Inspector.

Step 2: In order for the Lightbox to work correctly you will need the original image and a thumbnail (smaller version) of the image.

Step 3 Drag and drop the original image into the Resources section of RapidWeaver. Then drag and drop the thumbnail image into the place you would like the image link to display.

Step 4: Next, right click the thumbnail image and select Add Link. (Or click the Add link button after selecting the image)

Add Link Button

Step 5: Click on the URL drop down and select the resource from the list.

Step 6: Add a custom attribute titled class with the value lightbox and then click Set Link.

Chocolate lightbox add link

Step 7: Switch to preview mode to see if it worked and you are done. To add more photos repeat Steps 3-6.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Erebus

Slider Images

Step 1: Add all the images you want to use to the Resources section. Adding an image to your resources Step 2: Navigate to the HTML Header Section of the Page Inspector. Page Inspector - HTML - Header Step 3: Copy and Paste the code below into the text area.

<div data-src="%resource(IMAGE_NAME.jpg)%" data-fx="simpleFade"> 
  <div class="camera_caption fadeFromBottom"> Caption here </div> 
</div>

Step 4: Change “IMAGE_NAME.jpg” to exactly match the name of your image in the Resources section (case sensitive) Step 5: Change “Caption here” to your desired caption or delete the entire section if you wish not to display a caption. Delete:

<div class="camera_caption fadeFromBottom"> 
  Caption here 
</div>

Step 6: Repeat steps 3-5 untill you have as many photos you want to display in the slider, preview and you are complete.

Slider Transition Effects

Step 1: After you have added images to your slider you will notice a data-fx value after the resource names. You can change the data-fx value to one of the values below to get a different transition effect. ‘random’ ‘simpleFade’ ‘curtainTopLeft’ ‘curtainTopRight’ ‘curtainBottomLeft’ ‘curtainBottomRight’ ‘curtainSliceLeft’ ‘curtainSliceRight’ ‘blindCurtainTopLeft’ ‘blindCurtainTopRight’ ‘blindCurtainBottomLeft’ ‘blindCurtainBottomRight’ ‘blindCurtainSliceBottom’ ‘blindCurtainSliceTop’ ‘stampede’ ‘mosaic’ ‘mosaicReverse’ ‘mosaicRandom’ ‘mosaicSpiral’ ‘mosaicSpiralReverse’ ‘topLeftBottomRight’ ‘bottomRightTopLeft’ ‘bottomLeftTopRight’ ‘bottomLeftTopRight’ ‘scrollLeft’ ‘scrollRight’ ‘scrollHorz’ ‘scrollBottom’ ‘scrollTop’ Example: data-fx=”simpleFade” would be changed to data-fx=”curtainTopRight” for a curtain transition effect.

Single Image Banner

Step 1: Add the image you want to use to the Resources section. Adding an image to your resources Step 2: Navigate to the HTML Header Section of the Page Inspector. Page Inspector - HTML - Header Step 3: Copy and Paste the code below into the text area.

<img src="%resource(IMAGE_NAME.jpg)%" alt="Banner">

Step 4: Change IMAGE_NAME.jpg to match the name of your resource. Preview and you are done!

Background Image

Step 1: Add the image you want to use to the Resources section. Adding an image to your resources Step 2: Navigate to the HTML > CSS Section of the Page Inspector.Page Inspector CSS section Step 3: Copy and Paste the code below into the text area.

1
2
3
#pageWrap {
     background-image: url(%resource(IMAGE_NAME.jpg)%);
}

Step 4: Change IMAGE_NAME.jpg to match the name of your resource. Preview and you are done! Note: If your web page does not contain much content & the image is not stretching to the bottom of the browser window, add the code below to your Header-CSS section. This will force the image to fit to the browser window.

1
2
3
4
5
#pageWrap {
     position: absolute;
     top:0;
     bottom:0;
}

Extra-Content (non-Stacks page)

Step 1: Navigate to the Sidebar Tab of the Page Inspector. Page inspector sidebar tab Note: if you are using a styled text page you may also use the Main Content editor Step 2: Copy and Paste the code below into the text area.

<div id="myExtraContent1"> 
  Extra-Content 1 content Here 
</div> 
<div id="myExtraContent2"> 
  Extra-Content 2 content Here 
</div> 
<div id="myExtraContent3"> 
  Extra-Content 3 content Here 
</div> 
<div id="myExtraContent4"> 
  Extra-Content 4 content Here 
</div>

Step 3: Highlight all the code & select Ignore Formatting from the Format Drop down menu (or press command + . ). Step 4: Add your desired content to each section. Highlight everything between

<div id="myExtraContent1">
and
</div>

& select Ignore Formatting from the Format Drop down menu (or press command + . ). Step 5: Preview and you are complete. Your finished code in the Sidebar(or Main Content editor) should be simular to the screen shot below. Extra content in sidebar

Create Button

Step 1: Type into the editor whatever you would like the button to read. ButtonText Step 2: Highlight your text & select the Add Link button. Add Link Button  or Stacks add link Step 3: Type in the URL or select where you would like the button to navigate to. Step 4: Add a new Custom Attribute Named: class with the Value: button button class Click Set Link and you are done!

Social Media Icons

Step 1: Find the Social Media Icon you want you use from the Glyph Chart below: Just Vector Glyph Chart Step 2: Type the corresponding letter or number into your desired location. Step 3: Highlight your letter or number and select the Add Link button. Add Link Button  or Stacks add link Step 4: Type in the URL to your social media page & add a new Custom Attribute named “class” with the value “social” social media link *check the Open in New Window Box if you do not want visitors to leave your page when clicking on the link Click Set Link and you are done!

Engraved Content Separators

Step 1: Copy the CSS code below & paste it into your Page Inspector’s HTML CSS section.

1
2
3
4
5
6
hr {
     height: 1px;
     background: rgba(0,0,0, .4);
     border: none;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

Step 2: Type in the following code where you would like the seperator to appear:

<hr>

Preview and you are done!

Glass-like Promo Boxes

Step 1: Copy the CSS code below & paste it into your Page Inspector’s HTML CSS section.

1
2
3
4
5
6
.glass,.glass:before {
     padding: 0px 15px;
     text-align: center;
     width: 150px;
     height: 150px;
}

Step 2: Copy the code below & paste it into the editor.

<div class="glass"> Content Here </div>

Step 3: Highlight the code & select Ignore Formatting from the Format Drop down menu (or press command + . ). Step 4: Highlight “Content Here” between the div tags and select Ignore Formatting from the Format Drop down menu again (or press command + . ). Step 5: Add content in-between the div tags & preview to see what you have done. Step 6: You may notice the glass box area does not match your content. To edit the height & width of your boxes go to the Page Inspector’s HTML CSS section. Adjust the height and width values in the CSS code you pasted at the begining of the tutorial. Repeat steps 2-5 untill you have a desirable amount of Promo Boxes.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Carpe Diem

Adding Images to the Slider

Step 1: Add the images you wish to use to the “Resources” section.

Adding an image to your resources

Step 2: Navigate to your Page Inspector > HTML tab > Header Tab.

Page Inspector - HTML - Header

Step 3: Copy and Paste the code below into the text area.

<img src="%resource(paisley.png)%" alt="example" title="Caption text here" />

Step 4: Change name_of_resource.jpg to match the name of your resource & be sure to make sure the extension matches as well (png, jpeg, or jpg). The names are case sensitive so slide-1.jpg in the code and slide-1.JPG in the resource section would not work.

Step 5: Change the value of ‘title’ to your desired caption or delete title if you don’t wish to display a caption.

Step 6: Repeat steps until you have as many photos you want to display in the slider, preview and you are complete. Your finished code in the Header-Header section should be similar to the screen shot below.

Slider images in the header

Adding Content to the Promotional Boxes

Step 1: Navigate to the Sidebar Tab of the Page Inspector > Sidebar.

Page inspector sidebar tab

Step 2: Copy and Paste the code below into the Sidebar text area.

<div id="myExtraContent1"> 
Promo Box 1 Content Here 
</div> 
<div id="myExtraContent2"> 
Promo Box 2 Content Here 
</div> 
<div id="myExtraContent3"> 
Promo Box 3 Content Here 
</div> 
<div id="myExtraContent4"> 
Promo Box 4 Content Here 
</div>

Step 3: Highlight the code & select Ignore Formatting from the Format Drop down menu (or press ? . ).

ignore formatting

Step 4: Add your desired content to each section replacing the text “Promo Box # Content Here”. Then Highlight everything between

<div id="myExtraContent#">
and
</div>

& select Ignore Formatting from the Format Drop down menu again (or press ? . ). The content will now not be highlighted in pink anymore and only the HTML code will be highlighted as code.

Step 5: Preview and you are complete. Your finished code in the Sidebar should be similar to the screen shot below.

Promo Boxes

Social Media Icons

Step 1: Social Media Icons can be placed in the Main Content area, Sidebar, and Site Slogan. Copy and paste the code below into your desired location.

<div id="socialMedia"> 

</div>

Step 2: Copy the code below and paste it between <div id=”socialMedia”> & </div>.

<a href="http://www.webaddresshere.com"><span>#</span></a>

Step 3: Find the Social Media Icon you wish you use from the Glyph Chart below.

Just Vector Glyph Chart

Step 4: Type the corresponding letter in-between <span> & </span>.

Step 5: Replace http://www.webaddresshere.com with the address to your social media site.

Step 6: Repeat steps 3 – 5 untill you have all the icons you wish to use.

Step 7: Highlight the code & select Ignore Formatting from the Format Drop down menu (or press ? . ). Your finished results should resemble the screen shot below.

Social Media links HTML

Navigation Subtitles

Step 1: After creating a page, double click the title to begin renaming the page.

Step 2: Type in <p> & then your desired subtitle followed by </p>. Your finished title should resemble the screenshot below.

subtitle

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Conversa

Adding Slider Images

Step 1: Install the conversa-sliderimages.rwsnippet.

conversa snippets

Step 2: Navigate to the Page Inspector HTML CSS section.

Page Inspector - HTML - CSS

Step 3: Drag the Custom Slider snippet in to the Custom CSS box.

conversa slider snippet

Step 4: Add the images you want to use to your Resources section.

Adding an image to your resources

Step 5: After loading your resource click on it and highlight the name and copy it.

Step 6: Paste the name in-between %resource( and )%.

conversa slider

Adding Banner Images

Step 1: Add the image you want to use to your Resources section.

Adding an image to your resources

Step 2: Navigate to the HTML CSS section of the Page Inspector:

Page Inspector - HTML - CSS

Step 3: Copy and paste the text from below into the text area.

1
2
3
#bannerImage {
     background-image: url(%resource(paisley.png)%);
)%);}

Step 4: Change the name of the file inside of this code (paisley.png) to match the image you added to the resources section.

Extra-Content

Step 1: Drag & drop the Extra Content snippet into the Sidebar inside the Page Inspector.

Page inspector sidebar tab

Step 2: Highlight “CONTENT HERE” in the section you wish to edit. Click on Format in the Rapidweaver menu & uncheck Ignore Formatting from the drop down menu.

Step 3: Edit Each “CONTENT HERE” Section according to how you wish it to display on the page.

Extra content in sidebar

Linkable Buttons

Step 1: Go to the edit content section & enter the text you want to display on the button. Example: Button Text

ButtonText

Step 2: Highlight the text & click on the Create Link button in the lower left corner of the window.

Add Link Button

Step 3: Create a link to the desired page & create a Custom Attribute with the name “class” & a value of “button”. Click Set Link and you are done!

Social Media Icons

Step 1: Paste the Social Media snippet included with the Conversa theme.

Step 2: After Inserting the code, copy the web address you wish to link the icon to and and replace the ‘#’.

Example:

<a href="#">
1
 

to

<a href="www.twitter.com">
1
 

Step 3: After you have added addresses to all the icons you wish to display, highlight all of the code you have inserted and Click on Format in top menu bar, then click on Ignore Formatting from the drop down menu.

Social Media Icons Above the Navigation Bar

Step 1: Add the head2 class to each of your Social media snippets.

Example:

<a href="#"/> <img alt="socialmedia" src="%pathto(images/social/aim.png)%"/> </a>

should be changed to

<a href="#"/> <img alt="socialmedia" src="%pathto(images/social/aim.png)%"/> </a>
1
<strong style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;">Step 2: </strong><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 13px; line-height: 19px;">In order to get the icons right above the navigation bar you must paste the edited code (like the example above) or snippet into the site title.</span>

Step 3: Place the code directly after the title of your site.

Make sure to edit the links before pasting them into the site title. You will be unable to navigate very well once they have been pasted.

Remove Social Media Buttons from the Gallery Viewer

To remove the Social Media buttons in the gallery viewer just add the code below to your HTML – CSS section of the Page Inspector.

1
.pp_social {display: none;}
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Cinema

Extra-Content

Step 1: Navigate to the Sidebar Tab of the Page Inspector.

Page inspector sidebar tab

Step 2: Copy and Paste the code below into the text area.

<div id="myExtraContent1">
     Extra-Content above main content Here
</div>
<div id="myExtraContent2">
     Extra-Content below main content Here
</div>

Step 3: Highlight all the code & select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 4: Add your desired content to each section. Highlight everything between

<div id="myExtraContent1">

and

</div>
1
 

& select Ignore Formatting from the Format Drop down menu (or press command + . ).

Step 5: Preview and you are complete. Your finished code in the Sidebar should be similar to the screen shot below.

Extra content in sidebar

Slider Images

Step 1: Add all the images you want to use to the Resources section.

Adding an image to your resources

Step 2: Navigate to the HTML Header Section of the Page Inspector.

Page Inspector - HTML - Header

Step 3: Copy and Paste the code below into the text area.

<div data-src="%resource(IMAGE1.jpg)%" data-fx="simpleFade">
  <div class="camera_caption fadeFromBottom"> 
    Caption here 
  </div> 
</div>

Step 4: Change “IMAGE1.jpg” to exactly match the name of your image in the Resources section (case sensitive)

Step 5: Change “Caption here” to your desired caption or delete the text below if you wish not to display a caption.

<div class="camera_caption fadeFromBottom"> 
  Caption here 
</div>

Step 6: Repeat steps until you have as many photos you want to display in the slider, preview and you are complete. Your finished code in the Header-Header section should be simular to the screen shot below.

Cinema Slider Code

Slider Transitions

Step 1: After you have added images to your slider, change the data-fxvalue to one of the values below.

‘random’

‘simpleFade’

‘curtainTopLeft’

‘curtainTopRight’

‘curtainBottomLeft’

‘curtainBottomRight’

‘curtainSliceLeft’

‘curtainSliceRight’

‘blindCurtainTopLeft’

‘blindCurtainTopRight’

‘blindCurtainBottomLeft’

‘blindCurtainBottomRight’

‘blindCurtainSliceBottom’

‘blindCurtainSliceTop’

‘stampede’

‘mosaic’

‘mosaicReverse’

‘mosaicRandom’

‘mosaicSpiral’

‘mosaicSpiralReverse’

‘topLeftBottomRight’

‘bottomRightTopLeft’

‘bottomLeftTopRight’

‘bottomLeftTopRight’

‘scrollLeft’

‘scrollRight’

‘scrollHorz’

‘scrollBottom’

‘scrollTop’

Example: data-fx=”simpleFade” would be changed to data-fx=”curtainTopRight” for a curtain transition effect.

Single Image Banner

Step 1: Add the image you want to use to the Resources section.

Adding an image to your resources

Step 2: Navigate to the HTML Header Section of the Page Inspector.

Page Inspector - HTML - Header

Step 3: Copy and Paste the code below into the text area.

1
<img alt="Banner" src="%resource(IMAGE.jpeg)%" />

Step 4: Change IMAGE.jpeg to match the name of your resource.

Preview and you are done!

Social Media Icons

Step 1: Find the Social Media Icon you want you use from the Glyph Chart below:

Just Vector Glyph Chart

Step 2: Type the corresponding letter or number into your desired location.

Step 3: Highlight your letter or number and select the Add Link button.

Add Link Button or  Stacks add link

Step 4: Type in the URL to your social media page & add a new Custom Attribute Named: class with the Value: social

social media link

Click Set Link and you are done!

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Carabine

Adding Slider Images

Step 1: Install the customslider.rwsnippet by double clicking it.

Step 2: If the customslider.rwsnippet is installed correctly it will appear in Snippets.

Step 3: Open the page inspector and select Header and click on CSS.

Carabine CSS

Step 4: Drag the Custom Slider snippet in to the Custom CSS box.

Custom Slider Snippet

Once dragged in the code should appear as so.

Custom Snippet Code

Step 5: Go to resources located at the top left of the Rapidweaver window and add the resource of your choice from your computer.

Custom Image Resource

Step 5: After loading your resource click on it and highlight the name and copy it.

Resource Highlight

Step 6: Paste the name in-between %resource(  and   )%.

Single Banner Image–> Resource Paste

Addition

The Daipo Slider comes with 3 images and you can toggle from editing images 1 through 3 by simply changing

Installing the Calendar

Step 1: Install the Calendar Snippet by double clicking the Calendar.rwsnippet file 
provided in the Carabine.zip.

Step 2: Open up RapidWeaver and click on Page Info to open up the Page Inspector. Click on Sidebar Located in the Page Inspector.

Carabine Sidebar Calendar

Step 3: Open up Snippets

Step 4: The Calendar should be located in the Snippets if installed correctly.

Carabine Calendar

Step 5: Click and drag the Calendar Snippet into the Page Inspector.

Calendar Sidebar

Step 6: This should complete your install of the Calendar.

sidebar Calendar complete

jQuery Accordion

Step 1: Install the Accordion Snippet by double clicking the Accordion.rwsnippet file provided in the Carabine.zip.

Step 2: Open up RapidWeaver and click on Page Info to open up the Page Inspector. Click on Sidebar Located in the Page Inspector.

Carabine Sidebar Calendar

Step 3: Open up Snippets.

Step 4: The Accordion is located in the Snippets if installed correctly.

Accordion Snippet

Step 5: Click and drag the Accordion Snippet into the Page Inspector.

Accordion Snippet Paste

Step 6: This should complete your install of the Accordion.

Accordion Pasted

Customizing the Title

To customize the Title of any object in the accordion is simple. In between the <a href=”#”> and the <!–AREA FOR TITLE–></a> is where you will place your desired title.

<a href=”#”> HERE IS WHERE YOU WILL PUT YOUR TITLE<!–AREA FOR TITLE–></a>

To customize the list you will have to insert your info after the <li> tags.

<li>HERE IS WHERE YOU WILL INSERT YOUR CONTENT.

(also shown in the image below)

Accordion Content1

Adding to the List

Adding to the list is simple all it will take is adding another <li> tag after the previous <li>tag.

<li>place item you want

<li>in a list here

<li>

(as shown in the image below)

Accordion Li

Customizing the Paragraph portion of the Accordion

The title is edited in the same manner as the List.

To place a paragraph you must insert it in-between the <p>   and the   </p>

<p>HERE IS WHERE YOU WILL INSERT</p>

Accordion Paragraph

Adding another paragraph

to create another paragraph you must ad a <p></p> after the previous </p>.

<p>Place content in here

</p>

<p> 

</p>

(as shown in the image below)

New Paragraph

Single Image Option

Step 1: You must install the singleimage.rwsnippet.

Step 2: Once installed open up the page inspector, click on header and then select Custom CSS. Open up Snippets to make sure the Single Image snippet is installed correctly.

Carabine CSS

Step 3: Drag the Single Image snippet into the Custom CSS in the page inspector.

Carabine Single Img

Step 4: Add a new resource by clicking on Add Resource or use an existing resource.

Custom Image Resource

Step 5: Click on the resource you desire highlight the name then copy it.

Resource Highlight

Step 6: Paste the name in-between the %resource( and )%.

Single Image Paste

Single Paste After

Social Media Icons

Step 1: Install the SocialMedia Snippet by double clicking the socialmedia.rwsnippet file provided in the Carabine.zip.

Step 2: Open up RapidWeaver and click on Page Info to open up the Page Inspector. Click on Sidebar Located in the Page Inspector.

Carabine Sidebar Calendar

Step 3: The SocialMedia buttons should be located in the Snippets if installed correctly.

Carabine Social Media

Step 4: Click and drag the Social Media Snippet into the Page Inspector and it absolutely must be placed in the very top of the sidebar mark up.

Social Media pasted

Step 5: This should complete your install of the Social Media Buttons.

Carabine Social

Creating Links

Step 1: After installing the Socialmedia snippet all you need to do is change the web address in the code. The web address will be located in-between

<a href=”HERE IS WHERE YOU WILL PUT THE WEB ADDRESS“>

(as shown in the image below)

Social media link

Step 2: Get the Web Address that you desire to have your page link to and copy it.

(i.e. http://twitter.com/rapidweaver)

Step 3: Paste the Web Address in the code.

<a href=”HERE IS WHERE YOU WILL PUT THE WEB ADDRESS“>

(as shown in the image below)

Social Pasted link

Titles with Wrap Graphic

Carabine title

To use the wrap around Title exclusively on the Carabine theme is simple.

Step 1: Highlight the desired text.

Step 2:  After desired Title is highlighted click on the add Html mark button at the bottom.

HTML Select

Step 3: Select Heading 1 or Heading 2 for the wrap around effect.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Canari

Adding Images & Video to the Camera Slider

Step 1: Add the image that you want in the Resources folder in RapidWeaver.

Resource image

Step 2: Open up your snippets menu and click and drag “Canari – Banner or California – Banner” into the Pageinspector under header.

California Banner Snippet

 

 

Step3: Once dragged it should look like this

California Banner Snippet Header

Make sure that it says “image1″.

 

Step4: Replace “banner1.jpg with the name of the file that you want to use.

California Banner Snippet Header

To remove the caption just delete the div “fadeFromTop”.

California Caption

Inserting a Video

Video Embed Codes are to placed in this area
Video Embed Codes are to placed in this area

California Video Banner

be sure to have a screen shot of the video to place as the banner image.

Extra Content

Step 1. Paste the Included Extra Content Snippet (or copy and paste the code from below) into the main content or the sidebar content.

SLIDER CAPTION 1 CONTENT HERE
SLIDER CAPTION 2 CONTENT HERE
SLIDER CAPTION 3 CONTENT HERE
BANNER CONTENT HERE
ABOVE MAIN AREA CONTENT HERE
BOTTOM LEFT CORNER CONTENT HERE
BOTTOM RIGHT CORNER CONTENT HERE

Step 2. Replace the “CONTENT HERE” text with the desired content for each Extra Content area.3. Highlight

&

for each Extra Content are you are using and select “Ignore Formatting” from the “Format” Drop down menu. (Or use keyboard shortcut Cmd .[period] )4. When you are done your editor content should look like the screenshot below.

Extra Content Snippet

Note: Every consecutive Extra Content area needs to be pasted leading up to the last number you are using into the editor in order for them to work properly. Example: To use Extra Content#6, you must include the code for Extra Content#1-#5. Make sure to delete any open space between

&

for every area you do not wish to use or else there will be blank space in those areas. Also the same goes for the Extra Content Stack. Insert all Extra Content areas that lead up to the one you want to use. Make sure to label them in the stacks editor as #1-#7.

Social Media Icons

Social Media

Step 1. Paste any of the included Social Media Snippets (or copy and paste code from below) into the main content or the sidebar content.

social media snippet

Step 2. Replace “WEB-ADDRESS-HERE” text with address you want the icon to link to.

Example:

Canari URL

Step 3. After you have pasted and updated the addresses to each icon highlight all of the code & select “Ignore Formatting” from the “Format” Drop down menu. (Or use keyboard shortcut Cmd .[period] )

The Icons will automatically appear in their place below the Main navigation menu.

Setting Up Masonry Gallery

Masonry On

By default the Masonry Gallery is on. If you need to turn it on, click the “Page Info” button to bring up the Page Inspector. Click on the “Styles” tab & under “Masonry” select the on option that matches the width of your site (Site width option located at the top of the Styles list).

The only thing you need to do is to turn the thumbnail size to large. To do this open the Page Inspector & click on the “Page” tab. Now click on the “General” button & move the “Thumbnail Size” slider all the way to the right. Refresh your page & the photos will no longer appear blurry.

Canary Thumbnail

Single Image Banner

Step 1. To set up the Single Banner Option in Canari takes having the Single Banner Images Snippet.Step one the snippet into the Css within Page Inspector.

Single Banner

Step 2. Replace “RESOURCE_NAME.jpg” with the name of the file that you want to showcase and that should be it.

Single Banner Image

Banner Transitions

Step 1. Start by installing the Canari – Banner Transition snippet.

Canari Banner Transition

Step 2. Drag the snippet into the JavaScript section of the Page Inspector.

California banner transition

Step 3. Pick anyone of the types of captions and place it into the quotes in fx. By default the snippet is set for random.

Transition California

Transition Options

Changelog

v2.0.0

Foundation 5 is used to add new functionality to the site 5 more extra content sections are added New full width slider as an option New menu that supports endless tiers (no limit on the amount of subcategories) New mobile menu Content displays on mobile devices in an improved look New page loading animation (can be turned off) JavaScript cleaned up for faster load times (jQuery & jQuery UI APIs are being called) New Fonts Added (Aileron, Aleo, Medio, & Penna) All lines converted into purely CSS – colors can be changed More footer color control options added

v1.5.3 (December 18, 2012)

  • Banner Transition Snippet
  • Banner Caption Text Color Options
  • Banner Caption Text Size Options
  • Banner Caption Background Options

v1.5.0 (August 18, 2012)

  • Video option for slider
  • Mobile re-design (fits theme even more nicely)
  • Font size enlarged for mobile devices
  • Nav-menu fix (display issues corrected)

v1.1.0 (August 18, 2012)

  • 100% Responsive
  • Slider supports tons more images and has a single or none option (customizable on every page)

v1.0.4 (June 6, 2012)

  • New style option to change the color of the body
  • New style option to turn the Mobile version of the site off and on
  • New style option to turn Masonry Gallery off and on
  • New style option to change the lines from black to white for darker themed sites
  • New style option to change the caption background color to black

Bug Fixes:

  • Now compatible with the “Consolidate CSS” option in the preferences menu
  • Fixed the link hover effects in the blog page
  • Other minor bug fixes
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

California

Adding Images & Video to the Camera Slider

Step 1. Open your snippets panel and find California – Banner and drag that into the Header section of the Page Inspector. “Be sure to have the snippets installed”

California Banner Snippet

California Banner Snippet Header

Step 2. Drag the image that you want to use into the resources panel.

California Resource

Step 3. Get The name of the image and put it into the snippet.

California Resource Paste

Step 4 (Optional). Captions and be inserted  within the <div class=”camera_caption fadeFromTop”> INSIDE HERE </div>.

California Caption

Step 5. Inserting video. To insert video you must get the embed code from the site and place it within the <div id=”image1? data-src=”%resource(IMAGE)%”> INSIDE HERE </div>.

California Video Banner

Step 6. Have a screen shot of the movie and place it in the part where you images usually go.

California Banner Video Image

Changing the Background Images

Step 1. Open your snippets panel and find California – Body BG, California – Gal/File/Mov BG or California – sidebar BG and drag that into the Header section of the Page Inspector.

  • California – Body BG = Background of the body of California.
  • California – Gal/File/Mov BG = Background of the photo, movie and file page.
  • California – sidebar BG = Background for the border of the sidebar.

“Be sure to have the snippets installed”

California background Snippet

California BG Snippets

Step 2. Drag the background file into the resources panel.

1LD Sushi BG

Step 3. Take the name of the file and put it into the snippet.

BG Image Paste

ExtraContent

Step 1. Drag the California – ExtraContent Stack into either the sidebar or in the Main Content. ”Be sure to have the snippets installed”

Extra Content Snippet

Extra Content Header

 

Banner Transitions

Step 1. Start by installing the Canari – Banner Transition snippet.

California Banner Transition

Step 2. Drag the snippet into the JavaScript section of the Page Inspector.

California banner transition

Step 3. Pick anyone of the types of captions and place it into the quotes in fx. By default the snippet is set for random.

Transition California

All options

Transition Options

Changelog

v1.2.0 (January 7, 2013)

  • Banner Transition Snippet
  • Banner Caption Text Color Options
  • Banner Caption Text Size Options
  • Banner Caption Background Options
  • Social Media Hover
  • Contact form border

v1.1.0 (November 30, 2012)

  • mobile nav appearance
  • Nav active / inactive color fix
  • banner transition set to ‘simpleFade’
  • banner pie loader removed

Bug Fixes:

  • navigation hover error
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Cabernet 2

Important: Turn off Consolidate CSS

This theme is not compatible with the “Consolidate CSS” feature. You must disable for the theme to display correctly.

To do so in RapidWeaver 6, open your Configure menu and under the “Advanced Tab” uncheck the checkbox titled “Consolidate CSS files”.

Consolidate CSS Off

To do so in RapidWeaver 5, open your Preferences menu and under the “Publishing Tab” uncheck the checkbox titled “Consolidate CSS files”.

Consolidate CSS

Change the Font Size of Site Description or Navigation Menu

Step 1: Navigate to your Page Inspector > HTML tab > CSS tab.

Page Inspector - HTML - CSS

Step 2: Enter the following:

1
2
3
4
5
6
#menu li a {
     font-size: 18px;
}
.ltswrap h2 {
     font-size: 18px !important;
}

Step 3: #menu li a will change the font size of your navigation menu links. The other will change the font size of your Site description. You can replace 18px to meet any size of your choosing.

Static Background Image

Step 1: Add the image you wish to use to the “Resources” section.

Adding an image to your resources

Step 2: Navigate to your Page Inspector > HTML tab > Header Tab.

Page Inspector - HTML - Header

Step 3: Add the following text to the Header Section:

1
{image : '%resource(paisley.png)%'}

*Make sure the resource name matches the name in your resources section, pay special attention to the the extension (.jpg, .jpeg, .png, .gif)  if it does not match as well the page will not load

Preview and you are done!

Background Image Slideshow

Step 1:  Add the images you wish to use to the “Resources” section.

Adding an image to your resources

Step 2: Navigate to your Page Inspector > HTML tab > Header Tab.

Page Inspector - HTML - Header

Step 3: Add the following text to the Header Section:

1
2
3
{image : '%resource(slider1.jpg)%'},
{image : '%resource(slider2.jpg)%'},
{image : '%resource(slider3.jpg)%'}

*Be sure to separate each image with a comma while leaving the last image with no comma after it & make sure the resource names match the names in your resources section, pay special attention to the the extension (.jpg, .jpeg, .png, .gif) if it does not match as well the page will not load

You may add as many photos as you wish to the slide show. Preview and you are done!

Scrollable Background Image

Step 1: Add the image you wish to use to the “Resources” section.

Adding an image to your resources

Step 2: Navigate to your Page Inspector > HTML tab > CSS tab.

Page Inspector - HTML - CSS

Step 4: Add the following text to the CSS Section:

1
2
3
html {
     background-image: url(%resource(background.jpg)%);
}

*Make sure the resource name matches the name in your resources section, pay special attention to the the extension (.jpg, .jpeg, .png, .gif) if it does not match as well the page will not load

Preview and you are done!

Social Media Icons

Step 1: Find the Social Media Icon you want you use from the Glyph Chart below:

Just Vector Glyph Chart

Step 2: Type the corresponding letter or number into your desired location.

Step 3: Highlight your letter or number and select the Add Link button.

Add Link Button or Stacks add link

Step 4: Type in the URL to your social media page & add a new Custom Attribute Named: class with the Value: social

social media link

*check the Open in New Window Box if you do not want visitors to leave your page when clicking on the link

Click Set Link and you are done!

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS

Cabernet

Important: Turn off Consolidate CSS

This theme is not compatible with the “Consolidate CSS” feature. You must disable it for the theme to display correctly.

To do so in RapidWeaver 6, open your Configure menu and under the “Advanced Tab” uncheck the checkbox titled “Consolidate CSS files”.

Consolidate CSS Off

To do so in RapidWeaver 5, open your Preferences menu and under the “Publishing Tab” uncheck the checkbox titled “Consolidate CSS files”.

Consolidate CSS

Custom Background Image

Step 1: Navigate to your Page Inspector > HTML tab > CSS tab.

Page Inspector - HTML - CSS

Step 2: Copy and paste the code from below into the text box.

1
body {background-image:url(%resource(NAME OF RESOURCE HERE)%);}

Step 3: Drag and drop an image you would like to use into your “Resources” section.

Adding an image to your resources

Step 4: After loading your resource, highlight the name of the resource and copy it.

Step 5: Paste the name in-between %resource( & )%);.

When you are finished the code should look this:

1
body {background-image:url(%resource(paisley.jpg)%);}

Note: Your image should be large enough to fill large screen resolutions, otherwise the image will repeat.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/topics/rapidweaver-themes/">
RSS