Trojan
Trojan
The Trojan 2.0 site is based on the responsive design methodology and uses the Bootstrap framework. The responsive design approach attempts to provide the best experience available to visitors using a variety of devices.
The Trojan template is HTML5 compliant and as such there are several tags and old habits that should not be integrated into any pages in the website.
Use of the following tags is prohibited:
Visit the W3Schools website for more information about tags that are support in HTML5.
Tables are only permitted to be used for displaying formatted, tabular data. Use of tables for layout purposes is prohibited and unnecessary when using DIV tags properly.
The majority of the website styles are maintained in external style sheets. The Trojan template itself requires the /assets/themes/trojan/css/core.css file, which provides Bootstrap customizations that override the default styles provided in the main Bootstrap CSS file.
Each area that is not considered to be a part of the main template is provided with the ability to implement a custom CSS file. These areas are not required to use this file unless area-specific styles are needed or the area-specific menu is not the same width as the top-level Trojan menu. Media Queries for Trojan are included in a separate CSS file. If different media queries are required then the template for an area should not include the /assets/themes/trojan/css/mediaqueries.css file but instead should use media queries defined in the area-specific CSS.
No changes to the main /assets/themes/trojan/css/core.css file are to be made without the permission of the Web Architect. In addition, no changes should be added anywhere to override the basic typographic styles without proper approval.
Very few pages on Trojan should have custom styles within their headers or provided in-line unless they are required to customize existing elements (such as scripts) or to adjust unique issues.
No styles that are not found within this document will be added to a page without review by the Web Architect or an individual designated by the Web Architect regardless of whether or not the change is only applied to a single line or element. Proper control of the stying within Trojan is required to ensure the entegrity of the site. Exceptions to this policy will be included in this document.
Content Delivery Networks are frequently used by web developers to decrease the loading time of a page and to offload bandwidth use and file storage to a third-party. The use of jQuery, Google Fonts, and Google Analytics are examples of items commmonly used via CDNs.
Use of CDN-hosted content is permitted only if a copy of the files are available locally, in the event that the CDN becomes unavailable. Hosting a local copy of a file will permit the webmaster to make a minor update to page templates to use the locally-hosted files until the CDN-hosted files are once again available. This also ensures that a copy of the file is available should the CDN choose to permanently remove the file.
Webmasters must ensure that their local files match the versions of the files that are being used from the CDNs. For example, if one is linking to a CDN-hosted jQuery API that is version 2.3.3 then the local copy should also be version 2.3.3.
Note that this requirement does not apply to the embedding of third-party content that is only available via direct download, such as Formstack forms or embedded YouTube videos.
The following template files are provided via CDN and also stored locally for backup/emergency use:
The top-level navigation menu is the menu that is used on all top-level pages in the Trojan website that are not associated with a specific department. For example, the Trojan homepage and the Schedules page are top-level pages and use the same navigation menu. This menu is managed only by IT staff.
All pages feature only a single navigation menu. Areas using a custom templates will also use a menu. These menus must follow specific guidelines:
All custom menus must include the Trojan menu option via an included file. Failure to include this file will also cause the custom menu itself to fail. These links are managed by the IT department and are required in all secondary areas to facilitate navigation.
The second link must be labeled Home and it must link to the homepage of the secondary area.
The use of About Us is recommended for grouping links on a navigation menu such as Mission Statement, Dean's Welcome, Staff and other types of content.
Areas should endeavour to keep their navigation menus as simple and easy to use as possible. Long lists of links are strongly discouraged and may indicate a problem with the organization of content in a website. In addition, mobile users will have difficulty navigating complicated menus.
The footer must always include the following:
All webpages, other files and directories should use SEO-friendly names whenever possible. Use dashes (financial-aid). Avoid using underscores (financial_aid) or no spaces (financialaid). Use descriptive names that can also function as keywords. Be aware that file names and paths are displayed in search results.
All links used within included files, external CSS and templates, or links to resources that are within Trojan but outside of the current directory path, must use absolute URLs.
Links to resources that are within the same website or subdirectory may use relative paths as long as those links are only within the webpage content areas (not within an included file or external file).
In some cases a script will only work properly if the full web address is used. In those cases departure from these guidelines will be permitted.
<a href="http://trojan.troy.edu/index.html">Home</a>
<a href="../index.html">Home</a>
<a href="/index.html">Home</a>
Links within the same page must use dashes (not spaces or underscores) for a multiword name.
The Trojan site is HTML5 compliant and as a result the deprecated "name" property must not be used to create an internal link. Instead, set an ID on the destination tag.
<a href="#link-to-section">Link to Section</a>
<h2 id="link-to-section">Section</h2>
Often a list of links are provided at the beginning of a webpage, sometimes referred to as "jump links", to make it easy to jump to specific sections of text as is demonstrated in this guide itself. A list of links at the beginning of a page that does not include a header must only include links to sections within the same document.
A webmaster intending to include links to content outside of the current document must include a header before the list of links. A list of links cannot be provided without a header unless it only occurs at the beginning of the document and it also only includes links that jump within the same document.
This section is referring to the name used within the TITLE tag of the page. Page titles should be unique, descriptive and relatively short. Keep in mind that the page title is not only a description but can also be used for source keywords and it will be displayed in search results. The page title is used when saving a favorite/bookmark in a web browser.
The beginning of all page titles should begin with "TROY - " unless creating a page title for a top-level page or homepage. For example, "TROY - HR - Benefits" would be suitable for a subpage within Human Resources but for the Human Resources homepage a title of "Troy University Human Resources" would be more apporpriate.
Page titles play a role in visitors determining whether or not to click on the results displayed in search results, in addition to the content that is included in the pages.
When using an icon in the Trojan website to indicate the Trojan homepage one must always use the "home" icon. When representing the troy.edu hompage one should instead only use the "globe" icon. Note that such usage is rare outside of the template.
Trojan
troy.edu
All telephone numbers must be presented using dashes and include the "1" and as well as the area code. In addition, all telephone numbers (do not include faxes) must have the link using the "tel" designation in the same format.
Example: 1-800-414-5756
<a href="tel:1-800-414-5756">1-800-414-5756</a>
Formstack forms should be embedded using the JavaScript method. Note that since jQuery is already included in the website one must use the "nojquery=1" parameter. Failure to do so with cause problems with features that rely on jQuery including proper display of the main navigation menu.
Pages that appear to load properly in a browser may still exhibit problems behind-the-scenes. All webmasters must review pages for JavaScript, CSS and other errors. This can be done using a variety of inspetion tools available directly within most web browsers.
Typically, no JavaScript errors should be present even if the code appears to function properly. There are exceptions caused by non-critical warnings and browser compatibility issues but these are not common. Reviewing these tools can also uncover CSS errors and 404 errors that are not visible within a webpage.
All pages must be routinely scanned with a link validation tool.
Dreamweaver has a built-in spell checker. It is overly sensitive but nonetheless it can expose typos and other errors that might otherwise be missed by the webmaster and/or the content owner.
The following websites have been pre-approved to use styles that do not match the Trojan template:
The following paths and files are used for the management of the Trojan template and available scripts and other features. The entire collection of assets for the new template are treated as an additional theme and thus packaged within /assets/themes/trojan in order to avoid conflict with the existing site and allow in-place updating.
Files marked in bold are used by all templates regardless of level. Items with an asterisks are actually used via CDN with local files provided as a backup.
The Trojan 2.0 design provides a new "#hashtags" feature, which is used by entering a pre-defined hashtag value directly into the website search box. Hashtags were implemented to direct visitors to specific content. The feature is site-agnostic, meaning it will direct visitors to the most relevant Troy University website, regardless of whether or not the content is located within the trojan.troy.edu website.
You may test this feature by clicking the Search link in the template and entering the term with the hashtag symbol. Note that if you remove the hashtag (#) symbol that the box will then default to its default website search behavior.
At this time the following demonstration hashtags are available.
#blackboard
#email
#financialaid
#helpdesk
#hub
#it
#records
#register
Standard body text is Lato with a font weight of 300. Headings are Constantia with a normal font weight.
Lorem ipsum dolor sit amet, vix impedit corrumpit dignissim ne, affert putant possim at pri, te iusto mundi blandit sea. Vis ad alia imperdiet, nam quem congue salutandi ad, quo nostrum fastidii atomorum in. At mei ignota aliquam. Unum atqui tibique per at.
Eu mel ignota invidunt, ex gubergren conceptam deterruisset sit. Minimum verterem id ius, mei no movet gloriatur. Mei eu oblique mandamus percipitur, vix ut unum nusquam. Movet voluptatibus ad sit, melius oblique prompta an eos. Timeam tibique tractatos eu mel, an sonet salutandi vulputate vel. Illum diceret luptatum nam an, te nobis aliquip theophrastus sea.
In eripuit ancillae prodesset sit, sint libris philosophia te ius. Eu duo indoctum complectitur. Ea vis nullam electram accommodare, vel ei feugait appellantur. Vis ex mucius gubergren, ad dicta philosophia sit, pro nisl ridens ut. Clita molestie assueverit eu sit, usu ea omnis voluptatibus, his ad nostro partiendo definitiones. His at equidem singulis adipisci, ad prima sadipscing qui.
Cu graece fabellas mei. Ex cum solet graeci appareat, et vis aeterno tincidunt. At odio veri sit. Nec dictas atomorum tractatos ex, falli perfecto id cum. Qui accusam repudiare ut, qui corrumpit honestatis scripserit et. Vix apeirian petentium scriptorem ei, ea autem convenire nec.
Verterem adipisci pro te, vim dicam audiam deleniti an. Eam etiam putant mollis et, ut hinc simul quidam pro. At aliquid efficiendi dissentiunt est, nisl democritum philosophia usu in. Sed esse primis explicari at, indoctum periculis ei vim, usu ad volutpat laboramus. Mel nobis possim audire ea, ius vidit dolores ad. Te vix viris oportere suscipiantur.
This text is 1.5em. Lorem ipsum dolor sit amet, cu primis delectus delicatissimi his, lorem nulla clita ad vel, prima zril te eam. Unum harum movet ea qui. Everti invidunt constituam pro te, cu molestie pericula democritum mei, quaeque mandamus ex qui. Reque bonorum nominavi pro ut. Mea munere verear iracundia ei, quodsi vivendo ad ius, an legimus philosophia mea.
This text is 1 em and is the normal size for body copy. Quem magna consul te sea, eum adhuc ignota tibique in. Nec ne eius ponderum, ea per tamquam instructior, diceret albucius epicurei ius ea. In tempor latine bonorum ius. Qui ut vivendo principes. Eam cibo summo pertinacia ei.
This text is .75em. Nec cibo vidit commune ea, ei homero noster sit. Ceteros denique te qui, pro te fierent sadipscing, ferri iusto electram sed cu. Labores scriptorem sit id, nec magna periculis et. Tantas mentitum te vix.
This is an example of a link that is used in the main content area of the page.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h1>Department of Human Resources</h1>
<h2>Benefits Information</h2>
<h4>Electronic Forms</h4>
<h5>Faculty <span class="h5b">Resources</span></h5>
This title may be used to call out a specific section or to simply create a new division. However, it is not recommended that it be used frequently to replace H1-H6 tags.
<div class="troytitle">This is a TROY Title</div>
This is a sample of a blockquote.
<blockquote>This is a sample of a blockquote.</blockquote>
<div class="yo">This is an example of a Yo! Block<br><a href="#">This is a link within the block.</a></div>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Finance & Business Affairs</a></li>
<li class="active">Human Resources </li>
</ol>
Note that the homepage for an area should have one less level of breadcrumb links. In addition, when on the homepage the link for the homepage in the breadcrumbs should not be active. In order to manage this with the template the simplest action is to remove the next level link and also use JavaScript to remove the link from the link representing the homepage.
For example, if viewing the Finance and Business Affairs homepage's source code this is what should be found:
<h2 id="bs">Breadcrumbs</h2>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Finance & Business Affairs</a></li>
<script>
$( document ).ready(function() {
$('.breadcrumb li:eq(1) a').contents().unwrap();
$('.breadcrumb li:eq(1)').addClass("active");
});
</script>
</ol>
The additional JavaScript removes the link from the Finance & Business Affairs text without affecting this link that is also used on other pages linked to the template.
Note that depending number of list items available in the breadcrumbs that the number within "li:eq(1)" may need to be modified.
Links in the main navigation menu that will take visitors to any site outside of trojan.troy.edu are designated using the glyphicon-new-window' glyphicon with an opacity of .4, which is set via CSS. Use of this glyphicon is only required in the main menu, it is not necessary for links in the body of a page.
<li> <a href="http://sos.troy.edu">Emergency Information (SOS) <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span></a> </li>
This format is intended for displaying contact information when a photo is not provided and is not expected to be added at a later date, such as with departmental contact information.
In this example two sets of contact information are shown. Note that the .row and .col-md-6 divs are only included for alignment of the two areas and that only the div named .contact-basic and its contents are actually required.
Contents in the first div are styled as the name or title. Contents in the second div are presented as the address and contents in the third div are formatted as other methods of contact. Note that the spacing between the glyphicons and the following text is handled via CSS; no spaces need to be added manually.
Only the first example includes an e-mail address. If you do not have an address but do have contact information then simply leave the contents of the second DIV blank.
Additional content can also be added in the third DIV, after the contact information (but within the third DIV, not outside of it).
This is an example of addition information that you might want to add.
<div class="row">
<div class="col-md-6">
<div class="contact-basic">
<div>Human Resources<br>Troy Campus</div>
<div>Troy University<br>107 Wright Hall<br>Troy, AL 36082</div>
<div><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="mailto:nobody@troy.edu">nobody@troy.edu</a><br>
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>Telephone: <a href="tel:1-334-670-3710">1-334-670-3710</a><br>
<span class="glyphicon glyphicon-print" aria-hidden="true"></span>Fax: 1-334-670-5666</div>
</div>
</div>
<div class="col-md-6">
<div class="contact-basic">
<div>Human Resources<br>Montgomery Campus</div>
<div>Troy University<br>223 Whitley Hall<br>Montgomery, AL 36103</div>
<div><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>Telephone: <a href="tel:1-334-241-9581">1-334-241-9581</a><br><span class="glyphicon glyphicon-print" aria-hidden="true"></span>Fax: 1-334-241-5413
<br> <p>This is an example of addition information that you might want to add.</p></div>
</div>
</div>
</div>
This format is intended for displaying contact information with a photograph. It is recommended that the same style be used within a page even when not all (but some) of the contact have photos provided in order to provide a consistent layout. In such cases a generic Trojan Head graphic is recommended for use with individuals that do not have photographs. It is not recommended to mix this format with the non-photo format in the same containers.
The code is contained within a generic row and each contact information and photo is wrapped within a col-md-6 column. The contact information and photograph are also wrapped within a row using the contact-photo class.
This format is intended to be used with two contacts per row but there will be cases when only a single contact (such as the last row) is available. In this case enclose it within the same col-md-6 but simply leave off the second col-md-6 where another contact usually be placed.
<div class="row">
<div class="col-md-6">
<div class="row contact-photo">
<div class="col-md-6"> <img src="http://placehold.it/200x200"> </div>
<div class="col-md-6">
<div>Human Resources<br>
Troy Campus</div>
<div>Troy University<br>
107 Wright Hall<br>
Troy, AL 36082</div>
<div><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="mailto:nobody@troy.edu">nobody@troy.edu</a><br>
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>Telephone: <a href="tel:1-334-670-3710">1-334-670-3710</a><br>
<span class="glyphicon glyphicon-print" aria-hidden="true"></span>Fax: 1-334-670-5666</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row contact-photo">
<div class="col-md-6"> <img src="http://placehold.it/200x200"> </div>
<div class="col-md-6">
<div>Human Resources<br>
Troy Campus</div>
<div>Troy University<br>
107 Wright Hall<br>
Troy, AL 36082</div>
<div><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="mailto:nobody@troy.edu">nobody@troy.edu</a><br>
<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>Telephone: <a href="tel:1-334-670-3710">1-334-670-3710</a><br>
<span class="glyphicon glyphicon-print" aria-hidden="true"></span>Fax: 1-334-670-5666</div>
</div>
</div>
</div>
</div>
This format is recommended for listing events for an area's calendar, typically in a full-width format. This format was specifically developed for the Academic Calendar and the Holidays & Administrative Leave Calendar.
This example is configured to be open when a page loads. To make a section collapse by default simply remove the "in" class from the parent DIV.
<h4><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> <a data-toggle="collapse" href="#2016summer" aria-expanded="false" aria-controls="2016summer">Summer 2016</a></h4>
<div class="events collapse in" id="2016summer">
<div class="event">
<div class="event-date">May 23, Monday</div>
<div class="event-desc">First Official Day for Summer; Classes Begin for Term T-5 and Session A (Troy Campus only)<br>1st Payment Due (Troy Campus students on payment plan only)</div>
</div>
<div class="event">
<div class="event-date">May 26, Thursday</div>
<div class="event-desc">Last Day to Add for Session A</div>
</div>
<div class="event">
<div class="event-date">May 28-30, Saturday-Monday</div>
<div class="event-desc">Memorial Day Holiday Weekend</div>
</div>
<div class="event">
<div class="event-date">May 31, Tuesday</div>
<div class="event-desc">Last Day for Free Schedule Course Adjustments Summer Full Session, T-5 & Summer Session A (Troy Campus only)</div>
</div>
<div class="event">
<div class="event-date">June 1, Wednesday</div>
<div class="event-desc">Census Date for Summer Full Session, T-5 & Summer Session A (Troy Campus only)</div>
</div>
</div>
These boxes can be added individually and manually positioned or they can be added as a group to a container to align them to the middle and add a margin between then. Each image and link is customized directly in the page.
These images are not responsive but the dimensions are below the width of most screens. Each image must be exactly 200px wide and 175px high.
<div class="plcontainer">
<div class="plbox"> <a href="#"><img src="/styleguide/assets/images/200x175.jpg" alt="Placeholder Image" title="Placeholder Image">
<div><span>Link to </span><br>
Something Cool</div>
</a> </div>
<div class="plbox"> <a href="#"><img src="/styleguide/assets/images/200x175.jpg" alt="Placeholder Image" title="Placeholder Image">
<div><span>Link to another</span><br>
Cool Thing Here</div>
</a> </div>
<div class="plbox"> <a href="#"><img src="/styleguide/assets/images/200x175.jpg" alt="Placeholder Image" title="Placeholder Image">
<div><span>Another Link to</span><br>
Some Other Cool Thing</div>
</a> </div>
</div>
Modified Bootstrap Carousels are provided. The first version is restricted to a maximum width of 768 pixels to prevent background images from stretching across large screens and to provide some constraints for layout purposes.
No additional scripts or CSS is required to implement these. The demonstration code may be copied but it is suggested that you change the "carousel-trojan-demo" ID to something appropriate for the page that you will place it in. This identifier is also used to manage multiple carousels in the same page; it must be unique if using more than one carousel in a page.
Typically, additional space should be added after a carousel. The recommended method is to simply add a BR or P tag after the carousel. This was not added via CSS to provide some flexibility in the layout. More information about working with Bootstrap Carousels can be found in the Bootstrap documentation.
Alignment of the 786 pixel version is recommended to be centered via use of the margin:auto setting applied directly in the style property of the main carousel div.
<!-- Begin Carousel768 -->
<div id="carousel-trojan-demo" class="carousel slide carousel768" data-ride="carousel" style="margin:auto;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-trojan-demo" data-slide-to="0" class="active"></li>
<li data-target="#carousel-trojan-demo" data-slide-to="1"></li>
<li data-target="#carousel-trojan-demo" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="/styleguide/assets/images/768x150.png">
<div class="carousel-caption"> This is the first slider item. </div>
</div>
<div class="item"> <img src="/styleguide/assets/images/768x150.png">
<div class="carousel-caption"> This is the second slider item. </div>
</div>
<div class="item"> <img src="/styleguide/assets/images/768x150.png">
<div class="carousel-caption"> This is the third slider item. </div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-trojan-demo" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-trojan-demo" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<!-- End Carousel768 -->
A 400 pixel wide version is also provided with the intention for it to typically be a square and more suitable for use within multicolumn layouts.
<!-- Begin Carousel400 -->
<div id="carousel-trojan-demo-square" class="carousel slide carousel400" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-trojan-demo-square" data-slide-to="0" class="active"></li>
<li data-target="#carousel-trojan-demo-square" data-slide-to="1"></li>
<li data-target="#carousel-trojan-demo-square" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="/styleguide/assets/images/400x400.png">
<div class="carousel-caption"> This is the first slider item. </div>
</div>
<div class="item"> <img src="/styleguide/assets/images/400x400.png">
<div class="carousel-caption"> This is the second slider item. </div>
</div>
<div class="item"> <img src="/styleguide/assets/images/400x400.png">
<div class="carousel-caption"> This is the third slider item. </div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-trojan-demo-square" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-trojan-demo-square" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<!-- End Carousel400 -->
