blog-tutorial-post-template

Blog

RapidWeaver Snippets Button

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.”

Inspect Element in Google Chrome

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):

RapidWeaver Page Info Button Screenshot

Navigate to the “Header” (example) section:

Page Inspector's Header Button

Select the JavaScript (example):

JavaScript section

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.

 

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software