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

Custom templates

Discussion in 'Styling and Customization Questions' started by Drae, Oct 28, 2012.

  1. Drae

    Drae Active Member

    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.

    Code:
    /* 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;
    }
    Code:
    <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?
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
    Jake Bunce and Drae like this.
  3. Drae

    Drae Active Member

    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.
     
  4. Chris D

    Chris D XenForo Developer Staff Member

    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:

    Code:
    <xen:include template="YourTemplate" />
    In YourTemplate:
    Code:
    <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.
     
    Jake Bunce likes this.

Share This Page