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

wrapping sections/categories in a wrapper?

Discussion in 'XenForo Questions and Support' started by Nasr, Nov 14, 2010.

  1. Nasr

    Nasr Well-Known Member

    Does anyone know which template I should edit to wrap forum sections/categories in a wrapper?
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    There is already a wrapper around the forums (the rounded border):

    Screen shot 2010-11-14 at 11.51.54 AM.jpg

    That is controlled by this class:

    Admin CP -> Appearance -> Style Properties -> Building Blocks -> Section Main
     
    Jurhum likes this.
  3. Nasr

    Nasr Well-Known Member

    i actually need to wrap this part instead of the whole part...

    cat.PNG

    so it will be a wrapper for each section. it will be the same wrapper but it will make it look much better than how it is right now.
     
  4. Nasr

    Nasr Well-Known Member

    can I wrap the node category level_1 template in a wrapper?
     
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Oh OK. You can edit this template to do that:

    Admin CP -> Appearance -> Templates -> node_category_level_1

    If you surround the contents of this template in some kind of wrapper then it will apply to whole categories in the forum list.

    _____

    For example, you can move the sectionMain wrapper with these changes:

    Admin CP -> Appearance -> Templates -> node_list

    Remove "sectionMain" from this code:

    Code:
    <xen:if hascontent="true">
    <fieldset>
    	<ol class="nodeList sectionMain" id="forums">
    	<xen:contentcheck>
    		<xen:foreach loop="$renderedNodes" value="$node">{xen:raw $node}</xen:foreach>
    	</xen:contentcheck>
    	</ol>
    </fieldset>
    </xen:if>
    
    Admin CP -> Appearance -> Templates -> node_category_level_1

    Add "sectionMain" as shown below:

    Code:
    <xen:require css="node_list.css" />
    <xen:require css="node_category.css" />
    
    <li class="sectionMain node category level_{$level}" id="{xen:helper linktitle, $category.node_id, $category.title}">
    
    That creates this effect:

    Screen shot 2010-11-14 at 12.10.09 PM.png

    A change like this can sometimes be context sensitive. You might find some layout weirdness at certain forum depths. You will need to test it out.
     
    viper357, UKD, nrep and 3 others like this.
  6. anotheralias

    anotheralias Well-Known Member

    Would anyone mind telling me, what is a wrapper exactly? Is it kind of like putting one big main table around a lot of smaller tables?
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Yes.
     
    anotheralias likes this.
  8. anotheralias

    anotheralias Well-Known Member

    Thank you Jake! :)
     
  9. Nasr

    Nasr Well-Known Member

    Hey Jake, I really appreciate your help a lot. However, that only added a border around the forums.

    Here is what I am after. I'm going to post my CSS as well as the div content.

    Code:
    .redlogo-head-body {
        background-image:url(tl4s-hij/images/etar-top-tcat.png);
        background-repeat: repeat-x;
        height: 120px;
        text-align:center
    }
    .redlogo-head-right {
        background-image:url(tl4s-hij/images/etar-top-right.png);
        background-repeat: no-repeat;
        float: right;
        height: 120px;
        width: 470px;
    }
    .redlogo-head-left {
        background-image:url(tl4s-hij/images/etar-top-left.png);
        background-repeat: no-repeat;
        float: left;
        height: 120px;
        width: 208px;
    }
    .redlogo-head-center{
        height:120px;
        background:none;
        display:block;
        margin:0 auto
    }
    .redlogo-foot-body {
        background-image:url(tl4s-hij/images/etar-bot-tcat.png);
        background-repeat: repeat-x;
        height: 63px;
    }
    .redlogo-foot-right {
        background-image:url(tl4s-hij/images/etar-bot-right.png);
        background-repeat: no-repeat;
        float: right;
        height: 63px;
        width: 140px;
    }
    .redlogo-foot-left {
        background-image:url(tl4s-hij/images/etar-bot-left.png);
        background-repeat: no-repeat;
        float: left;
        height: 63px;
        width: 140px;
    }
    .redlogo-foot-center{
        height:63px;
        width: 331px;
        background:url(tl4s-hij/images/etar-bot-center.png);
        display:block;
        margin:0 auto
    }
    .redlogo-cont-body {
        background: #fff;
    }
    .redlogo-cont-right {
        background-image:url(tl4s-hij/images/R.png);
        background-repeat: repeat-y;
        background-position: right;
    }
    .redlogo-cont-left {
        background-image:url(tl4s-hij/images/L.png);
        background-repeat: repeat-y;
        background-position: left;
        padding-left: 34px;
        padding-right: 34px;
        }
    HTML:
    <div class="redlogo-head-body">
    <div class="redlogo-head-right"></div>
    <div class="redlogo-head-left"></div>
    <div class="redlogo-head-center">
    </div>
    </div>
    
    <div class="redlogo-cont-body">
    <div class="redlogo-cont-right">
    <div class="redlogo-cont-left">
     
    I want the sections to go here
    
    </div>
    </div>
    </div>
    
    <div class="redlogo-foot-body">
    <div class="redlogo-foot-right"></div>
    <div class="redlogo-foot-left"></div>
    <div class="redlogo-foot-center">
    </div>
    </div>
    This is supposed to put, left image, filler, right image on top then a left image and right image as background behind the forums. and then at the bottom it will add a footer two images and a filler as well. I've tried many things but couldnt figure out exactly which template to edit to get the result am after.
     
  10. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I am afraid I am not very good with div layouts. I played with your code for a while without success.
     
    Jurhum likes this.
  11. anotheralias

    anotheralias Well-Known Member

    I wish we had the option of a regular table layout. I can do those all day long. The CSS layout system is just like Calculus to me.
     
    Jurhum likes this.
  12. Nasr

    Nasr Well-Known Member

    i've played with it for a while and manged to get it to work okay in firefox. But IE is killing me, it's adding space to the bottom section. Sorry to bother you, but would you be able to look at it and guess as to what is causing it to do this?

    Firefox
    firefox.PNG

    IE

    IE.PNG
     
  13. Nasr

    Nasr Well-Known Member

    lol that made me laugh a bit. CSS is really difficult and I just figure out stuff with "trial and error".
     
    anotheralias likes this.
  14. anotheralias

    anotheralias Well-Known Member

    I use the trial-and-error system too, with limited success. At least with math I could copy off someone else's paper. :D
     
    Nasr likes this.
  15. Nasr

    Nasr Well-Known Member

    Ok, I actually figured it out. There was a bottom margin of 20px for .nodeList .node.level_1 took that out and works perfect in IE. Thank you everyone. :)
     
    anotheralias likes this.
  16. Erik

    Erik Well-Known Member

    Yep, stuff like that is usually an issue of IE not collapsing the margins correctly (look up margin collapse if you're interested). :)
     
    Nasr likes this.

Share This Page