 |
|
Site Search: |
|
|
| |
|
Scrolling "My Messages" Panel Tutorial
Since I first added this nifty little bit of code to my home page, I've been asked often how to do it. The problem is that I can't paste the code back in a message to everyone, or it will utterly destroy their layout. So my solution is this tutorial - I'll give you the code, and show you how to modify and place it.
This tutorial will help you create a "My messages" panel that works like this:
| Difficulty Level: |
Beginner |
Time Needed: |
10-20Minutes |
| |
|
PDF Version: |
Download |
| 1 |
The Code
If you already know how to implement and modify the code, then you're set with what's below. Otherwise, highlight and copy the code below and paste it to a TextPad document.
<style>
DIV #messages_panel_body { overflow: auto; width: 570px; height: 530px;
</style> |
| |
|
| 2 |
Edit the Code
The code is really very simple. Basically, it's stating that once your message panel hits a certain height and width (overflow), that it will add a scrollbar to the window.
If your message panel is on the left-hand side, like mine, you won't want to mess with the width - it's sized perfectly. Otherwise, you'll want to adjust the number "570" down so that the message panel matches the width of your other right-hand side panels.
The height number - "530" - can be adjusted up and down as much as you like. You'll probably want to continue playing with the number after you've placed it on your page so that you can get everything to line up the way you want it to. |
| |
|
| 3 |
Use the Code
Make sure that you're in "Edit" mode on your homepage. Then, scroll down to your message window and click the "Edit" button. Choose "Edit Html/CSS". |
| |
|
| 4 |
Paste & Save
Paste your code into the dialogue that comes up, and click "Save": |
| |
|
| 5 |
Make Adjustments
Easy-Peasy! You'll probably want to adjust the numbers slightly more until you have everything aligned just the way you like, but yay - you've now got a perfectly scrolling "My Messages" panel. |
|
