PHP Arcade Script Templates

Using the new template system in PHP Arcade Script version 4 allows site owners to change the overall appearance of their arcade by simply changing the current template. As shown before, to change the current template of your arcade site you must login to the admin control panel of your arcade. Go to the ‘Site Configuration’ menu option and scroll down the page until you see a drop down box labeled ‘Template Directory’ as shown in Figure 6-2.

Figure 6-2 Arcade Admin Template Directory Dropdown

If you are looking for pre-made custom arcade templates, you can visit the following image link:

At Big Dog Arcade template store you can purchase a list of custom made PHP AS v4 templates. You can then modify the purchased template to your liking.

Currently we are only offering one free template. This is the default template that we have created for http://www.Your Arcade.org/, click on the following link image to download this template.

After downloading the template, unzip the file and upload the ‘yourarcade’ folder to the template directory of your arcade website. Finally change the ‘Template Directory’ drop-down from your admin control panel, and then go to the front-end of your arcade to view the template in action. There may be a few fields that you see that are blank, such as the featured games, Sponsorships, and other tables; however, we will soon get these to display desired information. In order to display the Featured games, you must go to the back-end of your arcade and click on ‘Games->Manage Games Fast’. Then click on the ‘edit link’ button to the right of the game you wish to be featured. After clicking on the ‘edit link’ button you will need to scroll down to the ‘Featured’ dropdown box and change the ‘Not Featured’ status to ‘Featured’. Finally do this for another 12 games. After you have selected which games you wish to feature, go back to the front-end of your arcade and you will see that these games are now in your featured section.

If you wish to change a few settings using the default ‘yourarcade’ template, we will explain a few simple configurations to change the appearance of this template to a more desirable look. We will briefly discuss changing the default color scheme and then changing the arcade logo.

Changing The Color of the Default ‘YourArcade’ Template

After you have downloaded and unzipped the default ‘yourarcade’ template above, you will want to open the ’style.css’ file inside of that directory. Open the file with notepad, textpad, or any simple text editor. At the very beginning of the file you should see the following code snippet:


/*

Main Colors
search for:
Header Color 1 (Lighter Header Color)
Header Color 2 (Darker Header Color)
Dialog Color (Color Inside Each Dialog)
Main Header Strip Color (Color of the Header Strip)
Main Border Color (Main Body Border)
Menu Strip Color (Category Menu Strip Color)
Main Content Background Color (Main color of all content below menu)
Menu Strip Color Hover (Category Menu Rollover Color)
Menu Seperator (Category Menu Vertical Line)
Border Color 1 (Lighter Border Color)
Border Color 2 (Darker Border Color)
Thumbnail Border Color (Border Color Around Each Game Thumbnail)
Thumbnail Border Color Hover (Border Color of Game Thumbnail Mouse Over)
Below Game Text (The Color of the Text Below Each Game Played)
Content Font Color (The Color of most Text Content)
Rate Game Text Color (The Color of the Game Rating Text)
Content Text Link (The Color of most Text Links)

*/

To modify the changes of these colors you will want to search for each of these titles. For example if we want to change ‘Header Color 1′, we will search for ‘Header Color 1′ which we will find two times in the file as shown below:

/* Header Color 1 */
background-color:#006699;

We will want to change the ‘#006699′. The colors are displayed in the web color format which is #RRGGBB. Basic web color formats are shown as follows:

BLACK = #000000

RED = #FF0000

GREEN = #00FF00

BLUE = #0000FF

WHITE = #FFFFFF

For more information on web colors, you can visit the Wikipedia Web Color Chart at http://en.wikipedia.org/wiki/Web_colors.

So when you have found a desired color scheme, you can search for and change all the modifiable titles from the code snippet above. Make sure to save the ’style.css’ file after you make your desired changes.

Changing the Default ‘YourArcade’ logo

In order to distinguish your arcade you will obviously want to create your own logo. There are many different applications that you can use to modify images and create your own logo. If you have the cash to invest, you can purchase a great photo/web graphic software from adobe, called Photoshop (http://www.adobe.com/products/photoshop/family/). On the Adobe website you may also download a 30-day free trial of Photoshop. If you do not have much cash to spend you can download Gimp, a free web graphic/photo software at http://www.gimp.org/downloads/. There are a lot of other great graphic software available on the web. Try a Google search and I’m certain you can find something you are happy with.

The size of the logo is 890×140. This means the file size has a width of 890 pixels and a height of 140 pixels. You can create your own logo or search for images on the web to add and manipulate in your logo. In order to have a transparent background you will want to have no background layer in your logo and you will want to save your file in .png format.

So, have fun, be imaginative, and create your own arcade logo for your website.

After creating your custom arcade logo you will want to save it as ‘title.png’. Then simply replace the ‘title.png’ file in the template images folder to update the logo.

After you have modified your color settings and changed the logo you may want to re-upload the files to your arcade template. Set the current arcade template, and enjoy the new appearance of your custom arcade template.

On the next page we will discuss how you can go about creating your own template.