Blog Archives

Font Awesome 4.6.3

Posted On 3 Jun 2016
By One Little Designer
In Stack Update
Leave a comment

Even more icons are added to the list as the total climbs to 634 free scalable font icons.

For a list of all the icons check out the Font Awesome Icons page.

This is a completely free stack.

Check it out!

PURE – Menus 2

Posted On 13 May 2016
By One Little Designer
In Stack Update
Leave a comment

Pure Menus 2 was designed to give you more customizable control over your navigation menu. This all new stack now comes bundled with Pure for RapidWeaver. Adding advanced and more in-depth customizable settings, you can now style the menu to your liking. Check out some the example pages to see what you can do.

This Stack Requires: Stacks 3

Note: This stack will not replace the original Pure Menus stack and will show up as a separate stack in the library. If you already own Pure for RapidWeaver this additional stack is completely free! Just use the order lookup page to re-download the entire suite.

This is a free update for existing customers of PURE.
20% Off Discount Code for PURE: 25_Pure_052016
Offer Expires May 20, 2016

Check out the New Menus

Check out all of PURE

Hide – New FREE Stack

To kick things off I have a new free stack for you too. HIDE is a simple stack that does exactly what it’s name suggests… it hides content on your page, though you can also use it to reveal content. HIDE is made for parts of your website that you don’t want to display to users or only want to display to users when they are viewing your site in particular screen sizes, such as on a tablet or smart phone. Simply place stacks inside of hide and choose what screen sizes you want to hide/reveal the content in.

Check it out!

Font Awesome

Font Awesome is a free stack that allows you to use Font Awesome icons on any Stacks page.

Many of our own stacks use Font Awesome, though when multiple instances of the stacks are called on a page they were calling Font Awesome over and over again as well. To avoid this so sites would run quicker we now provide this free stack 🙂

1. Drag Font Awesome onto the page anywhere (it won’t display in preview or when the site is published). This allows you to start using Font Awesome.

2. Drag the Font Awesome snippet into any text/html section. Then change the class to any Font Awesome icon you wish to use – see full list here.

Version 1.0.0 uses Font Awesome version 4.0.3.

Simple Headers

Simple Headers is a free RapidWeaver Stack that offers extended control over HTML Headers. Customization options allow you to easily change between Headers 1 – 6, Inherit font sytle or change it with control over font size, font weight, underlining, italicizing, and alignment (left, right, center, justify). Inherit coloring or change the color and hover color. Lastly, you can add a custom class of your choosing (optional).

Download for Free

Early October Updates

Posted On 5 Oct 2013
By One Little Designer
In Stack Update
Leave a comment

cleanBinders 1.1.2

Removed Unnecessary Coding
Added ‘break-word’ to Tab Text
Size of Tabs Better Adjusts at 320px (iPhone Portrait)

Simple Divider 1.3.3

Removed Unnecessary Asset Call & Files
Spacing Control Over Both Top & Bottom
Customization Section Improved

Simple Text 1.7.5 Update

Posted On 13 Sep 2013
By One Little Designer
In Stack Update
Leave a comment

HTML 5 Wrap On/Off Option Added
Font Size Inherit On/Off Option Added
Responsive Font Size On/Off Option Added
Various Customization Section Improvements
Cleaned Up Various CSS & JS Code

Free Flat Browser Icons

Posted On 16 Aug 2013
By One Little Designer
In Web Icons
Leave a comment

Free flat styled browser icons.

Icons come as PNG images at 150×150 pixels.

Download here

or you can manually download from images below.

Simple Position – Free RapidWeaver Stack

A super simple stack that gives users control over container element positioning.

A knowledge of CSS is helpful, but not necessary. The concept of positioning is very simple to understand and explained in our tutorial section – also described below.

You can then place any other stack inside of Simple Position.

Check it out!

cleanCarousel 3.0 Free Update

Posted On 17 Jul 2013
By One Little Designer
In Stack Update
Leave a comment

Now Sparkle Ready!
Inner Stack omitted; place content directly inside container stack
Resolved conflict with multiple Carousel instances on the same page
Carousel themes improved (an removed theme can be achieved with customization options)
Pagination added (including position & color options)
9 button controls/arrows
Improved customization options section.

Simple Buttons Free & Pro

Simple Buttons allows you to drag and drop buttons into any Stacks section – Modern browsers can take advantage of beautiful new CSS3 effects, such as rounded corners & gradients. Pro adds background image options, Font Awesome icons and Advanced options.

Syntax Highlight Pro & FREE

Syntax Highlight Pro allows you to easily add code onto any Stacks page. Choose from 8 beautiful themes and code in over 20 supported languages.

Free version offers 1 theme & 7 supported languages.

Check it out!

Simple Text v1.4.1 Update

Posted On 28 May 2013
By One Little Designer
In Stack Update
Leave a comment

New Customization Options

Links Inherit All – all colors & customization will be inherited from the theme
Line Height On/Off
Line Height Size (px)
Letter Spacing On/Off
Letter Spacing Size (px)

The container is now position: relative so that absolutely positioned items can be placed inside (for advanced users).

In addition, the overflow: visible for parent containers was removed as it was breaking functionality when placed in some stacks. This was originally done for the Rotating text option, which will now have to be done manually by adding padding with the built-in Stacks option, which is the better way to do it anyway or rotated text could overlap with other objects and text.

Simple Text Button Snippets

Posted On 27 Mar 2013
By One Little Designer
In Snippets
Leave a comment

If you wanted separate install options for the snippets used in the Simple Text page, which come as free installs with the free stack, then you have a couple other options.

1. You can manually add them yourself using the codes below.

2. You can simple copy and paste the code below without ever installing them as snippets.

The code in these snippets controls the CSS and can be dragged and dropped in the Page Info > Header > CSS section.You then need to create the HTML that will take the CSS styling. These are not in the Snippets and can be easily created by copying and pasting this code:

1
2
3

<a class="buttonDark" href="http://YourLinkSomewhere.com">Button for Dark Backgrounds</a>
<a class="buttonLight" href="http://YourLinkSomewhere.com">Button for Light Backgrounds</a>
<a class="buttonSimple" href="http://YourLinkSomewhere.com">Button that's just dang Simple</a>

The snippets are not necessary to have in your Snippets section in Edit Mode either (so if you want that section cleaned up you can use the following codes):

For Button on Dark backgrounds

.buttonDark {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
     -o-border-radius: 3px;
     border-radius: 3px;
     text-shadow: 0 1px 1px #000;
     width: 80px;
     text-align: center;
     cursor: pointer;
     margin: 20px auto;
     display: block;
     padding: 7px 15px !important;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     text-shadow: 0px 1px 2px rgba(0, 0, 0, .7);
     border: 1px solid rgba(0,0,0,0.5);
     box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -ms-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -o-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.05)), color-  stop(100%,rgba(0,0,0,0.05)));
     background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -webkit-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
}

For Button on Light backgrounds

.buttonLight {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
     -o-border-radius: 3px;
     border-radius: 3px;
     text-shadow: 0 1px 1px #FFF;
     width: 80px;
     text-align: center;
     cursor: pointer;
     margin: 20px auto;
     display: block;
     padding: 7px 15px !important;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     text-shadow: 0px 1px 2px rgba(0, 0, 0, .7);
     border: 1px solid rgba(0,0,0,0.5);
     box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -ms-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -o-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.05)), color-stop(100%,rgba(0,0,0,0.05)));
     background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -webkit-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
}

The Simple Button

.buttonSimple {
	text-align: center;
	cursor: pointer;
	background: #349BCE;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: 3px solid #4CAAD9;
	padding: 7px 15px !important;
	display: block;
	margin: 20px auto;	
	width: 90px;
}
.buttonSimple:hover {
	background: #4CAAD9;
}
.buttonSimple:active {
	background: #349BCE;
	border: 3px solid #349BCE;
}

Simple Divider 1.1.0 Update

Posted On 7 Feb 2013
By One Little Designer
In Stack Update
Leave a comment

Simple Divider, the free Stack, now includes a new customization option.

Added “Emboss Style” control – emboss line options added: solid, dashes, dots.

To see the dashes option please visit the preview page.

If you have already download Simple Divider before you can get the update using our Order Lookup Form.

Free RapidWeaver Divider Stack

Upon request we’ve created a Free stack for creating simple dividers inside RapidWeaver. These are extremely simple so we’ve also created the alternative to use the Snippets as some users might prefer that method.

Simple Divider Stack

Simple Divider Snippets

Simple Divider Snippet

Posted On 2 Jan 2013
By One Little Designer
In Snippets
Leave a comment

We’ve had several customers request coding to duplicate some of our simple looking dividers on various websites of ours. In response we decided to create a free stack call Simple Divider.

Due to the simplicity of this Stack I imagined that some users might prefer to use a snippet instead, so this post is being created for that purpose.

HTML

1
2
3

<div id="simpleDivider">
     <div class="theDivider"></div>
</div>

CSS (Subtle Emboss)

#simpleDivider {
     width: 100%;
     clear: both;
     padding-top: 20px;
     padding-bottom: 20px;
}
#simpleDivider .theDivider {
     width: inherit;
     border-top: solid 1px #CCC;
     border-bottom: solid 1px #FFF;
}

CSS (Solid)

#simpleDivider .theDivider {
     width: inherit;
     height: 4px;
     background-color: #E0E0E0;
}

Why two <div> tags and not just one?

Placing a div tag inside of a div tag protects against spacing issues that occur when floated elements are placed above. Example, if there was simple one div tag and a margin was created for the top the margin would not display if there were certain elements floated above it, despite the clear call. The easiest solution, in my opinion, is to contain the existing tag inside another element and create padding, which will have no visible effect other than achieving the desired spacing.

Adding a URL to Your Site’s Logo

Posted On 16 Nov 2012
By One Little Designer
In Snippets
Leave a comment

A simple jQuery script can add any URL to your website’s logo, though you will need to identify what ID or Class has been assigned to your logo’s containing element first.

For this illustration we’ll use the Cinema RapidWeaver Theme.

It is also easiest to use a web browser that is able to inspect website structural elements, which can be done with most modern browsers now, though for this illustration I will be using Google Chrome.

Step 1. When viewing your website right click and select “Inspect Element.”

As you can see in the screenshot, there is a <div> tag wrapping around the logo with id=”siteTitle” inside it. Alternatively, some developers may have a class tag, which can likely be used as well, though if there is an ID always use that.

Step 2. In the Javascript section of RapidWeaver’s backend (where you edit pages content) add some jQuery.

First open your page inspector (example):

Navigate to the “Header” (example) section:

Select the JavaScript (example):

Then enter the following code:

1
2
3

$(document).ready(function() {
     $("#siteTitle img").wrap('<a href="http://www.ADDRESSHERE.com" />');
});

Step 3. Alter code if needed

At the beginning of the middle line you will re-name #siteTitle to whatever the id tag is for your logo’s containing section. If a class tag is used only you would alter the hash tag to a period – as an example the above would be .siteTitle instead of #siteTitle.

Contest Winners

Posted On 31 Oct 2012
By One Little Designer
In News
Leave a comment

Winners by “Best of class” categories and random drawing

Carpe Diem – Wilson School
Cabernet 2 – Ted Cannon
Conversa – Keywest Dining & Nightlife
Canari – Boo Spence
Random Drawing – Stones of the Field

Prizes: Each Winner gets our next theme about to release in a week or two. In addition, each winner gets a copy of our latest stack, cleanTabs (seen below).

Thank you everyone for entering – we hope to have another contest early next year.

Cabernet 1 Now FREE

Posted On 18 Sep 2012
By One Little Designer
In Theme Update
Leave a comment

I suppose not a whole lot needs to be said here. Cabernet 1 has been out for a while and we don’t get many support questions on it any more… we were considering discontinuing the theme, but thought we’d just make it Free and still offer support.

It’s replacement theme, Cabernet 2, is fully responsive and offers a whole lot more than the first, though the first is still very engaging for minimalistic and photo-oriented sites.

See the Demo

Download