May 23, 2013

Posts Comments

RapidWeaver – Adding Google + 1 Code

July 11, 2011 by 1 Comment

 

In this short tutorial , sorry it’s so short that doing a video would be too much :D  We will explain how to integrate the Google +1 code into your RapidWeaver Page. To keep it simple we will just use a Styled Text page for this instruction

Get the code

Get_the_code.png

Go to URL http://www.google.com/intl/en/webmasters/+1/button/index.html , this is the international version

We will just use the defaults provided on the opening page

1. Script Code to go in the Page Inspector javascript section
2. the HTML where you want the +1 button to appear (in our example the sidebar is our choice)

Add Scripts

Add_Scripts.png

1. Open Page Inspector
2. Select Header
3. Header Tab
4 . Add the script section of the +1 code

Add Code to SideBar

Add_Code_to_SideBar.png

Add the HTML Code ., remember you can place this anywhere … Important Step now follows!

Ignore the formatting

Ignore_the_formatting.png

As we are using Styled Text Mode , we will need to select the text and ignore the formatting. The Text will then turn pink as in our example.

Don’t Panic! – Preview Mode

Don_t_Panic__-_Preview_Mode.png

Publish your page

Published

Published.png

That’s it for now

 

Post to Twitter Tweet This Post

Filed Under: Free Stuff Tagged With: , , , ,

Make your Videos playback faster with S3/CloudFront

August 15, 2010 by Leave a Comment

In our class today for members, I am going to walk you through the key steps in using S3 and CloudFront to deliver your rich media files in RapidWeaver (in my example today we are using video)

Now , I have been using S3 ever since it was first launched a couple of years ago in addition to the more recent CloudFront service. The initial videos we delivered when starting SupportCasts were delivered over S3. However, we now use a commercial CDN offering too but our image storage is handled by S3 for all those who want to know.

Whilst I will not go into the boring details of signing up , if you have an Amazon.com account you are almost there as these are extra add-on services. What I will show you is the following:

  • S3 setup with the AWS management console
  • bucket creation
  • File permissions
  • configuring CloudFront
  • using the media file in RapidWeaver.

After going through the initial setup,  using S3 is a breeze and you will find it is a useful addition to compliment your web hosting which may not be so hot in delivering rich media in other words not great bandwidth throughput and general scalability which is always a problem with shared hosting. Not unless you running your own VPS ;)

Brace yourself for a nice 18 minutes of geeky fun, mistakes and all, and let us know what you think about delivering your videos over CloudFront/S3 (c’mon folks it was a rainy Sunday afternoon here).

Have fun and remember this lesson is only available for 6 and 12 month memberships.

Please Login or Register with SupportCasts to view the rest of this content.

Post to Twitter Tweet This Post

Filed Under: CDN, RapidWeaver, RapidWeaver Advanced, Video Tagged With: , , , , , ,

RW082 Custom 404 Pages

August 7, 2010 by 2 Comments

Hi there

We always get asked how about making a custom 404 error page in RapidWeaver. Well folks, today is your lucky day :)

Why a custom 404 error page? The reason is quite simple you want to retain,attract and direct the attention of your visitor. It’s not their fault they have entered something incorrectly and got a dull looking page that does not resemble your web site.

Another plus is that is great for search engines, you never know they might stumble on a bad page so you can have links in your new 404 page to go back to where they should be looking.

In todays show, I will walk you through:

  • creating a custom 404 error page in RapidWeaver, more specifically page settings.
  • editing the htaccess file ,
  • what to put in the htaccess file for the 404 page

Yes, all of that in 5 minutes .  So what are you waiting for …. ?

Please Login or Register with SupportCasts to view the rest of this content.

Post to Twitter Tweet This Post

Filed Under: RapidWeaver, RapidWeaver Advanced, Video Tagged With: , ,

Payloom 2 – Free show and chance to Win

November 15, 2009 by 8 Comments

payloom2-100pxFree show: We have a short overview today on PayLoom 2 which has recently just gone out of Beta.

You ever wanted to have an easy PayPal shopping cart  , ship your tangible goods (or even digital downloads ones – more on that in a later show)  and with RapidWeaver goodness then check this out.

But……..  We also have a few licences of PayLoom (worth $19.95) to give away too – Yipee!

Option 1 -Win one of 2 license keys

Post a fun comment in this post about how you will use PayLoom in your RapidWeaver project . We will close the competition on Friday 20th Nov (Pacific Time ) and pick the best two out of the comments submitted.*

Option 2 - Join SupportCasts

We have 5 copies of PayLoom 2 awesomeness to give away if you join Supportcasts, this only applies for 12 Month plans and strictly on a first come – first served basis.

So What’s stopping you?  Enjoy the show

* supportcasts.com decisions are final.

Post to Twitter Tweet This Post

Filed Under: Free Stuff, RapidWeaver Plugins Tagged With: , , ,

Tooltip Tuesday#2 – qTip

November 2, 2009 by 2 Comments

Tool Tip TuesdaysqTip is a jQuery tooltip that is packed with features. Many thanks to Craig Thompson for his work on this.

Today we are going to look at the basics of this tooltip and how to use it in our RapidWeaver project to spice things up a bit.

Visit Craig’s site – http://craigsworks.com/projects/qtip/ – to download the qTip script package so you can get started and see what’s ahead in future casts on qTip.
Please Login or Register with SupportCasts to view the rest of this content.

Post to Twitter Tweet This Post

Filed Under: RapidWeaver Advanced, Video Tagged With: , ,

ToolTip1 Follow Up – Free Show

October 31, 2009 by 1 Comment

A question was asked about controlling the “fade” of a Tooltip. Well jQuery and the jQuery tools allow us to control both the Fade In and the Fade Out.

Watch this short cast to learn how you can add these two effects to your Tooltips.

Place this in the Page Inspector> Header> Header

1
2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>

Here is the Custom CSS that I used in the Cast. If you call your main DIV by another name ensure that you change the CSS to match.
Place this code in the Page Inspector> Header> CSS

1
2
3
4
5
6
7

.tooltip { 
display:none; 
background-color:#ffa; 
border:4px solid #000; 
padding:8px; 
font-size:13px;
}

Here is the minimized Content I used on the HTML style page during the cast.
It contains the DIV class I discussed that is needed. It contains the link that I used. And the “initializer” script that jQuery and jQuery Tools needs.

1
2
3
4
5
6
7
8
9
10
11
12

<!-- the tooltip --> 
<div class="tooltip"></div>
<a class="tips" href="http://supportcasts.com" title="Making the Web a better place">SupportCasts</a>
 
<script> $("a.tips").tooltip({
// use div.tooltip as our tooltip tip: '.tooltip',
// tweak the position position: "bottom right", offset: [-100, -130],
// use fade effect instead of the default effect: 'fade',
// make fadeInSpeed similar to brower's default fadeInSpeed: 1000,
// make fadeOutSpeed similar to browser's default fadeOutSpeed: 1000,
}); 
</script>

Post to Twitter Tweet This Post

Filed Under: Free Stuff

ToolTip Tuesday #1

October 27, 2009 by 9 Comments

Tool Tip TuesdaysTo introduce our ToolTip Tuesday ( Editor : and you never know we may even pop in with some additional Quick Tips too :D  )

Here is a neat CSS solution to add funnily enough, ToolTips to your links in RapidWeaver, the same technique can be used in any other ‘sensible’ web development applcation too

Enjoy the free screencast.

HTML

<h2>By Default</h2>
<a title="RW Screencast Training" href="supportcasts.com">SupportCasts</a>
<h2>For an Active Link</h2>
<a class="tip" href="http://myrapidweaver.us">myRapidWeaver<span>Put Info Here</span></a>
<h2>Just for Information</h2>
<a class="tip" href="#">This is a tooltip<span>add text that appears just when you roll on with the mouse</span></a>
<h2>Just for Information</h2>
<a class="tip" href="#">What about an Image?<span><img src="assets/Beaker_512x512.png" alt="" width="108px" height="108px" /></span></a>

CSS

a.tip {
	position: relative;
         text-decoration: none;
}
 
a.tip span {
	display: none;
	position: absolute;
	top: -10px;
	left: 100px;
	width: 150px;
	z-index: 100;
	background: #ccc;
	border: 2px solid red;
	padding: 10px 0 10px 20px;
	color: #000;
	font-weight: bold;
	-moz-border-radius: 5px; /* this works only in camino/firefox */
	-webkit-border-radius: 5px; /* this is just for Safari */
	-webkit-box-shadow: -5px -5px 15px #222;
	-moz-box-shadow: 10px 10px 15px #ccc;
	box-shadow: 10px 10px 15px #ccc;
}
 
a:hover.tip {
	font-size: 99%; /* this is just for IE */
}
 
a:hover.tip span {
	display: block;
}
 
/*pageHeader CSS*/
 
#pageHeader h2 {
color: #000;
text-shadow: 2px 2px 2px #ddccb5;
}
 
/*footer CSS*/
#footer p {
font-size: 14px;
color: #000;
font-weight: bold;
text-shadow: 4px 4px 4px #ddccb5;
}
 
a:link {
text-decoration: none
}

Post to Twitter Tweet This Post

Filed Under: Free Stuff Tagged With: ,

RW065 – Awesome Buttons

October 18, 2009 by 5 Comments

Awesome Buttons…

Here’s a short screencast on how you can use some scalable buttons in your RapidWeaver web project with some CSS3 coding. These buttons come in three sizes – small, medium and large – and the only image that’s required is an overlay image. even though we do use RapidWeaver the same tricks can be applied to any other web development tool that you may use ;)
Okay lets get on with the show :)
Please Login or Register with SupportCasts to view the rest of this content.

Post to Twitter Tweet This Post

Filed Under: CSS, RapidWeaver Advanced Tagged With: ,

Quick Tip #2 – More Picassa and RapidWeaver

October 9, 2009 by 1 Comment

As part of our quick tip series, here you will find a method following on from our simple Picassa slideshow embed and using a lightbox effect (FlowBox)
Enjoy

Post to Twitter Tweet This Post

Filed Under: Free Stuff Tagged With: , , ,

Quick Tip – Picassa and RapidWeaver

October 8, 2009 by 1 Comment

picassa-100pxWelcome to the first of our RapidWeaver Quick Tips

In this quick screncast we show you how easy it is to embed Picassa into a RapidWeaver Page, no plugins involved, and in less than 2 minutes.

Enjoy

Post to Twitter Tweet This Post

Filed Under: Free Stuff Tagged With: , , ,

RW064 – Elastic Thumbs

October 3, 2009 by 3 Comments

Elastic Thumbnails

A neat little jQuery script that provides some smooth options for displaying images or creating a visual navigation tool. Enjoy the tutorial on using this in RapidWeaver
Please Login or Register with SupportCasts to view the rest of this content.

Post to Twitter Tweet This Post

Filed Under: RapidWeaver Advanced Tagged With: , ,

RW063 – LetterPress CSS3

September 28, 2009 by 1 Comment

Letterpress Technique in RapidWeaver

Letterpress is an industrial print that made its way into web design using images to accomplish the same effect.

Now with CSS3 we no longer need the images…Yay. Enjoy the show.
Please Login or Register with SupportCasts to view the rest of this content.

Post to Twitter Tweet This Post

Filed Under: CSS, RapidWeaver Advanced Tagged With: , , ,

RW062 – Working with Assets Part1

September 20, 2009 by 2 Comments

This is part 1 of a 3 part series about the different ways that you can add assets to your RapidWeaver Project file.

In this screencast I cover the “basics” of adding those assets using the Assets Panel in the Page Inspector. I also cover the pro’s and con’s to adding all your assets in this way.

Enjoy the Show

Please Login or Register with SupportCasts to view the rest of this content.

Post to Twitter Tweet This Post

Filed Under: RapidWeaver Next Steps Tagged With: , , ,

Unify Winners

September 18, 2009 by 4 Comments

Well we ran a short competition on unify and here are the winners.

David - dcpeterson[at]yahoo.com

Scott roundcubewebdesign.com

Yolanda Quintana yolanda-art.es

Fabio littleoak.net

Norman ntodman[at]mac.com

Unit Interactive will be in touch with the winners to setup their free copy of Unify and thanks to all who took part.

Post to Twitter Tweet This Post

Filed Under: News
«Older Posts
  • Page 1 of 2
  • 1
  • 2
  • >