Custom templates

[Drae]

I'm working on a skin at the moment which has a custom template with separate css styling (done in a css template). But on viewing the skin it is for, it isn't getting styled. I've added the "xen include template:" into the page container and it's showing up, but it still isn't styling correctly. Here are the templates so far.

/* Affiliates styling */
 
#affiliatecontainer {
float: center;
width: auto;
height: 400px;
background: #000000;
color: #f5f5f5;
font-size: 16px;
border-top: 1px solid #f5f5f5;
border-left: 5px;
border-right: 5px;
border-bottom: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 15px;
}
 
#affiliatecontainer a {
color: @inlineMod;
text-decoration: none;
text-transform: uppercase:
}
 
#affiliatecontainer a:hover {
color: @primaryLightest;
text-transform: uppercase;
}
 
#affiliatecontainer img {
width:80px;
height:23px;
border:0px;
padding: 2px;
}
 
 
#affiliatecontainer h2 {
font-size: 14px;
font-weight: 700;
text-align: left;
text-transform: uppercase;
padding-top: 5px;
padding-bottom: 5px;
color: #f5f5f5;
}

<div id="affiliatecontainer">
<h2>Official Affiliations & Listings</h2>
 
<!--STATIC AFFILIATES/-->
<a href="http://chroniclesofthedas.ashkir.com" target="_blank"><img src="http://chroniclesofthedas.ashkir.com/images/affiliate.jpg" height="23" width="80" border="0" alt="CoT"></a>
 
<a href="http://z15.invisionfree.com/Rayvens_Reign" target="_blank"><img src="http://i62.photobucket.com/albums/h116/TheMindWanderer/rraffiliate.png" border="0" width="80" height="23" alt="RR"></a>
 
<a href="http://z6.invisionfree.com/Libertas_Renatus" target="_blank"><IMG SRC="http://i216.photobucket.com/albums/cc231/weyrharper/Libertas%20Images/LRbutton1.png" width="80" height="23" alt="LR"></a>
 
<a href="http://s8.zetaboards.com/Elenlond" target="_blank"><img src="http://i124.photobucket.com/albums/p9/ElenlondPictures/adban.jpg" wdith="80" height="23"></a>
 
<a href="http://forum.theworldoftur.com" target="_blank"><img src="http://i37.tinypic.com/2hp0ktf.jpg" alt="TUR" width="80" height="23" border="0"></a>
 
<a href="http://faroah.com" target="_blank"><img src="http://i10.tinypic.com/2jb6wqc.gif" alt="EF" width="80" height="23" /></a>
 
<a href="http://s7.invisionfree.com/Uncanny_Incantations" target="_blank"><img src="http://img.photobucket.com/albums/v709/kiwi_collective/Charming%202011/charming88x31-2.png" width="80" height="23"></a>
 
<a href="http://naruto-role-play-rpg.forumotion.com" target="_blank"><img src="http://i133.photobucket.com/albums/q60/MeltingOrange/NRPG2.png" width="80" height="23" alt="Naruto"></a>
 
<a href="http://endlessfight.b1.jcink.com" target="_blank"><img src="http://img153.imageshack.us/img153/8699/banner1fn.gif" width="80" height="23" border="0" alt="EF"></a>
<br>
<a href="http://aizrp.proboards.com" target="_blank"><img src="http://i55.tinypic.com/2hrlgur.jpg" width="80" height="23"></a>
 
<a href="http://aerth.sinful-ties.net" target="_blank"><img src="http://i8.photobucket.com/albums/a25/pixieloulou1982/z7o6R.png" width="80" height="23"></a>
 
<a href="http://cardrebellion.com" target="_blank"><img src="http://cardrebellion.com/public/style_extra/aff_buttons/craffiliate.png" width="80" height="23" title="CD"></a>
 
<a href="http://rapierwit.b1.jcink.com" target="_blank"><img src="http://i87.photobucket.com/albums/k138/lyriataidgh/RWTinyButton88x31.jpg" width="80" height="23"></a>
 
<a href="http://songofamarant.net" target="_blank"><img src="http://i.imgur.com/uXBZ7.png" width="80" height="23"></a>
 
<a href="http://z7.invisionfree.com/BeforeTheMast" target="_blank"><img src="http://i925.photobucket.com/albums/ad96/l_elena_r/RPG%20graphics/BeforetheMast-1.jpg" width="80" height="23" alt="BTM"></a>
 
<a href="http://www.aeternaroma.com" target="_blank"><img src="http://img815.imageshack.us/img815/9420/aerobutton.gif" border="0" width="80" height="23" alt="AR"></a>
 
<a href="http://showthecolours.forumakers.com/index.htm" target="_blank"><img src="http://i26.photobucket.com/albums/c139/Sharpiefan/RPG%20pics/StCmini-banner.png" width="80" height="23" border="0" alt="Show the Colours"></a>
 
<a href="http://www.rpg-directory.com/" target="_blank"><img src="http://rpg-directory.com/images/affiliate.png"  width="80" height="23" alt="RPG-D" title="RPG-Directory" border="0" /></a>
 
 
<!--LISTED AT and MARQUEE BANNERS/-->
 
<marquee direction="right" scrollamount="6" onMouseover="this.stop();" onMouseout="this.start();">
 
<a href="http://totaldramawebsite.net/wordpress" target="_blank"><img src="http://z3.ifrm.com/417/107/0/f667882/totaldrama.gif" width="80" height="23"></a>
 
<a href="http://glitter.silencia.net" target="_blank"><img src="http://glitter.silencia.net/wp-content/uploads/2011/11/glitter88x312.png" width="80" height="23"></a>
 
<a href="http://nerdlistings.info" target="_blank"><img src="http://i32.photobucket.com/albums/d16/fnerd/Listing%20Buttons/nerdlistingsskull.gif" width="80" height="23"></a>
 
<a href="http://rpgcollection.proboards.com" target="_blank"><img src="http://dravu.com/RPGC3/Main/minibanner1.gif" border="0" width="80" height="23" alt="RPGC"></a>
 
<a href="http://www.seiryuu.org/index.php?action=forum" target="_blank"><img src="http://www.seiryuu.org/images/seiryuu-88x31.gif" height="23" width="80" title="Seiryuu" border="0"></a>
 
<a href="http://templeshoebox.proboards.com" target="_blank"><img src="http://img.photobucket.com/albums/v425/BeyondFear/Shoebox/ShoeboxTempleMiniTBB.png" width="80" height="23"></a>
 
<a href="http://moonlightlistings.proboards.com" target="_blank"><img src="http://i2.photobucket.com/albums/y32/Arhiukahn/MLbutton.jpg" width="80" height="23" alt="Moonlight" border="0"></a>
 
<a href="http://distant-fantasies.net" target="_blank"><img src="http://img.photobucket.com/albums/v339/artisticchardon/df/disf4.png" width="80" height="23" alt="Distant Fantasies" border="0"></a>
 
<a href="http://listings.soft-resonance.net" target="_blank"><img src="http://z3.ifrm.com/417/107/0/f668484/adlisting.gif" alt="LSR" width="80" height="23" border="0"></a>
 
<a href="http://www.rpggateway.com" target="_blank"><img src="http://www.rpggateway.com/images/effielink.jpg" alt="RPGG" width="80" height="23" border="0"></a>
 
<a href="http://s1.zetaboards.com/thegalleria" target="_blank"><img src="http://img197.imageshack.us/img197/1336/aff2.png" width="80" height="23"></a>
 
</marquee>
 
<!-- BEGIN Rendezvous Role-Plays CODE -->
<a href="http://www.ultimatetopsites.com/bin/topsite.cgi?hp4freek&cat=games&ID=191">
<img src="http://www.ultimatetopsites.com/bin/votepicture.art?hp4freek&cat=games&ID=191" width="80" height="23" border="0"></a>
<!-- END Rendezvous Role-Plays CODE -->
<!-- BEGIN RPGD VOTING -->
<a href="http://topsites.rpg-directory.com/fantasy/"><img src="http://topsites.rpg-directory.com/fantasy/button.php?u=Draegon" width="80" height="23" alt="FANTASY" border="0" /></a>
<!-- END RPGD VOTING --> | <a href=http://sizaelrpg.com/threads/our-current-advert.6/>Our Advert</a> | <a href=http://sizaelrpg.com/threads/satrack-rpgd-2.1939/>SATrack</a> | <s>Affiliate</s> |
 
</div>

Should I be doing something differently?

 

[Chris D]

In the template you've posted, I don't see where you have called your custom CSS.

You would need to add:

<xen:require css="csstemplatename.css" />

That should then style it correctly.

 

[Drae]

In the template you've posted, I don't see where you have called your custom CSS.

You would need to add:

<xen:require css="csstemplatename.css" />

That should then style it correctly.

Thanks

I tried adding that and now it doesn't show at all. I also tried adding <xen:hook name="custom_affiliates"> but that made no changes either.

 

[Chris D]

Well, xen:hook wouldn't do anything because that's for adding content to a template using an add-on.

Just to be clear:

The <xen:include template code you put into PAGE_CONTAINER needs to stay. That will ensure the actual HTML template is called.

In addition, within that custom template you're calling you would need the <xen:require css thing which will call the CSS for that template.

So for example... PAGE_CONTAINER:

<xen:include template="YourTemplate" />

In YourTemplate:

<xen:require css="YourCustomCss.css" />
<div id="affiliatecontainer">
<h2>Official Affiliations & Listings</h2>

Obviously you will need to replace "YourTemplate" with the name of your custom template and you will need to replace YourCustomCss.css with the name of your CSS template.