Blog Archives

Simple Headers Pro

Simple Headers Pro gives you awesome new features: FitText and Circle Type. In addition, you gain the ability to change your font to the main web safe fonts or easily import your own. (project file & commercial free font included)

FitText creates automatically responsive text that will fit to whatever the screen size is, but allows you to still set minimum and maximum font sizes (if you prefer).

Circle Type lets you bend your text into an arch to any degree even a full circle.

30% Discount Code: 30_sHeaders_072014
Offer Expires July 18, 2014

Check it out!

Equal Heights for Columns

Posted On 10 Jan 2014
By One Little Designer
In Snippets
Leave a comment

Have you ever had multiple columns and you wanted them all to size themselves to the height of whichever one ended up being tallest? That’s what this snippet does. You’ll need to inspect your pages code to find the classes of the column sections. After that scroll down to line 35 in the code below, then replace ‘.sectionOne’, ‘.sectionTwo’, and ‘.sectionThree’ with the classes of your columns… if you have more than three just keep following the pattern to add more.

Thanks to the Filament Group for this one.

Make sure to paste the follow snippet in your Page Info > Header > JavaScript section (in RapidWeaver).

/*-------------------------------------------------------------------- 
 * JQuery Plugin: "EqualHeights" &amp; "EqualWidths"
 * by:        Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
 *
 * Copyright (c) 2007 Filament Group
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Description: Compares the heights or widths of the top-level children of a provided element 
                 and sets their min-height to the tallest height (or width to widest width). Sets in em units 
                 by default if pxToEm() method is available.
 * Dependencies: jQuery library, pxToEm method        (article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)                                                          
 * Usage Example: $(element).equalHeights();
                                                         Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
 * Version: 2.0, 07.24.2008
 * Changelog:
 *  08.02.2007 initial Version 1.0
 *  07.24.2008 v 2.0 - added support for widths
--------------------------------------------------------------------*/
 
$.fn.equalHeights = function(px) {
     $(this).each(function(){
          var currentTallest = 0;
          $(this).children().each(function(i){
               if ($(this).height() &gt; currentTallest) { currentTallest = $(this).height(); }
          });
     if (!px &amp;&amp; Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
          // for ie6, set height since min-height isn't supported
          if ($.browser.msie &amp;&amp; $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
          $(this).children().css({'min-height': currentTallest}); 
     });
     return this;
};
 
$(document).ready(function() {
     var highestCol = Math.max($('.sectionOne').height(),$('.sectionTwo').height(),$('.sectionThree').height());
     $('.fullHeight').height(highestCol);
});

$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
});
if (!px && Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
$(this).children().css({'min-height': currentTallest});
});
return this;
};

$(document).ready(function() {
var highestCol = Math.max($('.sectionOne').height(),$('.sectionTwo').height(),$('.sectionThree').height());
$('.fullHeight').height(highestCol);
});

In this example you would need to provide each of the containers also with the class of fullHeight (line 36).

cleanTips – New Tooltip Stack

cleanTips is perfect for taking advantage of small spaces. Use it to place beautiful and easily customizable tooltips on any Stacks 2.0+ page. Perfect for buttons, videos, small text snippets, images, shaping cart presentations, notifications, and alerts.

Create multiple tooltips, change colors, beautiful transition effects for most modern browsers, easy to use and simple customization.

cleanQuotes RapidWeaver Stack Release

Fully Responsive stack with beautiful design and animation built specifically to display customer reviews, testimonials and other site promotions. Great customization options coupled with simple and intuitive controls make cleanQuotes enjoyable and impressive.

Easily drag and drop quote sections designed specifically for customer reviews and testimonials. Simple design with subtle animation makes cleanQuotes great for any online business.

Testimonial / cleanQuote’s inner section allows you to place other stacks inside easily. This is designed to perfectly implement the built-in Stacks (i.e. Text, HTML).

Built-in Themes and Customization options allow you to adapt cleanQuotes to any RapidWeaver theme. The light weight plugins ensures fast loading speed and browser adaptability.

Check it out

Replacing Text with an Image Using jQuery

Posted On 28 Feb 2013
By One Little Designer
In Snippets
Leave a comment

I had a request from a customer recently who’s responsive site created a drop down menu when the users screen was under a certain size (standard for all responsive designs and done for mobile devices in this instance). The drop down menu on mobile simple displayed the text “MENU” though the user wanted to replace that with an image instead. Fortunately this is very simple to do with JavaScript, though I thought this was worthwhile to save here as a snippet in case it benefits other users as well.

The HTML in this example is as follows:

1	<a href="http://YOUR_HOME_PAGE.com" class="imageSwitch">MENU</a>

$().ready(function () {
    $('.imageSwitch').each(function () {
        string = $(this).text('MENU');
        $(this).html('<img src="YOUR_IMAGE_LOCATION/NAME.png" alt="' + string + '" />');
    });
});

Obviously the image source (SRC) needs to change to the image location and name of your image. Likely you’ll have this image uploaded in your Resources section, which you can then click on the image and see the uploaded directory and name provided that you’ve already published your site.

Improving Your Coding Skills

Posted On 27 Feb 2013
By One Little Designer
In Resources
Leave a comment

To find resources to help improve your coding is not difficult on the internet these days – fact it’s hard not to find your answers in many cases. You can find blogs and forums from just about any web design topic such as HTML, CSS, jQuery, JavaScript or even more advanced topics like MySQL and PHP. Over time I’ve found a hand full that are my personal favorites and that I’d like to recommend if you are a RapidWeaver user who wants to sharpen their coding skills. RapidWeaver is great software for users who want to avoid having to know much if any code, though knowing code is only going to enhance your experience and unlock more possibilities for you. The choice is yours.

1. Code Academy

For free help it really is hard to beat Code Academy. They don’t cover every topic, though they do touch on some great foundation topics and give you a chance to see your code live.

I’ve been a member at Lynda.com for years now and have used it to learn most of what I know today. They do not cover all topics or even every piece of software, but they do have a very extensive library and its growing all the time. In addition, they cover not only topics of web design, but also graphic design, SEO, business, and much much more.

On the downside Lynda.com does require a $25/mo membership fee, though I think it’s well worth every penny. You can also upgrade your membership and pay $37.50/mo which will give you access to all their exercise files.

3. CSS-Tricks

If you subscribe to a blog and want to improve your coding then definitely add CSS-Tricks to your list… if you haven’t already. Chris Coyier continues to delve deeper into some fun and amazing coding that doesn’t stop at CSS. In addition, he provides great example and snippets for achieving CSS and jQuery techniques.

What’s Yours?

There are lots more tools out there in the internet for increasing your skills and I’ve only touched on 3 ones that I love here. If you have one you love please comment and share what you love about it so much. If you want to explore other great ones that are not my personal favorites, but still very useful, check out these:

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.

cleanAccordion version 1.3.8 Patch

Posted On 15 Nov 2012
By One Little Designer
In Stack Update
Leave a comment

This is a very minor patch that fixes a bug when cleanAccordion is set to Auto-open.

The previous bug would cause the first tab to re-open when closed when set to Auto-open.

New RapidWeaver Theme ‘California’

Designed for the fashion & magazine industry, California offers a simple, clean and modern look backed with easy-to-use customization options that make building your site a joy.

Fully Responsive with a beautiful mobile display using the latest in HTML 5 techniques to optimize your visitor’s experience.

The demo features the smooth sliding of the responsive animation stack Hang Glider.

Check it out!

cleanTabs Stack Release

cleanTabs is our jQuery Tabs stack aimed to take a simpler, faster loading jQuery tab plugin called EasyTabs and implement it as a RapidWeaver Stack.

Offers 3 themes and easy customization options. Check it out here.

cleanAccordion 1.3.7

Posted On 19 Oct 2012
By One Little Designer
In Stack Update
Leave a comment

Small update includes speed control from animation speed of cleanAccordion tabs.

Cinema Theme Release

CINEMA RapidWeaver Theme

Cinema focuses on delivering a powerfully Responsive, Minimalistic and Modern Theme. Responsive functionality gives your theme it’s incredible feel for all screen sizes both small and large. In addition, your website will display differently for tablet and mobile devices (go ahead stretch the screen around and check it out).

Take full customization control of our extremely flexible slider – easily control sizes, frame decoration, captions, and 23 stunning transition effects.

Customize your own theme easily or take advantage of our 5 awesomely handcrafted theme styles – incredibly adaptable for both light and dark themes.

Extra Content gives you even more sections to place information. Extra Content sections are placed both above and below the main content section.

Your site running fast and error free is one of our top concerns. Cinema has gone through a strenuous code validation process to ensure that, while taking advantage of new HTML5 syntax, and best of all it looks AMAZING in all browsers (even going back to ie7).

How do we achieve all this functionality while maintaining a quick loading and cross-browser theme? jQuery is pretty much the answer. We’ve taken advantage of some awesome jQuery effects for animating your site yes, but we’ve also used it to minimize load times and acquire clean code.

100% Responsive Video Stack

cleanVideos offers 100% Responsive video embedding while keeping the video’s aspect ratio.

Supports all major video sharing sites such as YouTube and Vimeo – Supported HTML Embedding: iframe, object, embed.

Customization Options: pretty much none because it’s so dang easy to use that you don’t need any. Simply insert the html code into the stack and you are done. Couldn’t be easier!

cleanAccordion Released

cleanAccordion is a simple-to-use & customize drag-and-drop jQuery accordion stack.

100% Reponsive

Go ahead and test it out – this theme is the fully responsive Cabernet 2. Resize your screen and watch cleanAccordion adjust to the size.

Where You Can Place It

Anywhere stacks can go cleanAccordion can follow. You will need an additional plugin to place outside of the page element, such as PlusKit.

How Many Tabs You Are Limited To

NONE! There is absolutely no limit… well of course it might look silly after a while if you put too many, and if you put just one it sorta defeats the purpose… but you still can.

It’s so easy to use that this is pretty much all you need to know:

Double click the install file (its now installed almost instantly)
Create a Stacks page
Drag the cleanAccordion (Container) into the stacks page (left image below)
Drag cleanAccordion (Inner) into the container section (right image below)
Add more by easily dragging them above or below each other (change order easily)

Customize Options

Theme 1 and 2
Margin
Padding
Border Radius (rounded corners)
Border Size (Outer)
Border Size (Inner)
Border Color (Outer) for Theme 2
Border Color (Inner) for Theme 2
Title Background Color for Theme 2
Description Color for Theme 2
Title Text Color
Title Text Color (Hover)
Title Text Shadow Color
Description Text Color
4 Gradient Color Controls for Theme 1

CHECK IT OUT

Deactivate Parent Menu Anchor Link

Posted On 6 Sep 2012
By One Little Designer
In Snippets
Leave a comment

If you would like to deactivate the parent menu in your RapidWeaver theme and only leave the child menu items available for anchor tags you can easily achieve this with jQuery. The following code will also leave the anchor in place so that the CSS is not lost.

Place the code into the following section: Page Info » Header » JavaScript

1
2
3

$(window).load( function() {
     $('#nav > ul:first-child > li > a').removeAttr('href');
});

All this is saying is to remove the href attribute from you anchor tags, so you’ll keep the CSS attached to the tags for styling, but it remove the link out.

If you would still like users to see a hand when they cover over this link then you will need to add the styling into the section: Page Info » Header » CSS

1	#nav li {cursor:pointer}

Note that if you are using another theme you will need to rename #nav to whatever element wraps around your menu.

twitterConnect Stack Release

A modern touch for blogs by connecting to realtime twitter feeds. You control the terms and connect the vast world of twitter.

twitterConnect allows you to connect keywords and keyword phrases to real time twitter feeds from around the world. If the term is used anywhere on twitter, then twitterConnect will find it and show your users a live feed!

Whenever clicked twitterConnect quickly grabs the latest tweets containing the keywords chosen all in realtime – the results are constantly changing and unpredictably fascinating.

Drag & drop twitterConnect wherever you place stacks. If your theme needs different colors or sizes easily change the look of twitterConnects pop-up box or twitter icon.