How to Tutorial
Home Page

The home page is split up into 5 sections as shown below.
If you want to change a particular section, look for the corresponding div id tag and edit the context within the tag.
In the shown configuration, hilite2 (the picture slideshow) requires extra work to configure. Refer to the Slideshow section on how to update/format.

Projects Page
Instructions to add a new robot profile to the main projects page

  • Download the robot profile photoshop template
  • Open the photoshop file
  • Crop the desired robot image into a square and resize it to fit into the white space
  • Save the image as competitionYEARprofile.jpg (e.g. regionV2007profile.jpg)
  • Transfer the image to the server and place in ($site_directory)/images/robot/ folder
  • Edit the project file
  • Copy the following code to the page and replace the bold with the appropriate information
    • <!-- ROBOT NAME-->
    <div id=robotProfile>
    <a href=/drupal/projects/competition/yearCompeted>
    <img src=/drupal/images/robot/competitionYEARprofile.jpg></a>
    <b>Robot Name<br>
    </b><i>Robot Competition Name, Year Competed</i><br>
    <font size=2>Short description</font></div>
  • Follow directions in individual project section to create a full description of the robot

    • Individual Projects Description Page
    To create a new full robot description page, create content of type "page" and fill in the following information in the form.

  • Title: Robot Name
  • URL path settings: projects/competition/year
  • Body: copy the following code and replace the bold with the correct information
    • <center><img src="/drupal/images/robot/competitionYEARprofile.jpg"></center>
    <div id=robotProfile>
    <font size=4>Robot Name</font><br>
    <i>Competition, Year Competed</i><br><br>

    <font size=4>Task:</font><br>
    Text description of the task the robot is suppose to complete
    <br><br>

    <font size=4>Specifications: </font><br>
    Specifications of the robot. Look at other robot description for ideas.
    <br><br>

    <font size=4>Members: </font> Names <br>
    <font size=4>Mentors: </font> Names <br><br>

    <font size=4>Media:</font><br>
    Place to add embedded YouTube videos
    </div>

    <style type="text/css">
    #robotProfile {
      width: 781px;
      padding: 3px;
      border: 3px solid #ffffff;
      margin: 4px;
      background-color: #fffffff
    }
    </style>
    Recent News
    To add a new recent new

    • Create a content of type "news"
    • Fill in required fields: Title, Image, and Body
    • The news will automatically be updated on the front page (no changes required on the front page)
    History and Contact
    Majority of the History and Contact page is basic html code, nothing too complex.

    Members Page
    Instructions to add a new robot profile to the main projects page

  • Download and open the members profile photoshop file
  • Crop a square image of the member picture and resize to fill in the white space
  • Save image as firstnameLastname.jpg
  • Transfer the image over to the server and save it in ($site_directory)/images/members/ folder
  • Choose from one of the following, officers, members, alumni, or faculty, for the html code to display the profile


    • If a page requires dividers, look in the folder ($site_directory)/drupal/images/divider/ for current dividers available. Or you can make your own divider by using this divider photoshop file.
    Officers

  • Officer profile with image on right <div id=profileRight> <img src ="/drupal/images/members/firstnameLastname.jpg"></div>
    <div id=infoLeft>
    <b>Position: </b>Position<br>
    <b>Name: </b>Name<br>
    <b>Contact: </b>id@ras.ece.utexas.edu<br>
    <b>Concentration: </b>Degree<br>
    <b>Interest: </b>Interests<br>
    </div>
  • Officer profile with image on left <div id=profileLeft> <img src ="/drupal/images/members/firstnameLastname.jpg"></div>
    <div id=infoRight>
    <b>Position: </b>Position<br>
    <b>Name: </b>Name<br>
    <b>Contact: </b>id@ras.ece.utexas.edu<br>
    <b>Concentration: </b>Degree<br>
    <b>Interest: </b>Interests<br>
    </div>
    • Members

  • Member profile with image on right <div id=profileRight> <img src ="/drupal/images/members/firstnameLastname.jpg"></div>
    <div id=infoLeft>
    <b>Name: </b>Name<br>
    <b>Concentration: </b>Degree<br>
    <b>Interest: </b>Interests<br>
    <b>Status: </b>Active/Inactive<br>
    </div>
  • Member profile with image on left <div id=profileLeft> <img src ="/drupal/images/members/firstnameLastname.jpg"></div>
    <div id=infoRigft>
    <b>Name: </b>Name<br>
    <b>Concentration: </b>Degree<br>
    <b>Interest: </b>Interests<br>
    <b>Status: </b>Active/Inactive<br>
    </div>
    • Alumni

  • Alumni profile with image on right <div id=profileRight> <img src ="/drupal/images/members/firstnameLastname.jpg"></div>
    <div id=infoLeft>
    <b>Name: </b>Name<br>
    <b>Concentration: </b>Degree<br>
    <b>Graduated: </b>Graduated<br>
    <b>Current Occupation: </b>Current Occupation<br>
    </div>
  • Alumni profile with image on left <div id=profileLeft> <img src ="/drupal/images/members/firstnameLastname.jpg"></div>
    <div id=infoRigft>
    <b>Name: </b>Name<br>
    <b>Concentration: </b>Degree<br>
    <b>Graduated: </b>Graduated<br>
    <b>Current Occupation: </b>Current Occupation<br>
    </div>
    • Faculty

  • Faculty profile with image on right <div id=profileRight> <img src ="/drupal/images/members/firstnameLastname.jpg"></div>
    <div id=infoLeft>
    <b>Name: </b>Name<br>
    <b>Website: </b>Website<br>
    <b>Research Areas: </b>Research Areas<br>
    <b>Contact: </b>Email<br>
    </div>
  • Faculty profile with image on left <div id=profileLeft> <img src ="/drupal/images/members/firstnameLastname.jpg"></div>
    <div id=infoRigft>
    <b>Name: </b>Name<br>
    <b>Website: </b>Website<br>
    <b>Research Areas: </b>Research Areas<br>
    <b>Contact: </b>Email<br>
    </div>
    • Multimedia Video Page

    <br><br>
    Video Name<br>
    YouTube embedded URL

    Slideshow

    The slideshow design was used from JonDesign's SmoothGallery. Refer to that site for more thorough explanations and FAQ.

    Data structure used to specify the pictures to display. Also the first line of code will format the slideshow. Copy this piece of code to the same page that the slideshow will be displayed on.
    <div id="myGallery" style="width:400px; height:225px; float: right or left; border: 0px;">
    <div class="imageElement">
    <h3>Title1</h3>
    <p>Description1</p>
    <a href="link to the image1" title="open image" class="open"></a>
    <img src="link to full image1" class="full" />
    <img src="link to thumbnail image1" class="thumbnail" />
    </div>
    <div class="imageElement">
    <h3>Title2</h3>
    <p>Description2</p>
    <a href="link to the image2" title="open image" class="open"></a>
    <img src="link to full image2" class="full" />
    <img src="link to thumbnail image2" class="thumbnail" />
    </div>
    </div>
    Paste this code to wherever you want the slideshow to be displayed
    <script type="text/javascript">
    function startGallery() {
    var myGallery = new gallery($('myGallery'), {
    timed: true,
    option: value, ...
    (additional options below)
    });
    }
    window.addEvent('domready', startGallery);
    </script>
    Options for the slideshow (added to the javascript function call to start the Gallery)
  • Timed gallery - timed: true
  • Non-timed gallery - timed: false
  • Hide arrows - showArrows: false
  • Hide carousel - showCarousel: false
  • Hide information panel - showInfopane: false
  • Change carousel tab text - textShowCarousel: 'My new text'
  • Change timed delay - delay: 5000

    • Image dimensions (in pixels)

    Content Page: 800 x unlimited
    Home Page slideshow: 400 x 225
    Section header image: 801 x 131
    Robot profile (without border): 243 x 243
    Robot profile (with border): 246 x 246
    Members profile (without shadow): 150 x 150
    Members profile (with shadow): 155 x 155
    Video object: 390 x 390
    Video embedded: 392 x 344