• 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?

Jake Bunce

XenForo moderator
Staff member
#2
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
 

Nasr

Well-known member
#3
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.
 

Jake Bunce

XenForo moderator
Staff member
#5
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.
 

Nasr

Well-known member
#9
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:

View attachment 5919

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

Nasr

Well-known member
#12
I am afraid I am not very good with div layouts. I played with your code for a while without success.
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
 

Erik

Well-known member
#16
Yep, stuff like that is usually an issue of IE not collapsing the margins correctly (look up margin collapse if you're interested). :)