http://pixelscripts.diaryland.com

How To's And Instructions

How To Use PixelScripts
Not sure where you're at, or what to do first? Get some information here:

What is PixelScripts?
How do you navigate PixelScripts?

How To Use PixelScripts Diary & Guestbook Templates
To change your diary layout you will have to do four main things:

Download
Host Images
Edit Template
Upload

Stuck?
Followed everything step by step, but still having problems? Maybe these will help:

Unzipping files with ultimate zip
Uploading images at villagephotos.com
Editing your image links
Copy, Cut, Paste, & Select All Tutorial

What is PixelScripts?
PixelScripts is site where you can get free layouts for your online diary, website, or personal homepage! I also have lots of resources located on the links page, so you can find even more free things online!

One important bit of information, although the layouts are free to use, you have to follow the terms of use.

For a little more about PixelScripts, go to the About Page.

TOP

How do you navigate PixelScripts?
The navigational menu for PixelScripts is at the bottom of the page. For even more navigational help, see the site map.

TOP

Step One: Downloading A Layout

Choose a template and click the "download" link.
A window will display asking you what you would like to do, select "save to disk".
Click OK, and navigate to where you want to save it.

You can save this file anywhere, but if you don't know what to do, when the dialog box displays, asking you where you want to save it, click the drop down menu at the top next to "Save In", and select "desktop". This will put the file right there on your desktop, where the "my computer" and "recycle bin" icons are usually located.

Click save.
Now it will start downloading. If you do not check the close automatically box, then you will have to close it manually when it is done transferring.
What you have just downloaded is a .zip file. Navigate your computer, and find that file you downloaded.

If you choose to save it on the desktop, all you have to do is minimize all the windows you have open, and it will be right there on the desktop.
Note: To minimize a window, all you have to do is click the minimize button in the upper-right corner of the screen. To get the window to open back up, click on it's button located at the bottom of the screen, in the taskbar. To learn more about windows, and the taskbar, see my tutorial located at webtao.

The file will most likely look like a folder with a zipper on it. You will need to "unzip" this file. This requires separate software, such as Ultimate Zip.
Extract the folder to begin Step Two.

TOP

Step Two: Find A Host For Your Images

Before you begin editing your template, your should look for a place to host the images that came with your layout. This section is something you will have to do on your own, but here is what I would do:
Go to http://www.villagephotos.com. They provide free image hosting services, and you can upload images there, and remotely link them on your diaryland account.
All you have to do is sign up for a a new account and upload all the images for your template.
When you upload the image, the address to it will be something like http://www.villagephotos.com/pubbrowse.asp?selected=171769. Find out where the image is, and record the URL, you will need it for Step Three below.

TOP

Step Three: Editing The Template

Editing DiaryLand Templates
When you download a layout from the "imaged", "imageless", or "layout archives" section (on the "layouts" page), you are downloading diaryland.com templates, here's what you will need to do to customize these layouts:

Navigate to the folder that contains your downloaded template, so you can work on it.
Right click on the index.html file, and navigate to "open with".
In the slide out window, if you do not see "notepad" then click on "choose program" and select "notepad".
Inspect each line of code carefully and look for words in capital letters, and words enclosed in . This will assist you.
If your SignMyGuestbook.com username is the same as your diaryland.com username, and you like all the links as is, then all you will have to edit is the address of the images.
Where the code indicates , place the complete web address of the image that you downloaded where it says something.gif or something.jpg. This means that you will have to have an image host.
Do the same edits for the older.html document, and your done.

Editing SignMyGuestbook Templates
When you download a layout from the "guestbook" section (on the "layouts" page), you are downloading a SignMyGuestbook.com template. Here is how to edit them: Important: this section was only meant for Layout 005+. Layout 001 - 004 were made using an old system, but when you download the old templates there will be help inside the download.

Navigate to the folder that contains your downloaded / unzipped template, so you can work on it.
Open main_design.txt, this is the guestbook layout.
Go through each line of code one by one carefully. Look for items enclosed in , and items in CAPITAL LETTERS. They will assist you.
Look in the code for where you need to link the images, if the layout has images.
Put you SignMyGuestbook.com username where the code says "USERNAME-HERE".
Put the address of your diary/website where the code "YOUR WEBSITE ADDRESS HERE!!".
individual_entries.txt does not have to be edited, but you are welcome to.

Adapting for Diary-X
Although the layouts in the "imaged", "imageless", and "layout archives" section are meant for DiaryLand.com, they can be used on Diary-X, it just takes more editing.

Navigate to the folder that contains your downloaded template, so you can work on it.
You won't really need the file called "older.html", so you can set it off to the side.
Right click on the index.html file, and navigate to "open with".
In the slide out window, if you do not see "notepad" then click on "choose program" and select "notepad".
Inspect each line of code carefully and look for words in capital letters, and words enclosed in . This will assist you.
Where the code indicates , place the complete web address of the image that you downloaded where it says something.gif or something.jpg. This means that you will have to have an image host.
Now you need to adapt the template so that it can be used for diary-x.
Go to the navigational links section. Eliminate lines of links that you won't be using.
- href="index.html" should be changed to href="http://USERNAME.diary-x.com/journal.cgi?action=current"
- href="older.html" should be changed to href="http://USERNAME.diary-x.com/journal.cgi?action=archive"
- Edit the "Bio" or "Profile" link so that it goes to the web address of your profile. This means that http://members.diaryland.com/edit/profile.phtml?user=%%username%% needs to be changed to your profile address.
- Edit the Contact links. The guestbook address should be changed to the address of your guestbook. The mailto:%%username%%@diaryland.com should be changed to mailto:YOU@DOMAIN.COM. Get rid of the "notes" section, as it does not apply to diary-x.
- href="http://www.diaryland.com" should be changed to href="http://www.diary-x.com"
<a href="%%prev%%"> and <a href="%%next%%"> needs to become <a [prev href]> and <a [next href]>, respectively.
Change %%date%% to [date]
Change %%short_description%% to [title]
Change %%entry%% to [body]
If you see something like this...


<form name="jennigbook" method="post" action="http://members.signmyguestbook.com/edit/sign">

Sign The <a href="http://%%username%%.signmyguestbook.com">Guestbook</a>
<br>
<input type="text" name="signername" value="Name?">
<Br>
<input type="text" name="email" value="you@domain.com">
<Br>
<input type="text" name="url" value="http://">
<Br>
<textarea name="message">Comments?</textarea>
<Br>


<input type="hidden" name="username" value="%%username%%">
<input type="submit" name="submit" value="Sign Here">
</form>


...Then go ahead and get rid of it, unless you have a signmyguestbook.com Guestbook.
If you see this...


<form name="jenninote" method="post" action="http://members.diaryland.com/edit/addnoteupdate.phtml">
Send A DiaryLand <a href="http://members.diaryland.com/edit/notes.phtml?user=%%username%%">Note</a><font size="1">(<a href="javascript:username=prompt('DiaryLand.com username?','');password=prompt('Password?','');if(password!=null){location.href='http://members.diaryland.com/edit/login.phtml?username='+username+'&password='+password}else{void(null)}" target="_blank">log in</a>)</font>
<input type="hidden" name="user" value="%%username%%">
<Br>
<input type="text" name="message" value="(must be logged in)">
<Br>
<input type="submit" value="Sign Here">
</form>


...get rid of it too, it's a diaryland notes form.
Ignore any messages about "blog options", such as this:
If you see %%older_entries%% on the index page, place this in it's place: [lastfew 5]
Double check everything line by line, and check it again when you get it uploaded to Diary-X.

TOP

Step Four: Upload

To DiaryLand

If your template is fully functional, then it's ready to be uploaded.
Open up index.html in notepad (so you can copy and paste all the code).
Go to diaryland.com.
Log in.
Go to the "edit your template" page.
You will have four options on the next page that pops up. You will want to edit the first two.
To edit the index page, choose "click here to change how each of your entry pages look".
Highlight all of the text in notepad, press and hold the ctrl button and press C to copy ( or go to edit > copy ) Then go on diaryland, and press ctrl + V to paste (or edit > paste).
Do the same for older.html by going back to the "edit your template page", and then "click here to change how your older.html archive page looks".

To SignMyGuestbook

go to signmyguestbook.com.
Scroll to the bottom, and click "members area", to log in.
go to "alter your design"
In the textarea box, erase all the old code, and copy and paste the code from "main_design.txt".
Click "change"
Not done yet! on the next screen, go back to "alter your design"
Click "click here" where it says: You are currently changing how your overall guestbook looks. Click here to change how each individual entry in your guestbook looks.
In the textarea box, erase all the old code, and copy and paste the code from "individual_entries.txt".
Click change, and your done.

To Diary-X

Go To Diary-X.com, and log in.
Go to "Edit templates" (on the left).
If you have always used the same template throughout your entire diary, then all you will need to edit is the default one. Other wise you will need to edit all the templates under the "custom" category, or your diary will have a mismatched template through the different pages.
Under custom templates, click on the template that you always use as your default template.
Highlight all the text, and replace it with the text from your new template.
Click the submit button below the textarea box, and you are done.

TOP

Unzipping A File With Ultimate Zip

The first thing you'll need to unzip a downloaded compressed folder (Zip folders), is a an unzipping program. For this we will use Ultimate Zip.
Go to their website, and download the program. Remember where you saved it, saving it to the desktop would make this easiest.
Go to the location that contains the downloaded file. It will be called uzsetup_beta3, or something kind of like that.
Double Click it.
Click Next.
Read the license agreement, and click yes to continue.
The next screen shows you where the program will be installed, which will most likely be the program files, located on your hard drive. I would leave it as default. Click next when ready.
The next screen shows where it is going to install a shortcut button, in the start bar. Leave this as default, and click next.
The next screen will ask you if you want to install desktop icons, and etc. You can make your choices, and click next.
Click "Install" to complete the process.
You're now ready to unzip a folder. Make your way to one, and right click on it.
Select the menu item that says "extract to folder blah blah blah...."
After a moment, a new folder will display, and it will most likely be named the same as the zip folder. This is the extracted folder, and the process is completed.

TOP

Uploading Images To VillagePhotos.com

First you need to set up an account at villagephotos.com. That should be the easy part.
Login
On the right, where it says "my albums" click "photos".
On the next screen, near the top, click "Upload New Images to this folder."
In the gray box, uncheck "Automatically optimize JPEG images". This will cause the box to expand suddenly.
Click one of the browse buttons (Just pick one).
Navigate through your computer until you find the desired image (it will be a .gif, or .jpg).
Click the file once to highlight it, then click "Open" on the dialog box (or press enter).
Click "upload".
Click "Click here to continue!"
On the next screen, Near the middle you will see thumbs of your images. Click "click to zoom" under the image you just uploaded.
Look for something like:
The public URL
URL of this image for sharing on websites, auctions, bulletin boards, etc.
http://image1ex.villagephotos.com/pubimage.asp?id_=1676040
Copy the http://image1ex.villagephotos.com/pubimage.asp?id_=1676040 part.
Now go into your template's HTML code. Look for something like this:

<img src="blah.jpg" border="0" />
Change blah.jpg to that long address. In my case I would change it to this:
<img src="http://image1ex.villagephotos.com/pubimage.asp?id_=1676040" border="0" />
Make absolutely certain that you didn't add any spaces. That is the #1 mistake most people make. Like this:
<img src=" http://image1ex.villagephotos.com/pubimage.asp?id_=1676040 " border="0" />
See the space at the beginning and end?

TOP

Editing Your Image Links

The #1 question in my inbox is, "Why won't my image show up?". The first thing you will need to do is get your images uploaded to a server that will allow you to remotely link image files, such as villagephotos.com. The help section directly above this one will cover villagephoto uploading, and etc.

You need to find out what the web address is for your image. It will be long, and start with http://.

Go into your code, and look for something like:

<img src="blah.jpg" border="0" />

You need to place the address of your image where it says blah.jpg (or .gif). For example, if the address of my image was http://image1ex.villagephotos.com/pubimage.asp?id_=1676040, I would make my image link look like this:
<img src="http://image1ex.villagephotos.com/pubimage.asp?id_=1676040" border="0" />

Sometimes you see something like this:

<table cellspacing="0" cellpadding="0" border="0" width="640" height="375" background="blah.jpg" class="box">

The procedure is the same, I would make my new line of code look like this (To save space, I just put http://image.....):
<table cellspacing="0" cellpadding="0" border="0" width="640" height="375" background="http://image....." class="box">

Another common image link will look like this:

<td width="275" style="background-image: url(blah.jpg); background-repeat: no-repeat; ">.</td>

This can be a bit tricky for some, the address goes where it says "blah.jpg", not where it says "url". If it was me editing the code, I would make my line of HTML look like this:
<td width="275" style="background-image: url(http://.....); background-repeat: no-repeat; ">.</td>

Notice that the web address goes in the (parentheses), without spaces.

Don't let all of this seem hard. When in doubt, just remember, all you have to do is replace the whateverfile.jpg or whateverfile.gif with the web address of your image, and just don't add spaces that aren't already there, or have been included in the web address.

TOP

Copy, Cut, Paste, & Select All

These features are usually available in any program. You can typically access them by going to Edit > Copy, Paste, Cut, or Select All.

Or, you can use the keyboard shortcuts Ctrl+C for copy, Ctrl+V for Paste, Ctrl+X for Cut, and Ctrl+A for Select All.

Try it out, with the mouse highlight the text in bold below, and hold down the ctrl button (located on both the far bottom left and right of the keyboard). With ctrl still held down, press "c".

Highlight me, and press ctrl+C!

Open up a text editor, or anything that allows you to type. (You could even use the address bar above, just don't press go!) Place the mouse in the typing area, and click on it, like you would so you could type in that area. Now press ctrl + V, as you did with ctrl + C. You just "copied" the highlighted text, and then "pasted" it into the textarea.

But, what if you wanted to completely grab a portion of text, and put it somewhere else, like you wanted to move a sentence at the bottom of a document to the top. You would press ctrl + X (cut) instead of ctrl + C (copy) and then you could just paste as normal.

You can also do copy / paste / cut with folders and files. Just highlight the desired folders / files, and press ctrl + c, v, or x as usual.

To select an entire body of text located in a text box, just press ctrl + A, or go to Edit > Select All. Try it out, click in the text box below, and press Ctrl + A:

TOP

Back To Main