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!