Resource icon

XenCarta Template Repository

Contribute to this thread
Please try and share any templates in the format outlined below, though if documenting your template doesn't fit in this framework then by all means adapt it. You can copy / paste this into a new post in this thread.



Name
Description

Template Name:
[code][/code]

Template Code:
[code][/code]

CSS:
[code][/code]

Template Example:
[code][/code]

Screenshot:
 
Biography Block
This is a collection of templates that I'm using to float a Rugby Players' Biographical details to the right of a wiki entry. It'll obviously need a substantial amount of editing to be useful in other wikis, but hopefully this will get the creative juices flowing.


Template Name: player-top
Code:
<table class="player-table" >
        <tr>
                <td colspan="2" class="player-heading"><b>{{{name}}}</b></td>
        </tr>
        <tr>
                <td colspan="2" class="player-picture">
<div style="padding: 10px;">
<a href="http://cdn.greenandgoldrugby.com/804F73/gagr/up/wikiimages/{{{image}}}.jpg" target="_blank" class="LbTrigger" data-href="misc/lightbox"><img src="http://cdn.greenandgoldrugby.com/804F73/gagr/up/wikiimages/{{{image}}}-300.jpg" alt="gene-fairbanks-navy.jpg" class="bbCodeImage LbImage" style="max-height: 200px;"></a>
<p>{{{caption}}}</p>
</div>
</td>
        </tr>

Template Name: player-bio
Code:
<tr>
                <td colspan="2" class="player-heading"><b>Biography</b></td>
        </tr>
        <tr>
                <td class="player-primary"><b>Nickname</b></td>
                <td class="player-primary">{{{nickname}}}</td>
        </tr>
        <tr>
                <td class="player-secondary"><b>Birthplace</b></td>
                <td class="player-secondary">{{{bplace}}}</td>
        </tr>
        <tr>
                <td class="player-primary"><b>Date of Birth</b></td>
                <td class="player-primary">{{{dob}}}</td>
        </tr>
        <tr>
                <td class="player-secondary"><b>Age</b></td>
                <td class="player-secondary"><script type="text/javascript">
var now = new Date();
var today = new Date(now.getYear(),now.getMonth(),now.getDate());
var yearNow = now.getYear();
var monthNow = now.getMonth();
var dateNow = now.getDate();
 
var datestring = {{{dob_yyyymmdd}}} + '';
var dob = new Date(datestring.substring(0,4), datestring.substring(4,6)-1, datestring.substring(6,8));
var yearDob = dob.getYear();
 
yearAge = yearNow - yearDob;
var monthDob = dob.getMonth();
 
if (monthNow >= monthDob) var monthAge = monthNow - monthDob; else { yearAge--;
var monthAge = 12 + monthNow -monthDob; };
if (monthAge > 1) var monthDisplay = ' Months Old'; else { var monthDisplay = ' Month Old' };
 
document.write (yearAge + ' Years, ' + monthAge + monthDisplay);
</script></td>
        </tr>
        <tr>
                <td class="player-primary"><b>Height</b></td>
                <td class="player-primary">{{{height}}}</td>
        </tr>
        <tr>
                <td class="player-secondary"><b>Weight</b></td>
                <td class="player-secondary">{{{weight}}}</td>
        </tr>
        <tr>
                <td class="player-primary"><b>Position</b></td>
                <td class="player-primary">{{{position}}}</td>
        </tr>
        <tr>
                <td class="player-secondary"><b>School</b></td>
                <td class="player-secondary">{{{school}}}</td>
        </tr>

Template Name: player-career
Code:
<tr>
                <td colspan="2" class="player-heading"><b>{{{career}}} Career</b></td>
        </tr>
        <tr>
                <td class="player-primary">{{{team}}}</td>
                <td class="player-primary">{{{years}}}</td>
        </tr>

Template Name: player-tweets
Code:
<tr>
                <td colspan="2" class="player-heading"><b>On Twitter</b></td>
        </tr>
        <tr>
                <td colspan="2"><div style="padding: 5px;"><script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: 'from:@{{{TwitterName}}}',
  interval: 30000,
  title: '',
  subject: '',
  width: 290,
  height: 250,
  theme: {
    shell: {
      background: '#23631c',
      color: '#f9cf6d'
    },
    tweets: {
      background: '#ffffff',
      color: '#91ac75',
      links: '#094603'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    behavior: 'all'
  }
}).render().start();
</script></div></td>
        </tr>

Template Name: table-end
Code:
</tbody></table>

CSS:
Code:
.player-table {
float: right; 
margin: 0px 0px 5px 10px; 
width: 300px; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border: 1px solid @primaryMedium;
}
 
.player-primary { line-height: 160%; background: @contentBackground;}
 
.player-secondary { line-height: 160%; background: @primaryLightest;}
 
.player-heading {
font-weight: bold; 
font-size: 12pt; 
text-shadow: 0 0 0 transparent, 0 1px 1px #23631C;
color: @secondaryLighter; 
background: @primaryMedium url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 1px 0;
margin: 3px auto 5px;
}
 
.player-picture {background: @secondaryLightest;}


Template Usage:
The three templates provide the flexibility I need with players having different bio requirements. Many have Club, Domestic and International careers, others just Club. Some don't have twitter so I don't use the player-tweets template.

Example:
Code:
[template=player-top]
| name = James Horwill
| image = reds/james-horwill
| caption = Pretty in Pink[/template]
[template=player-bio]| nickname = Big Kev
| bplace = Warwick
| dob = 29th May, 1985
| dob_yyyymmdd = 19820727
| school = Brisbane Boys College
| height = 2.00m
| weight = 117kg
| position = Lock[/template]
[template=player-career]| career = Club| team = Queensland University
| years = 2010 - present
[/template]
[template=player-career]| career = Province| team = Queensland Reds
| years = 2006 - present
[/template]
[template=player-career]| career = International| team = Australia
| years = 2007 - present
[/template]
[template=player-tweets]TwitterName = jhorwill[/template]
[template=table-end][/template]

Screenshot:
Player Bio.webp
 
Age in Years and Months from Date of Birth
This template calculates an age in Years and Months from a date of birth (in YYYYMMDD format).

Template Name: age-in-years-and-months
Code:
<script type="text/javascript">
var now = new Date();
var today = new Date(now.getYear(),now.getMonth(),now.getDate());
var yearNow = now.getYear();
var monthNow = now.getMonth();
var dateNow = now.getDate();
 
var datestring = {{{dob_yyyymmdd}}} + '';
var dob = new Date(datestring.substring(0,4), datestring.substring(4,6)-1, datestring.substring(6,8));
var yearDob = dob.getYear();
 
yearAge = yearNow - yearDob;
var monthDob = dob.getMonth();
 
if (monthNow >= monthDob) var monthAge = monthNow - monthDob; else { yearAge--;
var monthAge = 12 + monthNow -monthDob; };
if (monthAge > 1) var monthDisplay = ' Months Old'; else { var monthDisplay = ' Month Old' };
 
document.write (yearAge + ' Years, ' + monthAge + monthDisplay);
</script>

Template Usage:
Code:
[template=age-in-years-and-months]dob_yyyymmdd = 19760925[/template]

Screenshot:
Age Template.webp
 
Javascript Redirect
This template forces XenCarta to redirect a user from one page to another page

Template-name: redirect
Code:
<script language="JavaScript">
<!--
window.location = 'wiki/{{{slug}}}'
-->
</script>
 
<div class="subHeading">Redirecting to {{{slug}}}</div>
 
If you are not automatically redirected in 5 seconds, click <a href="wiki/{{{slug}}}">here</a>.


Template-usage:
Code:
[template=redirect]| slug = james-horwill[/template]

Screenshot:
redirect.webp
 
Twitter search widget
This template displays a widget which shows a person's most recent tweets

Template Name: twitter-search-widget
Code:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: 'from:@{{{TwitterName}}}',
  interval: 30000,
  title: 'Latest Tweets',
  subject: 'James Horwill',
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#23631c',
      color: '#f9cf6d'
    },
    tweets: {
      background: '#ffffff',
      color: '#91ac75',
      links: '#094603'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
  }
}).render().start();
</script>

Template Usage:
Code:
[template=twitter-search-widget]TwitterName = jhorwill[/template]

Screenshot
Twitter.webp
 
Section Heading (No TOC)
A section heading that does not show up in the Table of Contents

Template Name: title
Code:
<div class="subHeading">{{{heading}}}</div>

Template Example:
Code:
[template=title]| heading = Section Heading[/template]

Screenshot:
Section Heading.webp
 
CSS Image Menu
A CSS menu of images that resizes to fit the screen and makes a nice way to navigate a wiki

Example:
http://www.greenandgoldrugby.com/community/wiki/western-force/

Template Name: galleria-top
Code:
<div class="home_grid_icons" style="display: inline-block;">
<div class="home_links_gridRow">

Template Name: galleria-item
note the hard-coded url in this code block
Code:
<div class="profile-table" style="height: 165px; margin-top: 10px;">
<a href="wiki/{{{slug}}}/" class="linkPlain">
<div class="home_linkContent">
<h4 class="profile-name">{{{name}}}</h4>
<div class="profile-image" style="background: url('http://cdn.greenandgoldrugby.com/804F73/gagr/up/wikiimages/{{{team}}}/{{{slug}}}-100.jpg')"></div>
<div class="profile-position">{{{position}}}</div>
</div>
</a>
</div>

Template Name: galleria-end
Code:
</div>
</div>

CSS:
note the hard-coded url in this code block
Code:
.profile-table {
position: relative;
width: 120px;
height: 165px;
float: left;
background: @primaryLightest url('http://www.greenandgoldrugby.com/up/wiki_index_gradient.png') repeat-x top;
border: 1px solid silver;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0,0,0, 0.4);
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0, 0.4);
-khtml-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
border-image: initial;
margin: 10px 5px 0 5px;
}
 
.profile-name {
padding: 2px 0 0;
height: 20px;
text-decoration: none !important;
}
 
.profile-name:hover, .profile-position:hover, .profile-table:hover {
text-decoration: none !important;
}
 
 
.profile-image {
height: 100px;
width: 100px;
position: relative;
left: 10px;
top: 11px;
}
 
.profile-position {
height: 10px;
position: absolute;
display: inline-block;
bottom: 10px;
text-align: center;
width: 120px;
}

Template Example:
Code:
[template=galleria-top][/template]
 
[template=galleria-item]| slug = alfi-mafi | team = force | position = Centre | name = Alfi Mafi[/template]
[template=galleria-item]| slug = cameron-shepherd | team = force | position = Fullback | name = Cameron Shepherd[/template]
[template=galleria-item]| slug = gene-fairbanks | team = force | position = Centre | name = Gene Fairbanks[/template]
[template=galleria-item]| slug = jordan-rapana | team = force | position = Wing | name = Jordan Rapana[/template]
[template=galleria-item]| slug = napolioni-nalaga | team = force | position = Wing | name = Napolioni Nalaga[/template]
[template=galleria-item]| slug = nick-cummins | team = force | position = Wing | name = Nick Cummins[/template]
[template=galleria-item]| slug = pat-dellit | team = force | position = Wing | name = Pat Dellit[/template]
[template=galleria-item]| slug = rory-sidey | team = force | position = Outside Centre | name = Rory Sidey[/template]
[template=galleria-item]| slug = will-tupou | team = force | position = Centre | name = Will Tupou[/template]
[template=galleria-item]| slug = winston-stanley | team = force | position = Centre | name = Winston Stanley[/template]
[template=galleria-end][/template]

Images:
This relies on you having uploaded images for each menu item to a specified folder (bold in the galleria-item template).
The image must:
  • be .jpg format
  • 100px x 100px
  • have the exact same name as the slug, but with -100 on the end
Screenshot:
Galleria.webp

Credits:
Brogan for CSS inspiration
Anthony Parsons for the original galleria concept
 
Footnotes
This series of templates control footnotes in your wiki using javascript.

Template: footnote-add:
Code:
<script type="text/javascript"><!--
if (typeof(footnote_number)=='undefined') {var footnote_number = 0};
if (typeof(footnote_name)=='undefined') {var footnote_name=new Array()};
 
footnote_number = footnote_number + 1;
footnote_name[footnote_number] = '{{{name}}}';
document.write("<sup id = \"fnbackref_" + footnote_number + "\" class=\"footnote\"><a href=\"" + document.location + "#fnref_" + footnote_number + "\">" + footnote_number + "</a></sup>");
--></script>

Template footnote-display:
Code:
<div class="footnotes">
<hr>
<h3>Footnotes</h3>
<ol class="footnote_list">
<script type="text/javascript"><!--
for (i=1;i<=footnote_number;i++)
{
document.write("<li id=\"fnref_" + i + "\" class=\"footnote_list_item\">" + footnote_name[i] + " <a href=\"" + document.location + "#fnbackref_" + i + "\" title=\"Jump back to footnote " + i + " in the text.\">↩</a></li>");
}
--></script>
</ol></div>

CSS:
Code:
.footnote { position: relative; top: -0.5em; font-size: 80%; font-weight: 700;}
.footnote_list {display: block;}
.footnote_list_item { list-style-type: decimal !important; }

Template Example:
text [template=footnote-add]name = Google[/template]

more text [template=footnote-add]name = Wiki[/template] more [template=footnote-add]name = GAGR[/template]


[template=footnote-display][/template][/code]

Screenshot:
footnotes.webp
 
None of the links in your 1st post seem to work

XenForo Community - Error
The requested thread could not be found.
 
Links have been fixed now that Brogran has merged threads. They're just shortcuts to the posts above.
 
I'm going to take a fair bit of time looking through this, especially as templates are exactly what I want for my Football Team site, can't thank you enough for all this.
 
Top Bottom