Creating A New Portal Or Project
Provided for unrestricted use by the
THL Toolbox > Developers' Zone > Web Development > Creating A New Portal Or Project
Creating A New Portal Or Project
Note: Before beginning a new portal-project you should have the following preparations completed.
- Software installed on your personal computer to edit the various template files. NEED LINK HERE
- You should also have PHP running locally on your PC. NEED LINK HERE
- Lastly you should have subversion installed and have created the necessary SVN setup on your PC for the THL Quandu directories. NEED LINK HERE
So if all required steps above are completed let's begin creating a new THL Portal site…
1. Create a new folder (directory) name and location on the server for the new portal.
Using your PC's local THL Quandu SVN directory, name and locate this new portal's "root" folder accordingly based on the standards established throughout the THL Quandu server directory. In this new directory folder that acts as the "home" or "root level" of the new portal's directory you should add 4 new folders: "images", "css", "js", "documentation". Then in the images folder add 1 additional folder: "originals"
2. Next review and select one of several portal template styles.
- The first template option can be seen in use online, Example: THL Home Page layout itself.
- Next template option can be clicking the tabs on the THL global navbar; see Example: Encyclopedias
- Then moving onto the third portal template used commonly for a sub-portal's home pages, Example: Tibetan Literary Encyclopedia
(-NOTE- here is where we should note that these templates ready-to-use are located in the /templates folder, named: portal-home1-template.php, portal-home2-template.php, portal-home3-template.php - you agree??)
3. Add the following default template files to your new portal directory at the root level.
- Add 1 copy: Portal homepage layout: (Example, portal-home1-template.php) Note: rename this file to index.php before committing it to SVN
- Add 1 copy: (side-column.php)
- Add 1 copy: (masthead.php)
- Add 1 copy: (masthead-navbar.php)
So now if you've completed all of the above instructions you will see in your portal's directory 5 template files and 4 folders
4. Customize your default home page portal template files
New Title Image
Edit (masthead.php) to reflect the new "Title" image and links for this portal.
NOTE: Change the "absolute path" and file name to the new Title image for the portal you will put in the images folder under the new portal directory (Example from Sera Monastery Portal: /places/monasteries/sera/images/masthead-title-sera.png).
Also edit the title image's dimensions in the img tag for the width-height, and add alt="name" for accessibility standards.
Example:

 <div id="masthead-title">
 <a href="/absolute path to new portal/index.php">
 <img src="/absolute path to new portal/images/masthead-title-newportalname.png" width="#" height="#" alt="Name of new Portal" />
 </a>
 </div>
In some places, the title will be included within the banner image, in which case the src attribute of the image tag for the title (above) should be set as follows:
<img src="/global/images/transparent.gif" width="350" height="50" alt="Homepage Link" />
New Banner Image
This new image is called from a new "local" style sheet you will create so first make the new blank CSS file called whatever your portal's directory name is, (Example: sera.css) Put this file in the CSS folder at the root level of your portal directory and add the following style edited according to your own image's directory path and name.
Example: 

#masthead-banner { 
  overflow:hidden; 
  background:transparent url(/absolute path to new portal/images/masthead-banner-newportalname.jpg) no-repeat 100% 100%; 
}The part of the style after the url refers to the repeating and positioning of the background image. Always use "no-repeat" as the banner image is the full width of the page. The two "100%" represent the horizontal and vertical alignment respectively. These can also be "right top". As mentioned above, the banner image will sometimes contain the title. In that case, the CSS style for the banner should be positioned to the "left top". An example of a page with a banner whose image includes the title text is the THL environment page (/places/environment/).
New Navbar Tabs and Links
Edit (masthead-navbar.php) to reflect the new names and links for the global tabs on the masthead.
Example from Tibetan Literary Encyclopedia Note, not all links are completed.

 <ul id="masthead-navbar">
   <li class="home alpha"><a href="/encyclopedias/literary/index.php"><em><b>Home</b></em></a></li>
   <li class="canons"><a href="/encyclopedias/literary/canons/index.php"><em><b>Canons</b></em></a></li>
   <li class="authors"><a href="#nogo"><em><b>Authors</b></em></a></li>
   <li class="sects"><a href="#nogo"><em><b>Sects</b></em></a></li> 
   <li class="periods"><a href="#nogo"><em><b>Periods</b></em></a></li>
   <li class="genres"><a href="#nogo"><em><b>Genres</b></em></a></li>
   <li class="oral"><a href="#nogo"><em><b>Oral</b></em></a></li>
   <li class="instruction"><a href="#nogo"><em><b>Instruction</b></em></a></li>
 </ul>
Note: This example is from the THL Global navbar stylesheet so the class names will be different 
 for each portal to reflect the individual tab names created for the portal's global navbar. ONLY change the 
 class names themselves for your portal; do not change any elements, pseudo classes, commas, brackets, or styles.

 .home #masthead-navbar li.home a, 
 .projects #masthead-navbar li.projects a, 
 .collections #masthead-navbar li.collections a, 
 .places #masthead-navbar li.places a, 
 .encyclopedias #masthead-navbar li.encyclopedias a, 
 .reference #masthead-navbar li.reference a, 
 .education #masthead-navbar li.education a, 
 .community #masthead-navbar li.community a, 
 .tools #masthead-navbar li.tools a { 
   color:#CE570F; 
   background:#fff url(/global/images/button3-L.jpg) no-repeat left top; 
   padding-left:20px; 
 }
 
 .home #masthead-navbar li.home a b, 
 .projects #masthead-navbar li.projects a b, 
 .collections #masthead-navbar li.collections a b, 
 .places #masthead-navbar li.places a b, 
 .encyclopedias #masthead-navbar li.encyclopedias a b, 
 .reference #masthead-navbar li.reference a b, 
 .education #masthead-navbar li.education a b, 
 .community #masthead-navbar li.community a b, 
 .tools #masthead-navbar li.tools a b { 
   color:#CE570F; 
   background:#fff url(/global/images/button3-R.jpg) no-repeat right top; 
   padding-top:4px; 
 }
 
 .home #masthead-navbar li.home a:hover, 
 .projects #masthead-navbar li.projects a:hover, 
 .collections #masthead-navbar li.collections a:hover, 
 .places #masthead-navbar li.places a:hover, 
 .encyclopedias #masthead-navbar li.encyclopedias a:hover, 
 .reference #masthead-navbar li.reference a:hover, 
 .education #masthead-navbar li.education a:hover, 
 .community #masthead-navbar li.community a:hover, 
 .tools #masthead-navbar li.tools a:hover { 
   text-decoration:none; 
   background:#fff url(/global/images/button3-L.jpg) no-repeat left top; 
 }
 
 .home #masthead-navbar li.home a:hover b, 
 .projects #masthead-navbar li.projects a:hover b, 
 .collections #masthead-navbar li.collections a:hover b, 
 .places #masthead-navbar li.places a:hover b, 
 .encyclopedias #masthead-navbar li.encyclopedias a:hover b, 
 .reference #masthead-navbar li.reference a:hover b, 
 .education #masthead-navbar li.education a:hover b, 
 .community #masthead-navbar li.community a:hover b, 
 .tools #masthead-navbar li.tools a:hover b { 
   color:#00c; 
   text-decoration:underline; 
   background:#fff url(/global/images/button3-R.jpg) no-repeat right top; 
 }
New Secondary Navigation
Edit (side-column.php) to create the new secondary navigation in the side column. You may also decide to add other php includes in addition to the default, side-column-search.php, to offer other portal-related links.
Example You will need to edit the new link path, the new tooltip descriptive text and the new link name.
The descriptive text can be changed or added to easily at a later date.
<!-- begin side column search php -->
<? include_once "$droot/global/php/side-column-search.php" ; ?>
<!-- end side column search php -->
<div class="list0" id="list0">
<div class="list1" id="list1">
<h3 class="head"><a href="#nogo">Top Level Directory Name</a></h3>
<ul>
<li><a href="new link absolute path" hreflang="new descriptive tooltip text">new link name</a></li>
<li><a href="new link absolute path" hreflang="new descriptive tooltip text">new link name</a></li>
<li><a href="new link absolute path" hreflang="new descriptive tooltip text">new link name</a></li>
<li><a href="new link absolute path" hreflang="new descriptive tooltip text">new link name</a></li>
<li><a href="new link absolute path" hreflang="new descriptive tooltip text">new link name</a></li>
<li><a href="new link absolute path" hreflang="new descriptive tooltip text">new link name</a></li>
</ul>
<? include_once "$droot/global/php/side-column-thdl-links.php" ; ?>
</div>
</div>
Creating a Section Homepage that Has Lists of Resources Rather than the Standard Section Homepage
For example, the Essays section homepage for the Sera Monastery project (
http://www.thlib.org/places/monasteries/sera/essays/)
Note in particular the following code:
- <div class="container-wrapper essay-list">
- <dd class="author">by <strong>José Cabezón</strong></dd>
- <dt class="sub-header">Memorization</dt>
<? $droot = $_SERVER['DOCUMENT_ROOT']; ?>
<?
$add_header = '<link rel="stylesheet" typetext/css" href="/places/monasteries/sera/css/sera.css" media="all" />
<script type="text/javascript" src="/places/monasteries/sera/js/sera.js"> </script> ';
include_once "$droot/global/php/header.php" ;
?>
<body class="seraessays">
<!-- begin masthead php -->
<? include_once "$droot/places/monasteries/sera/masthead.php" ; ?>
<!-- end masthead include -->
<!-- begin content -->
<div id="content">
<div class="shell-1">
<h1>Essays and Readings on Sera Monastery</h1>
<div class="container-wrapper essay-list">
<div class="container-left-5050">
<dl>
<dt>Sera Monastery and Its Colleges</dt>
<dd class="author">by <strong>José Cabezón</strong></dd>
<dd><a href="#essay=/cabezon/sera/intro/">An Introduction to Sera Monastery</a></dd>
<dd><a href="#essay=/cabezon/sera/colleges/intro/s/b1">Types of Colleges and Their Mission</a></dd>
<dd><a href="#essay=/cabezon/sera/colleges/intro/s/b2">The Rise and Evolution of Sera’s Colleges</a></dd>
<dd><a href="#essay=/cabezon/sera/colleges/intro/s/b23">The Jé College</a> (<em>grwa tshang byes</em>)</dd>
<dd><a href="#essay=/cabezon/sera/colleges//intro/s/b24">The Mé College</a> (<em>grwa tshang smad</em>)</dd>
<dd><a href="#essay=/cabezon/sera/colleges//intro/s/b25">The Tantric College</a> (<em>sngags pa grwa tshang</em>)</dd>
</dl>
<dl>
<dt>The Hermitages of Sera</dt>
<dd class="author">by <strong>José Cabezón</strong></dd>
<dd><a href="#essay=/cabezon/sera/herm/intro/">An Introduction to the Hermitages of Sera</a></dd>
<!--
<dd><a href="#essay=/cabezon/sera/herm/drakri/s/c1">Hermitages Glossary</a></dd>
-->
<dd><a href="#essay=/cabezon/sera/herm/chupzang/">Chupzang Nunnery</a> (<em>chu bzang dgon</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/drakri/">Drakri Hermitage</a> (<em>brag ri ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/garu/">Garu Nunnery</a> (<em>ga ru dgon pa</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/jokpo/">Jokpo Hermitage</a> (<em>’jog po ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/keutsang/">Keutsang Hermitage</a> (<em>ke’u tshang ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/keutsangshar/">Keutsang East Hermitage</a> (<em>ke’u tshang shar ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/keutsangnup/">Keutsang West Hermitage</a> (<em>ke’u tshang nub ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/khardo/">Khardo Hermitage</a> (<em>mkhar do ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/negodong/">Negodong Nunnery</a> (<em>gnas sgo gdong dgon pa</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/nenang/">Nenang Nunnery</a> (<em>gnas nang ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/pabongkha/">Pabongkha Hermitage</a> (<em>pha bong kha ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/panglung/">Panglung Hermitage</a> (<em>spang lung ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/purbuchok/">Purbuchok Hermitage</a> (<em>phur bu lcog ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/rakhadrak/">Rakhadrak Hermitage</a> (<em>ra kha brag ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/choding/">Sera Chöding Hermitage</a> (<em>se ra chos sdings ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/gonpasar/">Sera Gönpasar Hermitage</a> (<em>se ra dgon pa gsar ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/utse/">Sera Utsé Hermitage</a> (<em>se ra dbu rtse ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/takten/">Takten Hermitage</a> (<em>rtags bstan ri khrod</em>)</dd>
<dd><a href="#essay=/cabezon/sera/herm/trashicholing/">Trashi Chöling Hermitage</a> (<em>bkra shis chos gling ri khrod</em>)</dd>
</dl>
</div>
<div class="container-right-5050">
<br />
<div class="img-left-shadow" style="margin-bottom:25px;">
<div><img src="/places/monasteries/sera/essays/images/intro-A1900.jpg" width="223" height="170" alt="" /></div>
<h6></h6>
</div>
<div class="container-1col">
<dl>
<dt>Tibetan Monastic Education</dt>
<dd class="author">by <strong>Georges Dreyfus</strong></dd>
<dd><a href="#essay=/dreyfus/drepung/monasticed/intro/">Introduction to Monastic Education</a></dd>
<dt class="sub-header">Memorization</dt>
<!--
<dd><a href="#essay=/dreyfus/drepung/monasticed/memorization/">The Practice of Memorization</a></dd>
<dd><a href="#essay=/dreyfus/drepung/monasticed/monasteries/">Tibetan Monasteries: Islands of Peace or Oceans of Noise?</a></dd>
-->
<dd><a href="#essay=/dreyfus/drepung/monasticed/discipline/">Memorization and Liturgical Discipline</a></dd>
<dd><a href="#essay=/dreyfus/drepung/monasticed/curriculum/">The Role of Memorization in the Curriculum</a></dd>
<!--
<dt class="sub-header">Texts and the Curriculum</dt>
<dd><a href="#essay=/dreyfus/drepung/monasticed/hierarchy/b1">The Commentarial Hierarchy</a></dd>
<dt class="sub-header">Debate</dt>
<dd><a href="#essay=/dreyfus/drepung/monasticed/debaterules/">Procedures and Rules of Debate</a></dd>
<dd><a href="#essay=/dreyfus/drepung/monasticed/debatephysicality/">The Physicality of Tibetan Debates</a></dd>
<dd><a href="#essay=/dreyfus/drepung/monasticed/debatesched/">The Schedule of Debating Institutions</a></dd>
<dd><a href="#essay=/dreyfus/drepung/monasticed/debateexams/">Examinations and the Organization of Debate</a></dd>
<dt class="sub-header">Final Examinations and the Title of Geshé (<em>dge bshes</em>)</dt>
<dd><a href="#essay=/dreyfus/drepung/monasticed/finalexams/">Final Examinations and the Title of Geshé</a> (<em>dge
bshes</em>)</dd>
-->
</dl>
<dl>
<dt>The Space of Sera (<em>se ra’i khor yug</em>)</dt>
<dd class="author">by <strong>José Cabezón</strong></dd>
<dd><a href="#essay=/cabezon/sera/spaces/s/b1">Introduction</a></dd>
<dd><a href="#essay=/cabezon/sera/spaces/s/b2">Foreign Perspectives</a></dd>
<dd><a href="#essay=/cabezon/sera/spaces/s/b3">Tibetan Perspectives</a></dd>
<dd><a href="#essay=/cabezon/sera/spaces/s/b4">Architecture</a></dd>
<dd><a href="#essay=/cabezon/sera/spaces/s/b5">Guide to the Map</a></dd>
<dt>People at Sera</dt>
<dd class="author">by <strong>José Cabezón</strong></dd>
<dd><a href="#essay=/cabezon/sera/people/">Introduction to People at Sera</a></dd>
<dd><a href="#essay=/cabezon/sera/people/monks/">Monks</a></dd>
<dd><a href="#essay=/cabezon/sera/lifeofseramonk/">The Life of a Sera Monk</a> <em>by Geshé Rabten</em></dd>
</dl>
</div>
</div>
</div><!-- end #container-wrapper -->
</div>
</div><!-- end content -->
<!-- begin footer -->
<? include_once "$droot/global/php/footer.php" ; ?>
<!-- end footer -->
</body>
</html>
<!-- begin footer utility -->
<? include_once "$droot/global/php/footer-utility.php" ; ?>
<!-- end footer utility -->
Provided for unrestricted use by the Tibetan and Himalayan Library