Customize your Site

You are able to customize several areas of your website. You can:

  1. Modify the contents of the flash piece on your homepage.
  2. Modify the CSS files that control the look and feel of the site.
  3. Modify the site graphics.
  4. Modify the HTML used to display the site.

Use the links below for the steps to customize your site.

Getting Started
Customize your Flash
Customize your Images
Customize your CSS
Customize your Header and Footer
Customize your HTML
FTP to the server

To begin customizing your site, you must first access the server using SFTP (Secure FTP) mode. To access the server:

  1. Open an FTP client.
  2. Select SFTP as your mode.
  3. Hostname: Your spotted domain name
  4. Port: 33988
  5. Use the username and password that have been provided to you.
Back to Top
Create an Image

The flash piece is optimized to display images that are 506 pixels wide by 320 pixels high.

To make an image for the flash piece, create a .jpg image that is 506 by 320 pixels and upload the image into the "/images/featured/" directory on the server.

Back to Top
Edit the data file

The flash piece reads in a data file named "featured.xml" that resides in the "flash" directory. To modify the contents of this file, open it in a text editor.

The default xml data file contains this information:

<panels>
  <panel>
    <blurb>Type Spotted: Gallery Name</blurb>
    <blurb_date></blurb_date>
    <src>Full Path To Image Source</src>
    <link>Full Path to Gallery</link>
  </panel>
</panels>

Each <panel> tag contains the information for one image in the flash.

To update a photo:

  1. Change the values of the four attributes for a photo. These attributes are:
      blurb - The text that appears on the left side of the bottom bar.
      blurb_date - Text that will appear in parenthesis to the right of the blurb.
      src - The full url to the image. ( ex: http://spotted.yourdomain.com/images/featured/1.jpg )
      link - The full url to the page the user will be taken to when they click the image.
            ( ex: http://spotted.yourdomain.com/pages/gallery.php?gallery=999 )
  2. Save and reupload the file

To add a photo:

Copy one of the panel elements and paste it after the last panel element. Example:

<panels>
  <panel>
    <blurb>Type Spotted: Gallery Name</blurb>
    <blurb_date></blurb_date>
    <src>Full Path To Image Source</src>
    <link>Full Path to Gallery</link>
  </panel>
  <panel>
    <blurb>Type Spotted: Gallery Name</blurb>
    <blurb_date></blurb_date>
    <src>Full Path To Image Source</src>
    <link>Full Path to Gallery</link>
  </panel>
</panels>

You may have up to seven images in the flash. The images will be numbered according to their order in the file, starting at 1.

To remove a photo:

Delete one of the panel elements. Example:

<panels>
  <panel>
    <blurb>Type Spotted: Gallery Name</blurb>
    <blurb_date></blurb_date>
    <src>Full Path To Image Source</src>
    <link>Full Path to Gallery</link>
  </panel>
</panels>

Back to Top
Images that are modifiable

To complete changing the look and feel, you may change the graphic images used on the site.

All the graphics for the site are stored in the "images" directory. Any image in the following subdirectories can be changed:

front - The images used on the site index page.
queue - The images used for the queue box that pops up when someone has items in the queue.
site - General images that are not specific to event or user pages.
we - Images specific to event (we) pages.
you - Images specific to user (you) pages.

Back to Top
How to modify the images

To modify the images, open the image you want to edit in an editor such as Photoshop and make your changes. When saving the file, do not change the filename, file extension, or dimensions of the image.

When you have saved your file, upload it to the server, overwriting the existing image.

Back to Top
General CSS

The spotted.css file contains styles that apply to the entire site, not specific pages or sections.

These styles include default background colors for We and You pages, breadcrumbs, boilerplate and photo styles.

Back to Top
Display CSS

The display.css file controls the look and feel of the display pages, including the index page. The styles in this file are specific to individual display pages.

Display pages are the pages that do not require an account.

Back to Top
User Admin CSS

The admin.css file controls the look and feel of the user admin pages. The styles in this file are specific to individual pages and sections in the user admin section of the site.

Back to Top
Headers

There are three header files that spotted uses. The header files and which pages they are used on are:

admin_header.html - Used on the newspaper Admin pages that only site administrators have access to. This page is the same as header.html, except that the navigation goes to newspaper admin pages instead of display pages.
header.html - Used on the display and user admin pages.
header_index.html - Used on the site index page. This is the same as header.html, except that it also contains a banner on top of the navigation.

Omniture or OAS information can be added to the header, but is not included in the file by default.

To add additional header html to the pages on top of the navigation that already exists, use the header_index.html file as an example. In place of the following line:
<img src="/images/front/banner.gif" width="760" height="87" alt="Spotted" />
place a table that includes your additional header html.

Back to Top
Footer

The footer.html file in the "html" directory contains the boilerplate. You must change your information, including copyright notice, privacy policy and any other information needed at the bottom of the pages.

Back to Top
Right Rail

By default, the right rail on the gallery, photo_page and big_photo pages contains 3 modules. The modules are a bulletin board, upcoming events and editor's picks.

All the modules are html files that are located in the "html/right_rail" folder.

To modify the bulletin board, open the bulletin_board.html file and copy the text you want into the file.

To modify the editor's picks, open the picks.html file and edit the information that exists.

Each editor's pick is contained in a block that begins with <div class="content-picks"> and ends with </div>. To add an editor's pick, copy the block of text and place it after the last editor's pick block. To remove an editor's pick, delete a block.

The upcoming events module is generated by a cron to include the two closest upcoming events. To modify the html for the upcoming events module, open the events_template.html file and change any html.

The events_template.html file contains html for one event. When the file is written, the html will be repeated for the second event.

The following variables will be replaced when the file is written:
{EVENT_NAME} - The name of the event.
{EVENT_DATE} - The date of the event.
{EVENT_DESCRIPTION} - The description of the event.

Back to Top
Abuse Email

Users are able to report photos and comments for abuse. When a user reports a comment or photo for abuse, it generates an email with the user's comments, and a link to the offending page. To change where this email is sent, open the abuse_email.html file in the "html/pages" directory.

To change the email address that these comments are sent to, alter the email address on line 2 of the file.

To change the subject of the abuse email, alter line 5 of the file with the new subject.

Back to Top
Modify the name associated with Event photos.

On the galleries, photo and big_photo pages, Event photos and galleries show up as being taken by Spotted.

To change this name for the big_photo page, open the big_photo.html page in the "html/pages" directory.

Change line 104 from Spotted2 to the name you want to associate with Event photos.

To change this name for the galleries page, open the galleries.html page in the "html/pages" directory.

Change line 94 from Spotted to the name you want to associate with Event photos.

To change this name for the photo page, open the photo_page.html page in the "html/pages" directory.

Change line 104 from Spotted2 to the name you want to associate with Event photos.

Back to Top