By request!

The Little Birdie theme is now available in pink, too!

Little birdie...

A new whimsical theme that's perfect for the upcoming winter in trendy tones of blue and brown.

Another new theme!

Starlight... starbright:
a sparkling shooting star theme perfect for boys and girls!

Our theme library is growing!

So far, five fun and fresh new themes have been added to our theme library. We invite you to easily preview them here (along with others that will be released in the coming days and weeks). Try out one of these new themes to spiff up your site!

More new themes are coming so keep checking the blog. Let us know your favorites by leaving a comment on the blog. It's a great way to ensure we make more in the styles you love!


Modern Girl:
a funky bold geometric in pink


Modern Boy:
just as bold and not quite so pink


A Mother's Love...:
Would you like to see more theme's with touching quotes about childhood and motherhood? Leave a comment on the blog to let us know!


Vintage Sage:
Perfect for boys and girls in subtle shabby chic tones


Fall with a Twist:
Bold fall leaves in a neat combo of blue and brown that's perfect for all ages

Let it Snow Layout Template (Advanced HTML / CSS)

If you're stuck on how to organize your front page, all the code you need to create this layout is contained in this post! If you're a VERY advanced user, you can change this code to suit your tastes, or follow it to the letter. If you don't want to use the entire layout, you can choose the pieces you'd like to keep or add more elements. Just remember that when you change the code, it may change how the finished layout looks.



Before you begin, please log into your Baby's First Site account so that you can access the links to various sections of your parent tool. You will be editing your page title and each of the four custom text areas in your site. You'll add your own photo URLs and text to create your layout.

As you add your own text to the layout, you should not exceed the amount of text that is used in the sample code. If you do, you may exceed the character limit of the field resulting in your information not saving OR create an overflow of text that changes the look of the layout.

OK, let's get started!

Page Title Section (left column):

1. Select the "Let it Snow" theme from the "Select Theme" section of your parent tool.

2. Open Notepad or another text editor. You'll need somewhere to paste blocks of code while you are working with them. You can usually access Notepad by going to Start --> Programs --> Accessories --> Notepad.

2. Copy the code below and paste it into Notepad:

<img src="http://www.babysfirstsite.com/snow.gif"> Yep, it's still winter!<br /><br /><img class="photoalbum" src="http://quick.holdthatpic.com/images/YourImageID.jpg" width="400">


Change the main title text to whatever you'd like, remembering to keep it under approximately 25 characters.

2. Click Hold That Pic! Free Image Hosting and upload a *STANDARD SIZED* landscape style photo for your main left column image. When your image displays, right click the image and select Properties, copy the image's 6 digit ID code.

3. Replace "YourImageID" in the code above with your image's 6 digit code.

-- Note that if you are logged into an album on Hold That Pic instead of using quick upload, your URL will contain some extra characters and you'll need to copy the entire address for the photo and completely replace the one in the code above. You can also use any online photo hosting site, including an image from your Baby's First Site albums.

4. Click Site Profile -- Customize Left Column.

5. Copy your completed page title code and paste it into the page title text box.

6. Under "Select Image" un-check the box marked "Show Image" -- you've added your new main image to your Page Title Area.

You're done with your page title! Now is a good time to save your changes and take a look at the result. When you're satisfied, move on to the next step.

Left Column Custom Text Area:

1. Copy the following code and paste it into notepad. Change the text that is shown in red to whatever you'd like, remembering to keep it about the same number of characters as in the sample text.

<div style="text-align: left; width: 420px; position: absolute; left: 20px; top: 510px;">Winter in Wisconsin is a perfect excuse to stay indoors. We spent the day at the Rockford Discovery Center ... discovering. It'll be even better in the spring when they open their outdoor play areas!</div><br />


2. Copy your completed code and paste it into your "Custom Text" area in your left column. Click the "HTML" radio button and make sure "Show Custom Text" is checked. Click Save.

That's it! Your left column is finished!

Middle Column:

1. First, click the "Show No Info" radio button under "Growth Information."

2. Un-check the "Show Bubble" radio button.

3. Copy the code below and paste it into Notepad:

<div style="position: absolute; left: 450px; top: 215px;"><img src="http://www.babysfirstsite.com/members_images/userID/BabyName/ImageName.jpg" width="200" class="photoalbum"></div>

4. Choose a *STANDARD SIZED* portrait style photo from your photo album.

5. Right click your selected photo and select Properties. Copy the image location and replace the URL in the code above with the URL location of your chosen photo (be careful to keep the quotes intact).

6. Copy your completed code and paste it into your middle column custom text area. Click the "HTML" radio button and make sure "Show Custom Text" is checked. Click Save.

You've finished your center column. Just two custom text areas left to edit!

Right Column:

1. Click Site Profile -- Right Column.

2. Un-check all of the right column information boxes:

* Calendar Link
* Milestones Link
* Growth Chart Link
* Wish List

If you still want to make any of this information available to your site visitors, you can place text links to these sections in your custom text areas without taking up too much space.

3. Copy the code below and paste it into notepad:

<div style="text-align: left; width: 250px; position: absolute; left: 700px; top: 168px;"><div align="left">

<b>February 2008</b> <br /><br /><img src="http://www.dgrin.com/images/smilies/photo.gif" alt="Camera 2" /> I am so excited about the photography class I'll be taking later this month. Brian will be in New Jersey for the longest stretch he's done so far! <img src="http://www.cosgan.de/images/smilie/traurig/a025.gif" alt="Crying 10" /> I hate that he has to travel so much, but at least we didn't have to move!

Spring Break is coming and we hope to head down to Florida for vacation. I can't wait to fill up the March album with awesome photos of warm blue water!

I've put sewing on hold for a while. Photography is taking up all of my spare time and I'm excited to have a new (unfortunately expensive) hobby. <img src="http://www.xs4all.nl/~ernstmul/images/msnbonus/money.gif" alt="Money" />


4. Change the text in red to whatever you'd like. You can find smilies to replace the ones in the sample on this free smiley site. Just choose the smiley you'd like to use and paste the HTML code into your text. To preserve the look of your layout, remember to keep about the same amount of text as the sample text.

5. Copy your completed code and paste it into your middle column custom text area. Click the "HTML" radio button and make sure "Show Custom Text" is checked. Click Save.

Your right column is done! Let's finish up.

Footer Section:

1. Copy the code below and paste it into Notepad:

<div style="text-align: left; width: 1024px; position: absolute; left: 20px; top: 570px;">
<b>January / February 2008:<br /><br />

<img src="http://www.babysfirstsite.com/members_images/UserID/BabyName/ImageName.jpg" class="photoalbum"> <img src="http://www.babysfirstsite.com/members_images/UserID/BabyName/ImageName.jpg" class="photoalbum"> <img src="http://www.babysfirstsite.com/members_images/UserID/BabyName/ImageName.jpg" class="photoalbum"> <img src="http://www.babysfirstsite.com/members_images/UserID/BabyName/ImageName.jpg" class="photoalbum"> <img src="http://www.babysfirstsite.com/members_images/UserID/BabyName/ImageName.jpg" class="photoalbum">


</div>
<div style="position: absolute; left: 430px; top: 115px;"><img src="http://www.babysfirstsite.com/banners/letitsnow.gif"></div>


2. Choose 5 *STANDARD SIZED* landscape style photos from your photo album THUMBNAIL PAGE. For each thumbnail sized image, right click and select Properties, then copy the location URL. Paste your 5 complete location URLs in the appropriate spaces in the code above.

The completed image code will look like this:

<img src="http://www.babysfirstsite.com/members_images/brandon/Bailey/20080202-IMG_2128-copy_thumb.jpg" class="photoalbum">

3. When you have replaced the 5 photo URLs in the code and changed the header text to whatever you choose, copy the code and paste it into your Ticker / Additional Content text area here Site Profile -- Add Ticker / Additional Content.

4. Make sure the "Show Content" check box is checked. Click Save.

That's it! You're done!

Background Colors

You can add background colors behind the elements in your custom text fields. With a simple CSS code, you can make colorful background blocks for your text or photos that look like this:



To create a color block, just determine the color you'd like to use either by name or by using a graphics program or hex conversion chart like the one found here:
http://www.december.com/html/spec/colorcodes.html

Replace the color code in the example code below with your own hex code, then paste the code in your custom text area right before the element that you'd like to have a background.

<div style="background-color: #DBD0E6;">

Use this code to close the tag and end your special background: </div>

The photo border shown above was created using this code:

<div style="background-color: #DBD0E6;"><img class="photoalbum" src="http://www.babysfirstsite.com/members_images/brandon/Bailey/IMG_4455_large.jpg" width="400"></div>

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!