Text Header

With just a little code, you can add your child's name or any other text to your web site's header. The name header shown in this image:



was created with the following code:

<div style="position: absolute; left: 100px; top: 5px;"><b><font size="+3" face="Trebuchet MS, Verdana, Helvetica, Arial">Brandon Connor</font></b></div>

To move your header, you can adjust the left: and top: numbers so the text fits on the theme you're using. You can also adjust the font size, font face, and even the color by adding a color attribute. If you do not use a color attribute, your text will be the same color as the rest of the text on your page.

Here's another example:

<div style="position: absolute; left: 100px; top: 5px;"><b><font size="+1" face="Arial" color="white">Welcome!</font></b></div>

You can also use hex codes to change the color of your text to any shade. Here's a great site where you can find hex codes for your favorite colors:

http://www.december.com/html/spec/colorcodes.html

#FFFFFF is the hex code for white. Here's an example of a hex code in place of a named color (using the same example as above):

<div style="position: absolute; left: 100px; top: 5px;"><b><font size="+1" face="Arial" color="#FFFFFF">Welcome!</font></b></div>

This code can be placed in any of your custom text areas, just make sure you select the HTML radio button.

Scrolling Text

You can add scrolling marquee text to any of your custom text areas. You can choose the background, border, border style, colors, and more.

Click this link to see how a marquee can be used on your site:

http://www.babysfirstsite.com/haileynicole/
(the scrolling marquee is in the left colum)

The code below was used to create the marquee on Hailey's site.

<div style="border-style: dotted; border-width: 3px; background-color: transparent;">
<marquee>
<font size="20">♥ Our Baby Girl ♥</font>
</marquee>
</div>

Experiment with the code, changing the display text, colors and border sizes. Here are some ways to customize your marquee:

<font size="20" color="white">Your Text Here</font>

<div style="border-style: solid; border-width: 5px; background-color: pink;">

Check out this site: http://w3schools.com/css/css_examples.asp for examples of all the attributes you can add!

Be sure to post a comment if you run into any snags. Others can benefit from your questions, too!

Adding Music to your Site

You can add sound to your site with a simple line of code and a single upload!

1. Upload the sound file you'd like to use to your Audio/Video section.

2. Open the album on your web site, find the file you've uploaded, then right click on the icon and click "copy shortcut" to get the URL of your music file.

3. Replace the "URL_of_your_sound_file" in the code below with the URL you copied from your site:

<embed src="URL_of_your_sound_file" autostart="true">


The finished code will look like this:

<embed src="http://www.babysfirstsite.com/members_media/
yourUserID/YourBaby'sName/Nameofsound.xxx" autostart="true">

Paste the finished code into a custom text area and make sure you select the HTML radio box. When your visitor's load your page, they'll hear the music you've selected.

Custom Link Graphics!

If you have more than one site with us or you'd like to link to any other site from your Baby's First Site web page, you can create custom link graphics with just a few simple lines of code.



You choose the text and place it right in the code for a completely custom button that links to anywhere you choose.

The following code was used to create the button in the example above:

<div id="sitelink_bigboy"><br /><div class="sitelink"><a href="http://www.babysfirstsite.com/Brandon">Click here to visit Brandon's web site!</a></div></div>


1. This is where you'll place the ID of the button style you'd like to use:

<div id="sitelink_bigboy">

There are 6 button styles currently available:

ID = sitelink_whitediaper


ID = sitelink_pinkdiaper


ID = sitelink_bigboy


ID = sitelink_biggirl


ID = sitelink_blueplain


ID = sitelink_pinkplain


2. Change this address to the address of the site you'd like to link:

<a href="http://www.babysfirstsite.com/Brandon">


3. Change this text block to the text you'd like on your button:

Click here to visit Brandon's web site!</a>

For a 3 line button, remove the <br /> in the example code. If you use too much text, your text will run off the button and you will need to trim it to fit in the space. More button styles will be available soon!

Logo Kid Images

Our popular logo kid images can be used on your web site, too. Just click the link below to find the image or images you'd like to place on your site, e-mail or blog post.

http://www.babysfirstsite.com/blogger/logokids/logokids.html

Right click the image you'd like to use, then copy the Address/Location of the file. Paste the address of the image in the code below:

<img src="address-of-photo-here">

Then place the code in any custom text area on your site!

You can use basic HTML to add decorative text to your images, too:

Brandon Connor

The text above was created with this code:

<font face="arial" color="navy" size="4">Brandon Connor</font>

Check out this basic HTML guide for more details.

Slideshow Creators

Have you seen any cool slideshow creators? Did you know you can use them on your Baby's First Site page? You can even replace your main home page image with a more exciting moving image!

Try out these sites for options:

http://www.rockyou.com

http://www.photobucket.com (create a "bucketstamp" by clicking "BucketFeatures" inside your album)

http://www.slide.com

http://www.picturetrail.com


Just paste the code for your slideshow in any text area on your site. Make sure you click the "HTML" radio button!

Add some glitter!

Try out http://www.glittermaker.com/ to make neat text like this:



Just use the first code on the right --> HTML (Websites, MySpace comments, etc.)

Paste it anywhere in your custom text fields or even in your page title!

Signatures and Tickers

Create a custom photo signature like this for use in message boards, blogs, and on your web site.

You choose the photo, the colors, frame, text, and more. All the code is generated for you right on the spot -- and you can have as many free accounts as you'd like. Just log out and create additional accounts to make more signatures.

Create pregnancy and birthday tickers, too:

Make a Ticker or Signature

Additional Home Page Photos

If you'd like a larger main image or multiple images, you can pull images directly from your photo albums to display on your home page.

If you'd like to replace your main image with a larger photo, first uncheck the "show image" check box in the left side customization area.

Then paste the following code in the custom text area where you'd like your image to appear:

<img src="LocationOfYourImageHere"/>

Next, find the photo you want to use in your photo album and copy the location (right click the photo and select "properties" from the menu).

Paste the location of your photo in the image tag.

You can place the code in your "Page Title" section so that it will be the very first thing on the page.

For bordered images, you can apply a CSS class to your img tag like this:

<img class="photoalbum" src="LocationOfYourImageHere"/>

That puts a neat border around any image of any size.

Free Photo Hosting

If you have photos you'd only like to use on your home page and would prefer to have your HTML code generated automatically, you can take advantage of our free photo hosting service at http://www.holdthatpic.com.

You can upload single images or sets of images and our software will generate all the code you need to immediately post your photos on your Baby's First Site home page or anywhere else on the web!

Dollz

Dollz are a great way to add personality to your site!



You can search the internet for dollz using Google, but here are a few great dollz creator sites to get you started.

http://elouai.com/doll-makers/candybar-doll-maker.php

http://64.246.54.26/dollzmania.com/dollmakerselection.htm

http://www.styledollz.com

** Remember, if you don't want your dollz to show up in any of your photo albums but you still want to use them on your home page, you can use the trick here:

http://yourbfs.blogspot.com/2006/12/photo-management-primer.html

to remove them from your album while keeping them accessible to your account.

If you notice that any of these links aren't working or if you have any dollz creator links you'd like to share, just leave a comment. Thanks!

Additional Web Sites

You can maintain up to 4 web sites on your account at no additional charge. To have additional sites set up for other children in your household, simply send the following information to support@babysfirstsite.com.

* Your User ID
* Child's full name (if you have one)
* Birth or Due Date
* Web address you'd like to use

Photo Management Primer

There are 2 ways to delete photos. First, you can go into the "Add Captions" section of your album, where you can see the thumbnail view. Under each image is a "delete" button that will delete the image from your album.

You can also access the "File Manager" in your site profile section. This method is a a bit tougher because it does not show thumbnails, but will allow you to delete a photo if you don't know which album it is in.

You can add photos from one album to another album in the "Add Captions" section, too. At the top of the page there is a section labeled "Add Photo" where you can select any photo you've already uploaded and add it to the album you're currently modifying.

You can delete entire albums and either delete their contents or move all photos to another album in the "Rename/Delete Album" section within the album you'd like to delete.

Neat tip: If you have a photo you'd like to use in your home page customization or on another site, but you do not want it to appear in any of your albums, here's a trick that might help:

- Upload the photo to any album

- View the photo on your web site and copy the location of the photo
* in IE, right click the photo, choose properties, and copy the contents of the "Address" field
* in Firefox, right click the image and choose "Copy Image Location"

The URL should look like this: http://www.babysfirstsite.com/members_imag...oname_large.jpg

- Use the "Add Captions" view to delete the photo from your album.

The photo will still remain in your account, but will no longer be visible in your album. Now you can use custom HTML to add that photo to your home page or use it as a forum or e-mail signature!

Column Widths

Your site has 3 main customization areas -- left, middle, and right. If you add extra wide custom content to the middle column, it will stretch the center column of your entire site. Sometimes, this will push the content in the right column off your viewer's screen.

If you'd like to avoid stretching your site beyond a reasonable resolution, try adding your wider custom content to the "Add Ticker" customization box instead of the main customization areas. This box allows you to add content that can fill the entire width of the screen without stretching the rest of your site.

Check out http://www.babysfirstsite.com/bailey and take a look at the pregnancy photo collage. It spans the entire width of the page, but doesn't disturb the widths of the rest of the columns. This collage was added to the ticker area.

It's always a good idea to make sure your site can be viewed without forcing your visitors to scroll to the right. You can do this by keeping the content in each column close to the width of the standard elements. The measurements below are a good guideline.

Left: 400 pixels maximum
Middle: 200 pixels maximum
Right: 250 pixels maximum

Add a Stat Counter

We already offer a basic hit counter for your site, but you can also get a more advanced tracking counter for free at http://www.statcounter.com. With a statcounter account, you can find out all kinds of information about your visitors and what they did while they were in your site!

You can choose an invisible counter that only you can access or a visible counter to match your site.

When you've signed up for your free account, you'll go through a few screens to get your special counter code. In this process you'll be asked a few questions. On the "Code Options" page, check "no" to "Does your website use frames?" and leave all other options unchecked.

You will be given a block of code to copy and paste into your custom text field.

In the first block of code, you'll need to remove the line breaks so it looks like this:

<script type="text/javascript">var sc_project=2125708;var sc_invisible=1;var sc_partition=19;var sc_security="c450a447";</script>

You can leave the second block of code unchanged.

If you run into any snags while installing, just leave your code pasted into any of your custom text fields and send an e-mail with your BFS user login ID to support@babysfirstsite.com.

Thought Bubble Tip

Does your thought bubble look like this?


HoldThatPic.com - Free Image Hosting

If you find your thought bubble text doesn't fit inside the bubble, keep in mind that you may have to trim your lines depending on the width of the letters you're using.

The bubbles are a bit of a manual process. Since all letters vary in their widths, the content you use in the bubble ultimately decides how many words you'll have space for. We have set a limit on the amount of text on each line, but it's not possible to calculate the width of each letter.

We have provided extra space on the line to to account for narrower letters. If you use words with lots of narrow letters like l, i, or t, you'll have a bit more space to use than if you are using a lot of capital letters or wider letters like m or w.

You may need to shorten the lines of text until they all reside on a single line. Unless your combination of letters is very narrow, you'll rarely be able to use the entire length of the line provided. If you go over into the next line, your content will be uneven and your last lines will overflow your bubble.

Getting Started

You can use HTML in any of the custom text fields on your site as well as in your page heading, ticker area, news entries, photo captions, and photo descriptions. This link should get you started with all the basic HTML tags you can use on your site:

http://www.ptialaska.net/~melissag/htmlguide/coverpage-guide.html

Basic HTML is just the tip of the iceberg! Use slideshows, music, video, Flash animations, hit counters, and more.

You can access your custom text areas by clicking "Site Profile" --> "Customize"

You'll find 3 columns that accept full customization. You can also turn off any or all of the features on your site from within their respective columns and with other settings inside your "Site Profile" section.

Tickers: Transparent Spots

True black is the default transparent color in our tickers. If you have uploaded a photo that has true black and portions of the photo appear as transparent, you can correct this problem in a photo editor by *slightly* modifying the brightness of your photo. Bringing the brightness down should change any true black into a different shade (you should not notice a visible change when viewing your photo).

If you've attempted to modify your photo and you're still seeing transparent spots, e-mail your photo to us at support@babysfirstsite.com and we'll attempt to correct it for you.

Tickers: AOL E-Mail

Outlook and Outlook Express require a 2-step process for creating signatures.

First, you need to set up an external HTML file with your ticker code saved inside.

Copy the code below to Windows Notepad:

<br />
<a href="http://www.babysfirstsite.com"><img src="http://www.babysfirstsite.org/newtickers/ticker/xxxxx.birthday.png" border="0" /></a>

Change the xxxxx to your unique ticker ID number (you can find this in your ticker code). Then, make sure the ticker type is correct for the ticker you'd like to display (birthday, birthdue, sigmaker). Save the file as sig.html.

In AOL:

1. Open a new mail message.
2. Click the "Signatures" button at the bottom of the new mail screen.
3. Click "Set up Signatures"
4. Click "Create" in the resulting pop-up
5. Give your signature a name, then open the text file I attached to this message.
6. Copy the entire contents of the notepad file to your clipboard, then paste it into the signature area.
7. Click OK (and make sure your signature is set to ON)

Tickers: MS Outlook

Outlook and Outlook Express require a 2-step process for creating signatures.

First, you need to set up an external HTML file with your ticker code saved inside.

Copy the code below to Windows Notepad:

<br />
<a href="http://www.babysfirstsite.com"><img src="http://www.babysfirstsite.org/newtickers/ticker/xxxxx.birthday.png" border="0" /></a>

Change the xxxxx to your unique ticker ID number (you can find this in your ticker code). Then, make sure the ticker type is correct for the ticker you'd like to display (birthday, birthdue, sigmaker). Save the file as sig.html.


In Outlook:

1. Go to Tools --> Options
2. Choose the "Mail Format" tab
3. Choose "HTML" in the "send in this message format" drop-down box.
4. Click "Stationery Picker"
5. Click "New"
6. Under #1 - Enter a name for your signature.
7. Under #2 - Select "use this file as a template"
8. Click "browse" and locate and double-click the sig.html file that you saved previously.
9. click "Next", then click OK.

Tickers: Outlook Express

Outlook and Outlook Express require a 2-step process for creating signatures.

First, you need to set up an external HTML file with your ticker code saved inside.

Copy the code below to Windows Notepad:

<br />
<a href="http://www.babysfirstsite.com"><img src="http://www.babysfirstsite.org/newtickers/ticker/xxxxx.birthday.png" border="0" /></a>

Change the xxxxx to your unique ticker ID number (you can find this in your ticker code). Then, make sure the ticker type is correct for the ticker you'd like to display (birthday, birthdue, sigmaker). Save the file as sig.html.


In Outlook Express:

1. Go to Tools --> Options
2. Choose the "Signatures" tab
3. Press "New"
4. Under "Edit Signature", select the button next to "File"
5. Click "Browse"
6. In the dialog, change the "Files of Type" dropdown to "All Files (*.*)"
7. Locate the sig.html file that you saved on your PC.
8. Check the box at the top of the screen that says, "Add signature to all outgoing messages"
9. Press "OK"

Tickers: Hotmail

These instructions will only work in Internet Explorer (because hotmail does not support image signatures created on any other browser).

1. From your mailbox, click "Options" at the top right of your screen.

2. Click "Mail" in the left column.

3. Click "Personal Signature".

4. Check the box next to "Show the rich-text toolbar."

5. Go to your ticker customization screen on Baby's First Site and copy the actual preview of your ticker image. Just start at the left and drag over until it is highlighted. It may take a few tries to find the right spot. Once it's highlighted, use Ctrl-C to copy it.

6. Paste the image you copied into the signature box (use Ctrl-V) in your hotmail settings screen. You should see the image in the box. Then just click OK.

Tickers: Yahoo E-Mail

Yahoo makes setting up your ticker signature simple. It may take a few tries to get the hang of highlighting, but this is the best method for setting up your Yahoo signature.

In your Yahoo mailbox:
1. Go to Mail Options
2. Click Signature

3. Go back to your ticker customization page and copy the actual image that shows up at the top of the page when you preview your ticker (use Control-C or Edit --> Copy to copy the image).

* Just start somewhere to the left or right of the image and drag over it to highlight it (turning it grey in the process).

4. Go back to your Yahoo signature settings page (make sure you're in "Color and Graphics" mode).
5. Paste the image into the signature box (using Control-V or Edit --> Paste). If the image was copied properly, it will show in the signature box.

Make sure you check the box to add it to outgoing messages and make sure you set yahoo to allow HTML when you are composing new messages.

Tickers: Additional Accounts

Ticker accounts are designed to handle a single child from pregnancy through age 5. Your ticker account has just one due/birth date entry field, which carries through to you pregnancy, birthday, and sigmaker settings.

Each child needs his or her own account and will be assigned a unique ID. There is a link on the customization screen labeled "Logout / Create second ticker". When you are returned to the login screen, just click the registration link above the login field ("If you have haven't registered yet, click here to register.") to sign up for any additional ticker accounts.