Equal Heights for Columns

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 […]

IE8 Pseudo Command Fix

Internet Explorer 8

Internet Explorer 8 (and earlier) does not recognize some very powerful pseudo commands, such as ‘first-of-type’, ‘last-of-type’, ‘only-of-type’, ‘nth-of-type’, and ‘nth-last-of-type’ which the follow jQuery snippet fixes. IE8 does support ‘nth-child(last)’ and ‘nth-child(first)’ and other nth-child commands – also ‘last-child’ and ‘first-child.’ However, those are all dependent on the element recognizing children to parent relationships (i.e. ordered and unordered lists) and will not recognize elements simply by them being inside one of another (i.e. a div tag containing a series of other div tags… that’s when you use ‘type’ instead of ‘child.’ If you are creating an addon or have […]

Simple Text Button Snippets

RapidWeaver Snippets Button

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 […]

Replacing Text with an Image Using jQuery

RapidWeaver Snippets Button

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" […]

Simple Divider Snippet

RapidWeaver Snippets Button

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) 1 2 3 4 5 6 7 8 9 10 11 #simpleDivider { width: 100%; clear: both; padding-top: 20px; padding-bottom: 20px; } #simpleDivider .theDivider { width: inherit; border-top: solid […]

Justifying Text in RapidWeaver

RapidWeaver Snippets Button

Unfortunately there is no button to simply justify text inside RapidWeaver’s WYSIWYG editing toolbar. HTML & CSS can be used to achieved this effect with a symbol copy and paste of the following code: 1 <p style="text-align: justify;">Enter Your Text</p> Note that it is always best practice to highlight sections where you add HTML and hit CMD + . which simply protects the syntax from RapidWeaver’s built in auto-correct feature.

Change Your RapidWeaver Theme’s Default Font

RapidWeaver Snippets Button

I’ve had a customers ask me over time how to change the global font in RapidWeaver. Of course you can manually change the font, but you’d have to do it page after page, section after section, sure would be easier to set a new global font if the theme you were using implementing font selections different that the one you wanted. Fortunately, with some simple CSS that’s not a problem. Step 1: Locate your Page Inspector (example): Step 2: Select Header (example) and then CSS: Step 3: Finally, enter the following code and that should do the trick: 1 * […]

Deactivate Parent Menu Anchor Link

RapidWeaver Snippets Button

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 […]