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

How do I add a couple of boxes to the homepage?

DaveL

Well-known member
#1
Hi,

I was just wondering if anyone could advise on how I would go about adding a couple of boxes to my homepage. (Ive attached a couple of images pointing out locations)

The box at the top I would use for text/images - A kind of welcome message to the forum

The two boxes at the bottom of the forum I would use to display a few images.

Any help greatly appreciated.

Dave
 

Brogan

XenForo moderator
Staff member
#4
Well the easiest way to do that is to create a couple of new templates, e.g. box_top and box_bottom.

Then you would include those two templates in the appropriate view/template; forum_list, PAGE_CONTAINER, etc. using <xen:include template="box_top" />, depending on where you want them shown: on every page, just forum home, etc.

Then you would need to create the content for your two new templates using html and css.
The css would also be in a separate template and then you would style the html using classes.
The css would be referenced in your box_top template using e.g. <xen:require css="box.css" />
Alternatively you can just add all of your css to EXTRA.css.

Does that make sense?
 

DaveL

Well-known member
#5
Kind of makes sense, seems a bit round the houses though.

Would I be able to find a piece of html for a box and place that on the forum home? Just thought there may have been an easier way with xenforo.
 

Brogan

XenForo moderator
Staff member
#6
Well you can do everything inline but that really isn't good practice.

By all means you can re-use the existing css classes for your own use and this would in some cases be desirable as you want your templates to reflect each style.

For example, this css will create the rounded box you see on the main forum list page which encloses all of the nodes:
HTML:
.sectionMain {
background-color: #FCFCFF;
border: 1px solid #A5CAE4;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
margin: 10px auto;
padding: 10px;
}
For your specific content though, such as images, etc., you may need to create some custom css for layout, etc.
 

DaveL

Well-known member
#7
Thanks Brogan. I'll have a play around but seems you have to be an expert at css to acheive anything now days!

How would I put any content such as the word "Hello" to display within that css?
 

Brogan

XenForo moderator
Staff member
#8
Like this:
HTML:
<div class="sectionMain">Hello</div>

Look for this in PAGE_CONTAINER:
HTML:
<!-- top breadcrumb, top ctrl -->
Add that code above it and then refresh any page and you will see how it appears.
Don't forget to revert the template afterwards though.
 

DaveL

Well-known member
#9
Ok, I think im getting it!

Ive created a new template called "box_bottom1"
Inside that template I have the following -

<xen:require css="EXTRA.css" />
<div class="box">Hello</div>

Inside my EXTRA.CSS I have

#box {
background-image: url(styles/default/shelley_snow_bg.png);
}
background-color: #FCFCFF;
border: 1px solid #A5CAE4;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
margin: 10px auto;
padding: 10px;
}

Am I heading along the right lines?

PS - Thanks for your help so far, really appreciated :)
 

DaveL

Well-known member
#10
Look for this in PAGE_CONTAINER:
HTML:
<!-- top breadcrumb, top ctrl -->
Add that code above it and then refresh any page and you will see how it appears.
Don't forget to revert the template afterwards though.
Im guessing that using the code in my post above, would I just add <xen:include template="box_bottom1" /> into the page container?
 

Brogan

XenForo moderator
Staff member
#12
OK, step by step then.

Create a new template called box_bottom1

Open PAGE_CONTAINER and include the new template below the top breadcrumbs like so:
HTML:
<!-- top breadcrumb, top ctrl -->
<div class="breadBoxTop">
    <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
    <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
</div>

<xen:include template="box_bottom1" />

Next edit box_bottom1 to suit with your HTML and CSS, for example:
HTML:
<div class="sectionMain">Hello</div>
You don't need to include any of the XenForo css templates to your box_bottom1 template as they are already included elsewhere. If you use the EXTRA.css for any custom css then that will automatically be referenced.
You only need to include any custom css stylesheets you create, e.g. DaveL.css or my_boxes.css.

You also don't need to re-create any existing css classes in EXTRA.css, such as sectionMain. You just use those as you wish in your box_bottom1 template.
You only need to create or amend css if you want the styling to differ from the existing classes.

Repeat the steps for any additional templates, changing the location where they are included in PAGE_CONTAINER as required.

Hopefully that makes sense? If not just post back with any questions :)
 

DaveL

Well-known member
#13
Thanks Brogan, really appreciate that. Gave it a try and it works a treat! AmI right in thinking for the bottom I would place it at the bottom of "node_list" template?
 

Brogan

XenForo moderator
Staff member
#14
Thanks Brogan, really appreciate that. Gave it a try and it works a treat! AmI right in thinking for the bottom I would place it at the bottom of "node_list" template?
Spot on! :)

To remove the forum name, just edit the first line of forum_list to this: <xen:h1></xen:h1>
 

Brogan

XenForo moderator
Staff member
#16
Indeed there is :)

<xen:if is="!{$visitor.user_id}">... </xen:if>

or

<xen:if is="{$visitor.user_id}">
for logged in users
<xen:else />
for guests
</xen:if>