1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Unmaintained XenCarta Template Repository

xencarta template examples

  1. Moses

    Moses Well-Known Member

    Thought we could use a thread to share XenCarta templates. Not sure if it's in the right spot, feel free to move it.
     
    The8thLegion, zett, Walter and 10 others like this.
  2. Moses

    Moses Well-Known Member

    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:
     
    The8thLegion likes this.
  3. Moses

    Moses Well-Known Member

    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.PNG
     
  4. Moses

    Moses Well-Known Member

    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.PNG
     
    The8thLegion and intradox like this.
  5. Moses

    Moses Well-Known Member

    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.PNG
     
  6. Moses

    Moses Well-Known Member

    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.PNG
     
    The8thLegion and intradox like this.
  7. Moses

    Moses Well-Known Member

    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.PNG
     
    The8thLegion and intradox like this.
  8. Moses

    Moses Well-Known Member

    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.PNG

    Credits:
    Brogan for CSS inspiration
    Anthony Parsons for the original galleria concept
     
  9. Moses

    Moses Well-Known Member

    Google Tables (Beta)
    This has been replaced with a plugin
     

    Attached Files:

    The8thLegion and Andy.N like this.
  10. Moses

    Moses Well-Known Member

    Attached Files:

    The8thLegion, intradox and Andy.N like this.
  11. Moses

    Moses Well-Known Member

    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.png
     
    The8thLegion and intradox like this.
  12. Moses

    Moses Well-Known Member

  13. Dinh Thanh

    Dinh Thanh Well-Known Member

  14. DRE

    DRE Well-Known Member

    God bless you Moses.
     
    gordy likes this.
  15. Adam Howard

    Adam Howard Well-Known Member

    None of the links in your 1st post seem to work

    XenForo Community - Error
    The requested thread could not be found.
     
  16. Moses

    Moses Well-Known Member

    Links have been fixed now that Brogran has merged threads. They're just shortcuts to the posts above.
     
  17. ddmmh

    ddmmh Well-Known Member

    Nice. Templates like this make me want to try out XenCarta again, cheers
     
  18. DRE

    DRE Well-Known Member

    Uh dumb question but how do you create a page using these examples?
     
  19. Moses

    Moses Well-Known Member

  20. jackrouse

    jackrouse Member

    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.
     

Share This Page