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

Discussion in 'XenForo Questions and Support' started by DaveL, Dec 7, 2010.

  1. DaveL

    DaveL Well-Known Member

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

    Brogan XenForo Moderator Staff Member

    It might help if you attach the images :D
     
  3. DaveL

    DaveL Well-Known Member

    Doh! Would help I suppose!
     

    Attached Files:

    • box.png
      box.png
      File size:
      115.7 KB
      Views:
      35
    • box1.png
      box1.png
      File size:
      86.8 KB
      Views:
      30
  4. Brogan

    Brogan XenForo Moderator Staff Member

    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?
     
  5. DaveL

    DaveL Well-Known Member

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

    Brogan XenForo Moderator Staff Member

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

    DaveL Well-Known Member

    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?
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    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 likes this.
  9. DaveL

    DaveL Well-Known Member

    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 :)
     
  10. DaveL

    DaveL Well-Known Member

    Im guessing that using the code in my post above, would I just add <xen:include template="box_bottom1" /> into the page container?
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    Not quite :)

    I'm just feeding my daughter so I'll post something in a bit :D
     
    DaveL likes this.
  12. Brogan

    Brogan XenForo Moderator Staff Member

    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 likes this.
  13. DaveL

    DaveL Well-Known Member

    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?
     
  14. Brogan

    Brogan XenForo Moderator Staff Member

    Spot on! :)

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

    DaveL Well-Known Member

    Thank you :)

    One more question, is there a <if> conditional I can use so the box it will only be visable to guests?
     
  16. Brogan

    Brogan XenForo Moderator Staff Member

    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>
     
    DaveL likes this.
  17. DaveL

    DaveL Well-Known Member

    Thanks Brogan,
    Is there a list of conditionals that can be used with xenforo?
     
  18. Brogan

    Brogan XenForo Moderator Staff Member

    DaveL likes this.

Share This Page