HowTo

This is my 'live' notebook  in which I record 'How To' do something. Virtually every post is related to using Sandvox to create a website.

There are also experiments of 'what happens if...' and 'what does it look like'.

Some of my tutorials have a step-by-step version at my WordPress site  at [http://www.stephowto.com].



recent-button

Click to see the tutorials listed with Most Recent at the top.

Add and Embed a YouTube or Vimeo Video

Add and Embed a YouTube or Vimeo Video

In Sandvox Pro, you can embed YouTube, Vimeo or similar hosted video into your Sandvox created website by using the HTML code provided by…

Banner - Making a Custom Banner Clickable

Banner - Making a Custom Banner Clickable

If you add a Custom Banner you will most likely want to delete the text in the Home Page Header and Sub-Header. This creates a site Home…

Collection Archive Pagelet

Collection Archive Pagelet

The Collection Archive pagelet adds a month-by-month breakdown of the posts that have been made to a blog. The date for each post is…

Collection Index Pagelet - Navigation

Collection Index Pagelet - Navigation

The Collection Index pagelet is a very useful aid to add structure and navigation to a site. It creates a sidebar of links that are…

Collection Index Pagelet - Vertical Menus

Collection Index Pagelet - Vertical Menus

Using Collection Index pages in Sandvox it is possible to create a form of vertical site navigation menu. I also discovered in doing this…

Collection Index Pagelet to Blog Posts

Collection Index Pagelet to Blog Posts

To show the use of a Collection Index Pagelet to link to blog posts in a Collection with No Index I made this site: [Stress-Free]

It has a…

Colour of Site in Different Browsers

Colour of Site in Different Browsers

The colour of a Design can look different in different browsers and on different Operating Systems and depend on how the viewer has their…

Comments - Manually Add Disqus Comments

Comments - Manually Add Disqus Comments

Update: Sandvox 1.6 now adds Disqus from the Inspector.

You DO NOT need Sandvox Pro to do this.

You DO NEED to create a Disqus account first…

Comments - Three Comments Systems Side-by-Side

Comments - Three Comments Systems Side-by-Side

Three micro-sites, one with Disqus comments, one with IntenseDebate comments and one with JS-Kit comments to allow side-by-side comparison. These are the three types of Comments that can easily be turned on from the Inspector of Sandvox 1.6

Contact Form - Modified to make a Survey

Contact Form - Modified to make a Survey

With Sandvox 1.5 more field types and options have been added to the Contact Form page/pagelet than were previously available in Sandvox.

CSS - Format Indents

CSS - Format Indents

The question ["I would like to format my body text with a indent"] was asked on the Sandvox Yahoo! Group to format text differently. A…

CSS - Page Background Colour

CSS - Page Background Colour

Change the page background colour by pasting CSS:

<style type="text/css">

body.allow-sidebar #main { background: #CC9999; }

</style>

 in:

 

CSS - Photo Page Height

CSS - Photo Page Height

No CSS code injection to adjust the photo page height, just the standard automatic height adjustment. The jumping is noticeable moving to…

CSS - Sidebar Font Size Made Bigger

CSS - Sidebar Font Size Made Bigger

The font size in the Sidebar pagelet can be increased using the Code Injection:

Site > Site Code Injection... > Head Area [bottom box]

...…

Draft Page - Tips on Using Draft Pages

Draft Page - Tips on Using Draft Pages

There are potential problems with using Draft Pages in Sandvox

If you publish the page then change it to a Draft (do not publish) in the…

Experiment - CDM Site Nav System

Experiment - CDM Site Nav System

As an alternative to the Breadcrumb Bar [041 - Breadcrumb Navigation] method, I am developing a Chocolate Bar or CDM Site Nav' system,…

Experiment - Line Card Photo Album

Experiment - Line Card Photo Album

This is an experiment to create a 'Line Card'. The examples #1 and #2, have a combination of Photo Album collection pages containing an…

Experiment - Step-by-step in Sandvox

Experiment - Step-by-step in Sandvox

I had hoped to create step-by-step files another way that isn't working for me. This test is using Sandvox from start to finish. It hits…

External Page - List of Links

External Page - List of Links

Exploring the problem of linking to external pages.

External Page - Page within Page

External Page - Page within Page

An alternative way to link to external pages.

This is a Collections > Sorted Tile List page containing two Pages > External Pages 
In the

FancyZoom - Pop-out Images in Sandvox

FancyZoom - Pop-out Images in Sandvox

You need Sandvox Pro to do this.

I have added a MobileMe site to show it works on there too. I found that I need to edit the links to the…

FancyZoom on MobileMe Site

FancyZoom on MobileMe Site

Making FancyZoom work on MobileMe is a little more complicated. See here...

Google - Copy and Paste Images into Gmail

This How To was created in ScreenStep Pro 2.7 beta. To get it into Sandvox was a round-the-houses route -- In ScreenSteps, Copied to…

Google - Create a Google Form

Google - Create a Google Form

I am in the process of updating to keep pace with changes made by Google.

The how to instruction [not uploaded yet]

Google Map - Prepare and Add it to Sandvox

Google Map - Prepare and Add it to Sandvox

I have re-edited this page and add the map below. I have written what I did to prepare the Google map and iframe code and how to paste the…

HaloScan - JS-Kit Poll - Restore Access

HaloScan - JS-Kit Poll - Restore Access

There is the script for a JS-Kit Poll between the horizontal lines below. I pasted it into the Raw HTML... view of this Rich Text page. I…

HaloScan - Page Delete Experiment

HaloScan - Page Delete Experiment

[Update - this info is now obsolete]

Original Page 1: This is a test to see what happens to HaloScan comments if the original page on which…

HTML - Anchor Tag

HTML - Anchor Tag

Top | Bottom

It is possible to jump between different places on the same web page by using the HTML Anchor tag <a...></a> in combination…

HTML - Browser ToolTip

HTML - Browser ToolTip

Some browsers display  a "tooltip" when the user's mouse hovers over text that has the HTML  <p title=" "> element.

Example: Pasting this…

HTML - Bulleted Lists

HTML - Bulleted Lists

Bulleted lists are not supported directly with Sandvox but can be pasted into the text area using HTML code.

Edit > Paste HTML into Text:

HTML - IFrame - Two Sites on the Page of One

HTML - IFrame - Two Sites on the Page of One

This is a experiment in reply to an ambiguous question to ["create a single embeded image button that downloads two items from separate…

HTML - Meta Description Tag

HTML - Meta Description Tag

Going by this [Official Google Blog] meta description tags are helpful to search engines.

[Update - Sandvox 1.6.x will do this from the…

Image Map - How to Add a Simple Map

Image Map - How to Add a Simple Map

I have created a Simple HTML image map using [Rage MapDesign].

I have pasted the <body> content of the HTML code into a Raw HTML pagelet.

JavaScript - Open New Windows from Old

JavaScript - Open New Windows from Old

Currently in Sandvox 1.5.2, Amazon List links only open within the current window of a browser. A question was asked on the Sandvox Yahoo!…

JavaScript - Quote of the Day

JavaScript - Quote of the Day

This is a simple Random 'Tip' display JavaScript generate on the web page at:
[http://javascript.about.com/library/bltipgen.htm], that…

Jing - New Features of Pro Version 2.1

Jing - New Features of Pro Version 2.1

The is to remind myself of the new features in Jing Pro 2.1. Firstly, hold down the Shift or Control key when dragging out a selection area…

Jing - Video Screencasting Using SWF Video

Jing - Video Screencasting Using SWF Video

As an experiment with the concept of screencasts, I started used [Jing by TechSmith].

[Update: There is now a Pro version of Jing that…

Links within a Sandvox Site Document

Links within a Sandvox Site Document

My experience is that links to pages within the active Sandvox Site Document stay connected if you edit the Page Title in the Inspector or…

Meta Tags - Keyword Space Saving

Meta Tags - Keyword Space Saving

When you type a word followed by a comma in the Meta Tags/Keywords box on the Site Outline, Sandvox automatically creates a 'blue bubble'…

MobileMe - Uploading Video via iDisk

MobileMe - Uploading Video via iDisk

Sometimes Sandvox stalls when uploading/publishing large movie files.

If you are using MobileMe, you can upload the movies using the Finder…

Navigation - Alternatives to the Site Menu

Navigation - Alternatives to the Site Menu

On certain Sandvox designs, when looked at using Internet Explorer 6 or 7 with the Text Size set in the browser to 'Largest', it is…

Navigation - Breadcrumb Bar

Navigation - Breadcrumb Bar

How I added the breadcrumb JavaScript to the top of the page in a Sandvox created site.

You need Sandvox Pro to do this.

1. I downloaded the…

Navigation - How to Disappear the Menu Bar

Navigation - How to Disappear the Menu Bar

Knowledge is what you get when looking for something else. And so it was when I discovered that you can make the horizontal navigation bar…

Navigation - Menu Bar - Sorting the Order

Navigation - Menu Bar - Sorting the Order

Down the left-hand side of the Sandvox window is the Site Outline. The top page in the list is the 'Home page' of the site; the first page

Navigation - Sidebar Site Menu Buttons

Navigation - Sidebar Site Menu Buttons

These are simple graphic image buttons created in [Art Text 2] which have been linked to the named sections of this site. I have used a…

Pagelet - Moving Pagelets and Callouts

Pagelet - Moving Pagelets and Callouts

You can arrange and move the positions of Pagelets and Callouts using the Inspector and some careful jiggling.

  • Individual pagelets on…

Pagelet - MP3 as Background Music

Pagelet - MP3 as Background Music

If you add an audio file (MP3) to a pagelet, you may not want the pagelet to be seen at all. It is possible to hide it completely using a…

Pagelet - Photo Link Opens New Window

Pagelet - Photo Link Opens New Window

Problem:
Want a simple way to create a link from a photo/image in a *Photo* pagelet so that when I click on that photo it takes me to…

PayPal - Add a PayPal Button in Sandvox

PayPal - Add a PayPal Button in Sandvox

This is a test for inserting a PayPal button. You need Sandvox Pro to be able to do this because you need to have access to the Edit Raw…

PDF Documents Add to Sandvox Site

PDF Documents Add to Sandvox Site
  • Okaloosa County Home Sales Data
  • PDF Download List
  • PDF File Download
  • Video - Drag and Drop PDF

Photo Album - Image link to Album and BannerZest

Photo Album - Image link to Album and BannerZest

Two 'Property Card' images have been drag-and-dropped into the text area of this Photo Album (1) Collection:

1. Inside this first…

Photo Album - Image Links to Photos on Flickr 

Photo Album - Image Links to Photos on Flickr

I uploaded my pictures to Flickr, first. All buttons go to the relevant home page for the button name. The style of link is controlled by…

Photo Album - Linking to a Collection

Photo Album - Linking to a Collection

This is a Photo Album and contains Photo Pages.

Photo Album - with music

Photo Album - with music

This is an experiment to see if music added to a parent album continues to play in the child photo albums.

Result: Whilst the Music on the…

Photoshop Elements Gallery Added to Sandvox

Photoshop Elements Gallery Added to Sandvox

This is an experiment to link an Adobe Photoshop Elements Web Gallery using a Sandvox External Page with the Inspector setting as…

RSS - Add an RSS Feed

RSS - Add an RSS Feed

Having an RSS Feed means that people can Subscribe to you web log and will see when you add new articles to your collection.

You add a…

RSS - Control Number of RSS Posts 

RSS - Control Number of RSS Posts

On a Sandvox Weblog Collection page, it is possible to control how many posts are shown on the page using the Inspector. You have to click…

RSS Feed Page - Tumblr

RSS Feed Page - Tumblr

This is a Sandvox RSS Feed page. I am just trying it out. It is linked to my tumblelog [isawnotes.com] on Tumblr.

RSS Feed Page - WordPress

RSS Feed Page - WordPress

This is a Sandvox RSS Feed page. I am just trying it out. It is linked to my WordPress [StepHowTo.com] site.

Sandvox - Adding Categories Fudgeup

Sandvox - Adding Categories Fudgeup

[2nd Update - I have scrapped this experiment and removed the pagelet. Broken links are a sod to find in Sandvox. And List of Links quickly…

Sandvox - Callouts Off, Terminally

Sandvox - Callouts Off, Terminally

There is a Hidden Preference for Sandvox that is set in the Terminal to turn off 'Callouts' in an index Collection Page. A Callout is a…

Sandvox - Show Package Contents

Sandvox - Show Package Contents

One of the new features of Sandvox 1.5 is that the Site Document file can be opened and the actual media files (JPGs, PDFs, SWFs etc.) can…

Sandvox - Update Keychain Access Issue

Sandvox - Update Keychain Access Issue

I first explained my solution for this problem on Sandvox Support Forum back in September. I have decided to put my screencasts and written…

Sandvox - Using Different Versions

Sandvox - Using Different Versions

It possible to have different versions of Sandvox running on the same computer but preferably not at the same time though it is possible.…

Setup Host - Publish to Local Folder

Setup Host - Publish to Local Folder

An interesting [discussion on the Sandvox Yahoo! Group] from problems Publishing a site lead to the idea of publishing to the local Sites…

Setup Host - Web Sharing & Localhost

Setup Host - Web Sharing & Localhost

If you just export a site from Sandvox then open it with Safari, certain links will cause the Finder to open instead of the index.html page…

Site Menu Link to Alternative Site 

Site Menu Link to Alternative Site

It is possible to have an alternative language site by publishing the other language to a Subfolder and linking to the Subfolder from a…

TextEdit - Used to Create a Text Graphic

textedit-text-graphic.png

A simple way to create a picture of text is to use TextEdit to create the text and a screen grabber to take a picture of the text on…

TextEdit - Zoom Text Size on Screen

TextEdit - Zoom Text Size on Screen

It took me ages to realise that it is possible to zoom in on text in TextEdit without changing the font size. It's simple once you know…

Tumblr - Embed Tumblelog in Sandvox

Tumblr - Embed Tumblelog in Sandvox

This is my [tumblelog > And Then...] hosted by [Tumblr] embedded into a Rich Text HTML page of my Sandvox Pro created website. Your need…

Weblog - Control Number of Posts Shown on Index

Weblog - Control Number of Posts Shown on Index

As more pages are added to a Weblog Collection, the index page can become very long and a lot of data needs to be downloaded for the page…

YouTube - Embed HQ Video Tip

YouTube - Embed HQ Video Tip

On the YouTube site, you can change the size of the embedded video by clicking Customize 'gear' button to the right of the embed code of…