Ok, yippee!! You have your media files safely hosted on a server that you can access from all your XP computers.

You can get to your files, but its getting a little old constantly going to My Network Places to access them, isn’t it? So what can you do?

Map them so they are always available in My Computer! And its really easy too boot!

Open My Network Places (or really any folder). On the toolbar click on Tools, Map Network Drive, pick a drive letter (or even easier ~ let the computer pick it for you!), then browse to the shared folder you want to map. In the example below I’m going to mount my shared “Sarah” folder and call it drive w:

That’s all there is too it. Go ahead and map each shared folder.

Last weekend DH and I decided it was pretty stupid to host pictures on his laptop, my laptop, and our never used desktop, so we decided to set up a Media Server.  It sounds scarier than it really is.  Some sites will claim you need the fastest, best-est processors and hard drives, but that doesn’t have to be so.

What you need:

An old desktop running Win XP with a pretty decent sized hard drive.

A router.

Back-up system of your choice.  This goes without saying.  Its NEVER wise to keep everything stored in 1 location.  Hard drive fries and you’ll cry.  I suggest picking up a WD My Book External Drive of an appropriate size.  Honestly having 2 forms of backup is more preferable.  Your daily back-up can remain right next to your server, but your weekly or monthly backup should be stored out of your house.  No use backing everything up if its all stored together and goes up in flames together.  Being a victim of a burglary, I can tell you the thought of having all of your photos stolen is MUCH worse then the actual loss of property.

That’s it.  If you want to get really fancy, upgrading the hard drive to a 7200 rpm speed is nice.

Our Server setup:

Compaq EVIO 510S, Win XP, Pentium 4, 1G RAM and 120G, 7200 rpm Hard Drive (this will be upgraded soon to most likely 1TB, 7200 rpm).  For a bit of speed and convenience sake, this is connected via ethernet to our router (an Apple Airport Extreme).  The server is being backed up via a 500G WD My Book Home External Drive.

Other computers (Clients) in the house that will be accessing the  server:

HP DV6119 laptop running XP

MacBook running OS 10.6.5

Ok.  Now for the nitty-gritty.

1.)  You need to give your soon to be XP Media server a name.  Go to Start, right Click on My Computer go to Properties, Computer Name, click Change next to “To Rename this computer or join a domain…”  Give the computer a name and a workgroup name.  For example you can call the computer Media and change the workgroup name to something simple that you can remember (like your last name).  For this article assume the server’s name is Media and the workgroup is Mediashare.  At this point you will need to restart the computer for the changes to take place.

You can view the screenshot in full screen by clicking on the box with arrows

2.)You now should set up user accounts for each computer (Client)/user on each computer (Client) that will be accessing the server.  Make sure the user names and passwords match those on the other computers.  This way you won’t have to continually log into your server.  Start – Control Panel – User Accounts

3.) Create the folders that you would like to share with the other computers in your network.  In our case we have: PHOTOS, MOVIES, MUSIC.  You can create as many or as little as you’d like.

4.) You now have to allow network sharing of these folders.  Don’t worry, its easy (or at least we’re going to do it the easy way!).  Right click on a folder you would like to share, go to Sharing and Security .  Go to the Sharing Tab (if you have a separate tab for security read below).  If you see a Windows security warning under Network sharing and security, go ahead and click the link “If you understand the security risks but want to share….blah, blah, blah“.  A pop-up should appear asking you to choose either running the wizard or “just enable file sharing“, choose “just enable”.  You should now be back to the Sharing tab, but with options to share under Network sharing and security.  Check the “Share this folder on the Network” box and check the “Allow network users to change my files” box (if not no one will able to save or change the files on the server).  Do this for every folder you would like to share.

If you have a separate security tab, click on Tools – Folder Options – Views – scroll to the bottom and check Use Simple File Sharing.

5.) Ok, now we have to connect the clients to our server.  We’ll deal with XP machines today.  So in my case, I now needed to have my DV6119 “see” the newly created Media Server.  The 1st item of business is changing the workgroup name on my laptop to match that of the server.  So just like with the server – Right click on My Computer, go to Properties, click the Computer Name tab, then the Change button.  Here you only have to change the Workgroup name.  Type in the workgroup name you had given your server.  Like with the server, you will need to restart this client for these changes to take place.

6.) Once the computer is restarted, go to Start – My Network Places.  Congratulations!  You should now see your Media server and the shared folders.

If you do not see your media server here are a few things to check:

1) Double check that the workgroup names are identical.

2) If they are, it could be a firewall issue.  Try shutting them off (on both the server and the client).  If you can see the media server once they are off, you know its a firewall issue.  You need to make sure to add your home network IP range to its “trusted zone” (most providers should have a FAQ explaining how to do this).

Coming up:

Mounting the server/folders as drives on your XP client so that they are always present in My Computer.

Connecting Mac clients

Hooking the server to your TV to view photos and movies.

Telling iTunes where your music is.

Would you like to add a menu bar with drop-down lists such as the kind I have at my phpBB3 site? This is not something for the faint of heart, because depending on the phpBB3 style you use, you’ll have to tweak some of the .css. So make sure you know what you’re doing. If you’re unsure, or need any help with any of the steps below, contact us and we can help you out.

*Note: wherever you see “prosilver,” replace with the theme that you’re using. Also note that this tutorial is for prosilver-based themes only. I have not tried this on subsilver or subsilver-based themes.

Here is how I did it. We’ll start with the horizontal menu bar and later (in another tutorial) add multiple drop-down menus to it.

Files you’ll be working with today:

• 4 menu image files
• menu.css
• stylesheet.css
• overall_header.html

Go to Dynamic Drive and pick out a style of menu bar. You should right click and save four images – the right corner, the left corner and the divider images. If you’d like, you can open the images in your photo editor software and play with the colors and gradients. As you can see from the link above, I chose an inverted, rounded corner menu and changed the colors to a cheery shade of purple. After you’re finished making any changes to the images, upload them to phpBB3/styles/prosilver/theme/images/.

Next you’re going to want to create a new css stylesheet for your menu and upload it to phpBB3/styles/prosilver/theme/. Open your text editor and name a new file menu.css. In it, copy and paste this:

#cfnavbar{
margin: 0;
padding: 0;
}#cfnavbar ul{
background: url("{T_THEME_PATH}/images/bgpink.gif") center center repeat-x;
padding-left: 0;
margin-bottom: 8px;
float: left;
width: 100%; /*width of menu*/
height: 100%;
font: bold 100% Verdana;
}

* html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}

#cfnavbar ul li{
display: inline;
}

#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: #000000;
font-weight: bold;
text-transform: uppercase;
padding: 7px 13px 12px 6px;
text-decoration: none;
background: url("{T_THEME_PATH}/images/dividerpink.gif") bottom right no-repeat;
}

#cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}

#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url("{T_THEME_PATH}/images/leftcornerpink.gif") bottom left no-repeat;
}

#cfnavbar ul li a#rightcorner{
padding-right: 10px;
float: right;
display: block;
background: url("{T_THEME_PATH}/images/rightcornerpink.gif") bottom right no-repeat;
}

#cfnavbar ul li a:hover{
text-decoration: underline;
color: #235585;
}

Upload your newly created menu.css to phpBB3/styles/prosilver/theme/

Open phpBB3/styles/prosilver/theme/stylesheet.css.

Find:

@import url("memberlist_avatar.css");

Add after:

@import url("menu.css");

Save your changes and upload the modified file.

Here’s where it can get a little tricky. Every phpBB is different, with different MODs installed and/or different ways of organization. For example, I have several custom searches, a portal page, an arcade, and even tickers. You can have as many different links as will fit in your menu, but for the purposes of this tutorial, I’ll only include the most basic. That being said, Open phpBB3/styles/prosilver/template/overall_header.html.

Find:

<div class="headerbar">
             <div class="inner"><span class="corners-top"><span></span></span>

    <div style="height: 154px; width: 870px;" id="site-description">
                <a href="{U_INDEX}" title="{L_INDEX}" id="logo"><img src="images/spacer.gif" width="870" height="136" alt="" /></a>
                <!--<h1>{SITENAME}</h1>
                <p>{SITE_DESCRIPTION}</p>-->
                <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
             </div>

             <span class="corners-bottom"><span></span></span></div>
          </div>

After add:

<div id="cfnavbar">
<ul>
<li><span><a href="{U_INDEX}" accesskey="h" id="leftcorner">{L_INDEX}</a></span></li>
<li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><l><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l" <!-- IF S_USER_LOGGED_IN -->id="rightcorner"<!-- ENDIF -->>{L_LOGIN_LOGOUT}</a></li>

    <!-- IF not S_USER_LOGGED_IN --><li><a href="{U_REGISTER}" id="rightcorner">{L_REGISTER}</a></li><!-- ENDIF -->
</ul>
</div>

And that should be it! Good luck and please let me know if this tutorial was helpful to you.

I get a lot of questions about where I get my graphics, smileys, fonts and other fun stuff.  Well, here you go… here are some of the (IMO) best places on the web to get the fun stuff for your site:

Retro graphics and fonts:

Fun clipart and fonts for Digi-scrapping and other projects:

• pcCrafter.com

Smileys:

Next up: Making money from your site.

Here are some tried and true (and best of all FREE!) sites and products that Sarah and I have worked with that we highly recommend:

Open-Source Forum Software:

• phpBB

Web Building Software And tools:

• AceFTP Freeware
• PHP Designer 2007 Personal
• ColorSchemer | Instant Website Color Schemes
• Round-Pic | Anti-Alias Rounded Corners Tool
• Software Institute | ColorPicker

CSS Resources:

• CSS Introduction
• The 6 Most Important CSS Techniques You Need to Know
• Learn CSS Positioning in Ten Steps
• Learn CSS the Modern Way

Other How-tos and Turorials:

• Test your PHP Pages w/o Upload
• Dynamic Drive DHTML
• 19 Most Essential Open Source Applications

Reliable Web Hosting and Domain Name Registration:

• Tiger Technologies – I can’t say enough good things about this company.  Their customer service is outstanding.  For a very reasonable price, you get the most bang for your buck.