news letter

In this newsletter we’re going to build a newsbox that you can use for news stories, announcements, or whatever you wish. The great thing about this newsbox is that it takes advantage of a _javascript library which allows the box to grow on the page when the user clicks to read the full story. The user is not taken to another page but reads the story in place. View a working example.

Photoshop Tutorial: Elegant Newsbox
by Andrea Butterworth

Today we’re going to build the newsbox shown below. Courtnie will show you how to code the box, and Roger will show you how to use the scripts to make it shrink and grow when the article is clicked on.

To get started draw yourself a rectangle using the rectangle shape tool - it doesn’t matter what the color is. Double click the new shape layer and click on ‘gradient overlay’. Click on the gradient bar shown in the window and then on the left color swatch underneath the gradient in the new window - set this to ‘f3f3f3’ click on the swatch at the other end of the gradient and set it to ‘ffffff’. Now drag the grey color swatch toward the white one till there is only a little white at the top of the box. Now click on ‘stroke’, click on the color swatch, and enter the color value ‘e0e0e0’; set the stroke size to 1 and the position to ‘inside’, then hit ‘OK’.

Now draw a second, slightly smaller rectangle inside the first, but make it a bit shorter so that there is room for our ‘Latest Tutorials bar’ above it. Click on the color swatch of this new shape layer and set it to ‘ffffff’. Apply the exact same stroke settings as before to this new layer. Make sure this layer is above the first one and line it up over the other rectangle and ensure that you have an even border on the left, right, and bottom.

Now for the ‘Latest Tutorials Bar’. Select the rounded corner shape tool from the shape drop downs on your toolbar and draw a long thin rounded rectangle above the white box. Apply the same gradient settings to this bar but reverse them so that the grey is at the top and the white is at the bottom.

There’s your newsbox... now Courtnie is going to show you how to code this box using HTML and CSS.

Courtnie
Coding your Elegant Newsbox
by Courtnie Croft

Before we begin to code our newsbox we need to cut the image into smaller pieces. This is so the box can grow to any size without having to make new images every time.

I have cut Andrea’s box into seven small pieces:

Top left corner

Top right corner

Top background

Side background

Bottom left corner

Bottom right corner

Bottom background

The images should not be very big. Just crop the corners out as close as you can. As for the backgrounds, the side background only needs to be one pixel in height while the top and bottom backgrounds need to be 1 pixel in width.

Here is the markup for your newsbox it will be repeated below in Roger's article with the added functionality:

<div style="width: 460px; padding: 0; margin: 0;">
<div style="background: url(top-bg.gif) repeat-x; width: 430px; height: 25px;">
<img src=http://mail.yahoo.com/config/login?/"top-left.gif" alt="top left corner image" style="float: left; width: 15px; height: 25px;">
<img src=http://mail.yahoo.com/config/login?/"top-right.gif" alt="top right corner image" style="float: right; width: 15px; height: 25px;">
<p style="font: bold 15px arial, sans-serif; color: #828282; padding: 4px 0 0 20px; margin: 0;">Latest Tutorials</p>
<div style="clear: both; line-height: 0;"></div>
</div>

<div style="width: 430px; background: url(side-bg.gif) top left repeat-y; padding: 0; margin: 0;">
<div style="background: url(side-bg.gif) top right repeat-y; padding: 10px 20px;">



</div>
</div>

<div style="background: url(bottom-bg.gif) repeat-x; width: 430px; height: 5px;">
<img src=http://mail.yahoo.com/config/login?/"bottom-left.gif" alt="bottom left corner image" style="float: left; width: 6px; height: 5px;">
<img src=http://mail.yahoo.com/config/login?/"bottom-right.gif" alt="bottom right corner image" style="float: right; width: 6px; height: 5px;">
<div style="clear: both; line-height: 0;"></div>
</div>

</div>

Roger will now show you how to make your newsbox work!

Roger
NewsBox _Javascript Library
by Roger Riche

Let's take the cool newsbox that Andrea designed and Courtnie coded and apply some functionality to the news items. We will make it so that the news titles are clickable title bars that will expand and collapse your full news content.

First, we will need you to download the following _javascript package containing 3 _javascript libraries:

» Download Newsbox Library (newsbox.js, prototype.js and effects.js)

After you have downloaded this library, extract the contents to the same folder that your html document is in.

The HTML <HEAD>
Paste the following code into the HEAD of your HTML Document.

<style type="text/css">
.newsContent { padding: 10px; margin: 0px; }
.newsItem { padding: 0px; margin: 0px; }
.newsItem a.newsTitle, .newsItem a.newsTitle:visited { display: block; text-decoration: underline; cursor: pointer!important; cursor: hand; padding: 3px; }
</style>

The Newsbox Template
Now, Here is the code provided by Courtnie along with the functionality I have added.

<div style="width: 460px; padding: 0; margin: 0;">
<div style="background: url(top-bg.gif) repeat-x; width: 430px; height: 25px;">
<img src=http://mail.yahoo.com/config/login?/"top-left.gif" alt="top left corner image" style="float: left; width: 15px; height: 25px;">
<img src=http://mail.yahoo.com/config/login?/"top-right.gif" alt="top right corner image" style="float: right; width: 15px; height: 25px;">
<p style="font: bold 15px arial, sans-serif; color: #828282; padding: 4px 0 0 20px; margin: 0;">Latest Tutorials</p>
<div style="clear: both; line-height: 0;"></div>
</div>

<div style="width: 430px; background: url(side-bg.gif) top left repeat-y; padding: 0; margin: 0;">
<div style="background: url(side-bg.gif) top right repeat-y; padding: 10px 20px;">


<div id="newsBox">



</div>


</div>
</div>

<div style="background: url(bottom-bg.gif) repeat-x; width: 430px; height: 5px;">
<img src=http://mail.yahoo.com/config/login?/"bottom-left.gif" alt="bottom left corner image" style="float: left; width: 6px; height: 5px;">
<img src=http://mail.yahoo.com/config/login?/"bottom-right.gif" alt="bottom right corner image" style="float: right; width: 6px; height: 5px;">
<div style="clear: both; line-height: 0;"></div>
</div>

</div>

The Newsbox Item
The following code will present your news item within the newsbox. Copy and paste this code as many times as you have articles below the comment 'NEWS ITEMS GO HERE'.

<div class="newsItem">
<a class="newsTitle">ARTICLE TITLE GOES HERE!</a>
<div style="display:none;">
<div class="newsContent">
  PUT THE HTML FOR YOUR ARTICLE CONTENT HERE
</div>
</div>
</div>

The Newsbox Library

Lastly, in order to get your newsbox collapsing and expanding, you will need to include the following just before the closing BODY tag.

In the above code, there are several settings available for background color, font color, and link color. The first 3 settings (bg,fg,link) affect the odd rows and the last 3 settings (altbg,altfg,altlink) affect the even or alternating rows.

Just enter in new RGB hexadecimal codes to modify the look and feel of your newsbox. That's it! Happy Coding!