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

How can I use plain HTML in XenForo Templates?

Discussion in 'Styling and Customization Questions' started by kato233, Jul 16, 2014.

  1. kato233

    kato233 Member

    Hey guys,

    I am trying to take the header from my website (www.playmc.com), and use that as the header for the forums so it gives the impression that they aren't really going to a different site.

    I tried adding to the header template in the appearances on the admin page, and then styling it in header.css but nothing changed. The list was added to the header but the css wasn't being applied.

    Any ideas? Sorry if this has been posted already.

    K
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Templates support HTML and XenForo syntax.
     
  3. kato233

    kato233 Member

    Okay, but if I go to edit template: header,

    Code:
    <xen:edithint template="header.css" />
    
    <xen:hook name="header">
    <div id="header">
        <xen:include template="logo_block" />
        <xen:include template="test" />
        <xen:include template="navigation" />
        <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
    </div>
    </xen:hook>
    and I try to add a list

    Code:
    <xen:edithint template="header.css" />
    
    <xen:hook name="header">
    <div id="header">
        <xen:include template="logo_block" />
        <ul id="test">
        <li> test0 </li>
        <li> test1 </li>
        </ul>
        <xen:include template="navigation" />
        <xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
    </div>
    </xen:hook>
    And in header.css I put:

    Code:
    #test {
      color: red;
      display: inline-block;
    }
    /*or*/
    #test li {
      color: red;
    }
    
    It won't style it red, or display ilb.
     
  4. kato233

    kato233 Member

    Fixed I think, feel free if there is a better method:

    Just added the styles to EXTRA.css
     

Share This Page