JoshLockhart.com: Tutorials http://209.20.90.59:8082/index.php en joshlockhart@gmail.com Copyright 2009 2009-08-26T02:11:51+00:00 Copyright 2009, Josh Lockhartrapidweaver,html,css,php,sqlTechnology/Software How-Toinfo@joshlockhart.comJosh LockhartJosh Lockhartnorapidweaver,html,css,php,sqlShort RapidWeaver, HTML, CSS, and PHP tutorialsShort tutorials to help you learn RapidWeaver, HTML, CSS, PHP, and more. An overview of my Envision RapidWeaver Theme http://feedproxy.google.com/~r/joshlockhart_tutorials/~3/RGOqtKwYOaA/ http://www.joshlockhart.com/index.php/tutorials/article/an-overview-of-my-envision-rapidweaver-theme/#When:02:11:51Z Watch a quick video tutorial to learn more about my new Envision RapidWeaver theme.

Download Tutorial]]> Envision 2009-08-26T02:11:51+00:00 info@joshlockhart.com (Josh Lockhart)no Watch a quick video tutorial to learn more about my new Envision RapidWeaver theme. Download TutorialJosh Lockhart Watch a quick video tutorial to learn more about my new Envision RapidWeaver theme. Download Tutorialrapidweaver,html,css,php,sqlhttp://www.joshlockhart.com/index.php/tutorials/article/an-overview-of-my-envision-rapidweaver-theme/#When:02:11:51Zhttp://media.joshlockhart.com/videos/envision/overview.mov Convert a RapidWeaver photo album into a PrettyPhoto lightbox gallery http://feedproxy.google.com/~r/joshlockhart_tutorials/~3/42HIhbVdlzA/ http://www.joshlockhart.com/index.php/tutorials/article/convert-a-rapidweaver-photo-album-into-a-prettyphoto-lightbox-gallery/#When:20:17:01Z Update: I have included a new optional script below that will also convert the photo album image captions into lightbox titles. Only use one of the Javascript snippets below. Do not use both.

Many of my Flex RapidWeaver theme customers have asked how to convert a RapidWeaver photo album page into a PrettyPhoto lightbox gallery. It’s actually quite easy. This tutorial assumes you are using a traditional RapidWeaver photo album page. This tutorial also assumes you are using my Flex RapidWeaver theme. Here’s the Javascript code you will need:

Without Titles

jQuery(document).ready(function($){
	$('.thumbnail-frame').each(function(i,item){
		$('a:first',this).attr(
			'rel','prettyPhoto[gallery1]'
		).attr(
			'href',
			$('a:first',this).children('img')[0].src.replace(/\-thumb/,'-full')
		);
	});
	$('.thumbnail-frame a').prettyPhoto();
});

With Titles

jQuery(document).ready(function($){
	$('.thumbnail-frame').each(function(i,item){
		$('a:first',this).attr(
			'rel','prettyPhoto[gallery1]'
		).attr(
			'href',
			$('a:first',this).children('img')[0].src.replace(/\-thumb/,'-full')
		).attr(
			'title',
			$('p.thumbnail-caption:first',this).text()
		);
	});
	$('.thumbnail-frame a').prettyPhoto();
});

And this is how you convert the photo album page into a PrettyPhoto lightbox gallery:

  1. View your photo album page in RapidWeaver in Edit Mode
  2. Open the Page Inspector -> Header -> Javascript tab
  3. Paste the above Javascript code into the Javascript tab
  4. Preview your Photo Album page

That’s all there is to it! Post your questions and comments below.

]]> Flex, Javascript 2009-08-19T20:17:01+00:00 info@joshlockhart.com (Josh Lockhart)http://www.joshlockhart.com/index.php/tutorials/article/convert-a-rapidweaver-photo-album-into-a-prettyphoto-lightbox-gallery/#When:20:17:01Z Flex: How to replace the default layout icons http://feedproxy.google.com/~r/joshlockhart_tutorials/~3/q88mKb1Y2Mo/ http://www.joshlockhart.com/index.php/tutorials/article/flex-how-to-replace-the-default-layout-icons/#When:16:02:20Z Learn how to replace the default Flex layout icons with your own custom icons.

Download Tutorial]]> Flex 2009-07-27T16:02:20+00:00 info@joshlockhart.com (Josh Lockhart)no Learn how to replace the default Flex layout icons with your own custom icons. Download TutorialJosh Lockhart Learn how to replace the default Flex layout icons with your own custom icons. Download Tutorialrapidweaver,html,css,php,sqlhttp://www.joshlockhart.com/index.php/tutorials/article/flex-how-to-replace-the-default-layout-icons/#When:16:02:20Zhttp://media.joshlockhart.com/videos/flex/replace-icons.mov Flex: How to use custom header background images http://feedproxy.google.com/~r/joshlockhart_tutorials/~3/XxUM2TNtqnY/ http://www.joshlockhart.com/index.php/tutorials/article/flex-how-to-use-custom-header-background-images/#When:16:00:07Z Learn how to use custom header background images in Flex. See how to install images and customize the image’s position and repeat directions.

Download Tutorial]]> Flex 2009-07-27T16:00:07+00:00 info@joshlockhart.com (Josh Lockhart)no Learn how to use custom header background images in Flex. See how to install images and customize the image’s position and repeat directions. Download TutorialJosh Lockhart Learn how to use custom header background images in Flex. See how to install images and customize the image’s position and repeat directions. Download Tutorialrapidweaver,html,css,php,sqlhttp://www.joshlockhart.com/index.php/tutorials/article/flex-how-to-use-custom-header-background-images/#When:16:00:07Zhttp://media.joshlockhart.com/videos/flex/images.mov Flex: How to use the built-in PrettyPhoto lightbox on a RapidWeaver Styled Text page http://feedproxy.google.com/~r/joshlockhart_tutorials/~3/bQXwYhxvwbA/ http://www.joshlockhart.com/index.php/tutorials/article/flex-how-to-use-the-built-in-prettyphoto-lightbox-styed-text-page/#When:15:56:35Z Learn how to use the built-in PrettyPhoto lightbox in Flex on a Styled Text page to quickly create professional lightbox galleries for images, SWFs, Quicktime videos, and YouTube videos.

Download Tutorial]]> Flex, Javascript 2009-07-27T15:56:35+00:00 info@joshlockhart.com (Josh Lockhart)no Learn how to use the built-in PrettyPhoto lightbox in Flex on a Styled Text page to quickly create professional lightbox galleries for images, SWFs, Quicktime videos, and YouTube videos. Download TutorialJosh Lockhart Learn how to use the built-in PrettyPhoto lightbox in Flex on a Styled Text page to quickly create professional lightbox galleries for images, SWFs, Quicktime videos, and YouTube videos. Download Tutorialrapidweaver,html,css,php,sqlhttp://www.joshlockhart.com/index.php/tutorials/article/flex-how-to-use-the-built-in-prettyphoto-lightbox-styed-text-page/#When:15:56:35Zhttp://media.joshlockhart.com/videos/flex/prettyPhoto2.mov Flex: How to use the built-in PrettyPhoto lightbox on a RapidWeaver HTML page http://feedproxy.google.com/~r/joshlockhart_tutorials/~3/J0AoXMtz8Jo/ http://www.joshlockhart.com/index.php/tutorials/article/flex-how-to-use-the-built-in-prettyphoto-lightbox-html-page/#When:15:53:00Z Learn how to use the built-in PrettyPhoto lightbox in Flex on an HTML page to quickly create professional lightbox galleries for images, SWFs, Quicktime videos, and YouTube videos.

Download Tutorial]]> Flex, Javascript 2009-07-27T15:53:00+00:00 info@joshlockhart.com (Josh Lockhart)no Learn how to use the built-in PrettyPhoto lightbox in Flex on an HTML page to quickly create professional lightbox galleries for images, SWFs, Quicktime videos, and YouTube videos. Download TutorialJosh Lockhart Learn how to use the built-in PrettyPhoto lightbox in Flex on an HTML page to quickly create professional lightbox galleries for images, SWFs, Quicktime videos, and YouTube videos. Download Tutorialrapidweaver,html,css,php,sqlhttp://www.joshlockhart.com/index.php/tutorials/article/flex-how-to-use-the-built-in-prettyphoto-lightbox-html-page/#When:15:53:00Zhttp://media.joshlockhart.com/videos/flex/prettyphoto.mov Flex: How to use the built-in jQuery Javascript library http://feedproxy.google.com/~r/joshlockhart_tutorials/~3/4LmV1L4BU8E/ http://www.joshlockhart.com/index.php/tutorials/article/flex-how-to-use-the-built-in-jquery-javascript-library/#When:15:45:15Z Learn how to use the built-in jQuery 1.3.2 Javascript library in Flex.

Download Tutorial]]> Flex, Javascript 2009-07-27T15:45:15+00:00 info@joshlockhart.com (Josh Lockhart)no Learn how to use the built-in jQuery 1.3.2 Javascript library in Flex. Download TutorialJosh Lockhart Learn how to use the built-in jQuery 1.3.2 Javascript library in Flex. Download Tutorialrapidweaver,html,css,php,sqlhttp://www.joshlockhart.com/index.php/tutorials/article/flex-how-to-use-the-built-in-jquery-javascript-library/#When:15:45:15Zhttp://media.joshlockhart.com/videos/flex/jquery.mov Flex: How to use the built-in RapidSearch form http://feedproxy.google.com/~r/joshlockhart_tutorials/~3/6lCLvfI7Rc0/ http://www.joshlockhart.com/index.php/tutorials/article/flex-how-to-use-the-built-in-rapidsearch-form/#When:15:38:02Z Learn how to setup and use the integrated RapidSearch form in Flex.

Download Tutorial]]> Flex, RapidSearch 2009-07-27T15:38:02+00:00 info@joshlockhart.com (Josh Lockhart)no Learn how to setup and use the integrated RapidSearch form in Flex. Download TutorialJosh Lockhart Learn how to setup and use the integrated RapidSearch form in Flex. Download Tutorialrapidweaver,html,css,php,sqlhttp://www.joshlockhart.com/index.php/tutorials/article/flex-how-to-use-the-built-in-rapidsearch-form/#When:15:38:02Zhttp://media.joshlockhart.com/videos/flex/rapidsearch.mov Flex: Overview http://feedproxy.google.com/~r/joshlockhart_tutorials/~3/O-_oqq-yiv8/ http://www.joshlockhart.com/index.php/tutorials/article/flex-overview/#When:15:28:08Z A brief introduction to and overview of Flex, my new RapidWeaver theme.

Download Tutorial]]> Flex 2009-07-27T15:28:08+00:00 info@joshlockhart.com (Josh Lockhart)no A brief introduction to and overview of Flex, my new RapidWeaver theme. Download TutorialJosh Lockhart A brief introduction to and overview of Flex, my new RapidWeaver theme. Download Tutorialrapidweaver,html,css,php,sqlhttp://www.joshlockhart.com/index.php/tutorials/article/flex-overview/#When:15:28:08Zhttp://media.joshlockhart.com/videos/flex/overview.mov How to customize a RapidWeaver theme the right way http://feedproxy.google.com/~r/joshlockhart_tutorials/~3/1gxiIZGUYa4/ http://www.joshlockhart.com/index.php/tutorials/article/how-to-customize-a-rapidweaver-theme-the-right-way/#When:21:05:53Z Overview

Not everyone is satisfied with a RapidWeaver theme's default CSS styles. Some users provide their own CSS styles to customize a RapidWeaver theme to their liking. Unfortunately, upgrading a customized theme to a new version can be painful, especially if a lot of changes were made by the user. Here is my recommended way to customize a RapidWeaver theme that makes theme upgrades a breeze.

Isolate your changes

It is important to isolate your own CSS modifications into a separate style sheet. Do not change the RapidWeaver theme's default style sheet. Isolating your own custom CSS styles makes future theme upgrades quick and easy. For this tutorial, I will demonstrate how to customize my Silk RapidWeaver theme.

Step 1: Create custom.css

First, open a test website file in RapidWeaver. Open the Theme Library panel (View > Show Themes). Right-click on the Silk theme and select "Reveal Theme Contents in Finder". The resultant Finder window should look like the following screenshot.

Finder screenshot

Next, create a new file in "/Contents/" called custom.css. The Finder window should now look like the following screenshot.

Finder screenshot showing custom.css file

Step 2: Update Theme.plist

Next, we need to tell RapidWeaver to include our custom.css file when publishing or exporting your website. To do this, open Theme.plist in a text editor. Locate the "Files to Copy" array. It looks like this: 

<!-- Files to copy -->
<key>RWCopyFiles</key>
<array>
	<string>css</string>
	<string>images</string>
	<string>styles.css</string>
	<string>print.css</string>
	<string>colourtag.css</string>
	<string>jquery-1.3.2.min.js</string>
	<string>setup.js</string>
	<string>javascript.js</string>
	<string>rounded.js</string>
	<string>transparency.js</string>
	<string>ie6.css</string>
	<string>ie7.css</string>
</array>

Insert a new array item for the custom.css file. The new array will look like this: 

<!-- Files to copy -->
<key>RWCopyFiles</key>
<array>
	<string>css</string>
	<string>images</string>
	<string>styles.css</string>
	<string>print.css</string>
	<string>colourtag.css</string>
	<string>jquery-1.3.2.min.js</string>
	<string>setup.js</string>
	<string>javascript.js</string>
	<string>rounded.js</string>
	<string>transparency.js</string>
	<string>ie6.css</string>
	<string>ie7.css</string>
	<string>custom.css</string>
</array>

Step 3: Update index.html

Insert a link to the custom.css file in the theme's index.html template file. This update ensures any CSS in custom.css is applied to your website. In the Finder window (see above screenshot), open index.html in a text editor. We insert a link to custom.css in the document's head. 

<head>
	%header%
	<title>%title%</title>

	<link rel="stylesheet" href="%pathto(styles.css)%" type="text/css" media="all" />
	<link rel="stylesheet" href="%pathto(colourtag.css)%" type="text/css" media="all" />
	<link rel="stylesheet" href="%pathto(print.css)%" type="text/css" media="print" />
	
	<!-- Insert custom.css link here -->
	<link rel="stylesheet" href="%pathto(custom.css)%" type="text/css" media="all" />
	
	%style_variations%
	%user_styles%

	<!-- Subsequent markup omitted for brevity -->

</head>

Be sure you add the custom.css link after the other links but before the %style_variations% text. Also be sure you surround custom.css with the %pathto()% syntax exactly as shown above.

The Result

You're done! Now you can safely add your own custom CSS into the custom.css file. When you upgrade the Silk theme to a new version, you only need to copy your custom.css file into the upgraded theme file and repeat steps 2 and 3 above.

]]> HTML and CSS, Silk 2009-07-26T21:05:53+00:00 info@joshlockhart.com (Josh Lockhart)http://www.joshlockhart.com/index.php/tutorials/article/how-to-customize-a-rapidweaver-theme-the-right-way/#When:21:05:53Z Copyright 2009, Josh LockhartJosh LockhartnonadultShort RapidWeaver, HTML, CSS, and PHP tutorials