Wednesday, February 22, 2012

XenForo Tutorial: Sub Forum Grid Listing...

These edits will add a GRID LISTING of sub forums in your forum list and forum views.



Its pretty simple... but unfortunately, it requires template edits.

Add to EXTRA.css
HTML:
.subForumsGrid { padding-right: 4px; }
.subForumsGrid .blockLinksGrid { width: 100%; display: inline-block; padding: 5px; }
.subForumsGrid .fullWidth { width: 100% !important; padding-bottom: 4px; }
.subForumsGrid .node { width: 20%; float: left; }
.subForumsGrid .node ol { padding-left: 10px; }
.subForumsGrid .node  a { padding: 5px 10px 5px 18px; }
.subForumsGrid .node .node a { padding: 0px 10px 1px 18px; }
.subForumsGrid .node .nodeTitle { font-size: 11px; white-space: nowrap; overflow: hidden; }
.subForumsGrid .node div,
.subForumsGrid .node div a:hover
{
background-image: url('@imagePath/xenforo/widgets/read.png');
background-repeat: no-repeat;
background-position: 0px 50%;
}
.subForumsGrid .node div.unread,
.subForumsGrid .node div.unread a:hover
{
background-image: url('@imagePath/xenforo/widgets/unread.png');
background-repeat: no-repeat;
background-position: 0px 50%;
}
Add to the END of the following templates:
  1. node_category_level_2
  2. node_forum_level_2
  3. node_link_level_2
  4. node_page_level_2
Code:
<xen:if is="{$level} == 2 AND {$renderedChildren}">
<li class="subForumsGrid">
<ol class="secondaryContent blockLinksList blockLinksGrid">
<xen:foreach loop="$renderedChildren" value="$child">
{xen:raw $child}
</xen:foreach>
</ol>
</li>
</xen:if>
Add to the end of the CLASS on the FIRST LINE of the following templates:
  1. node_category_level_n
  2. node_forum_level_n
  3. node_link_level_n
  4. node_page_level_n
Code:
{xen:if $renderedChildren, ' fullWidth'}

Setting up Google as SMTP server for your XenForo

Using Google instead of setting up your own SMTP server is an easy process and one less thing to worry about and maintain on your own server. and this is Uber Newbie how to

1st you need to setup your domain name MX records to point to your custom google email.
It's free :
http://google.com/a

Select Standard from the Apps Editions

 

Then click on get started,
 

you will be prompted with a field to enter your domain name :

 


Follow the instructions from there. Google covers every major Domain registrar on how to Edit your MX records.
once you verify your domain, Activate the Email service and add a new user. In this case will create support@mydomain.com So all of the administrative emails generated by xenforo will be sent from that email : support@mydomain.com

Then logon to your XenForo admin panel and select the option tab

 
Then select Email options :

 

Then finally setup your xenforo to use google SMTP Like this

 
Make sure you enter support@mydomain.com complete (the whole email string) your password you just setup with google apps.
The port is 465 or 587
Select SSL

Click save and happy emailing :D

This way you avoid having your emails flagged as spam on your users end.
Let me know if further help is needed.

[1.0.0 b1] Finding Variables Available To Templates

"Global" Variables

Two variables that are available in all templates are:

$visitor - This is like $bbuserinfo in vB. It is an array that contains values for the current logged in user. It pulls from the fields of the xf_user table. For example, you can use these references in the templates and in template conditionals:

{$visitor.user_id}
{$visitor.username}
{$visitor.user_group_id}

$xenOptions - This is like $vboptions in vB. It contains settings from the xf_option table in the database. The indexes are the option_id values from each record in that table. For example, here are some references that work in the templates and in template conditionals:

{$xenOptions.attachmentExtensions}
{$xenOptions.boardActive}
{$xenOptions.contactEmailAddress}

How To Find Other Variables

In xF the variables that are available to each template are explicitly defined in the code. All front end templates are called from this directory:

library/XenForo/ControllerPublic

There is a section below to help you find the relevant ControllerPublic file. For now we are just looking at a specific example. For example, the thread view pages use the thread_view template which is called from this file:

library/XenForo/ControllerPublic/Thread.php

Code:
  $viewParams = array(
   'thread' => $thread,
   'forum' => $forum,
   'nodeBreadCrumbs' => $ftpHelper->getNodeBreadCrumbs($forum),

   'canReply' => $threadModel->canReplyToThread($thread, $forum),
   'canQuickReply' => $threadModel->canQuickReply($thread, $forum),
   'canEditThread' => $threadModel->canEditThread($thread, $forum),
   'canDeleteThread' => $threadModel->canDeleteThread($thread, $forum, 'soft'),
   'canMoveThread' => $threadModel->canMoveThread($thread, $forum),
   'canWatchThread' => $threadModel->canWatchThread($thread, $forum),

   'deletedPosts' => $deletedPosts,
   'moderatedPots' => $moderatedPosts,

   'inlineModOptions' => $inlineModOptions,

   'posts' => $posts,
   'page' => $page,
   'postsPerPage' => $postsPerPage,
   'totalPosts' => $thread['reply_count'] + 1,
   'postsRemaining' => max(0, $thread['reply_count'] + 1 - ($page * $postsPerPage)),

   'firstPost' => reset($posts),
   'lastPost' => end($posts),
   'unreadLink' => $unreadLink,

   'poll' => $poll,

   'attachmentParams' => $attachmentParams,
   'attachmentConstraints' => $this->getModelFromCache('XenForo_Model_Attachment')->getAttachmentConstraints(),
   'canViewAttachments' => $threadModel->canViewAttachmentsInThread($thread, $forum)
  );

  return $this->responseView('XenForo_ViewPublic_Thread_View', 'thread_view', $viewParams);
 }
Here you can see the $viewParams defined followed by the template call.

As an example, you can see thread and forum defined for use in this template, so you can use references like this in the thread_view template to access the current thread and forum records for the page:

{$thread.thread_id}
{$thread.title}
{$thread.view_count}
{$forum.node_id}
{$forum.title}
{$forum.message_count}

As you might expect, these records pull from the xf_thread and xf_forum tables in the database.

There are many other $viewParams defined here. If you don't know what all of the variables contain then you can debug them.

Debugging The $viewParams

To see what a particular variable contains you can use a template helper called dump.

Building on the previous example, we can debug $thread by adding this code to the thread_view template:

Code:
{xen:helper dump, $thread}
Once the template is saved you can reload the front end page to see all of the values contained within $thread. It will look like this:

Code:
array(30) {
  ["thread_id"] => int(10906)
  ["node_id"] => int(2)
  ["title"] => string(11) "asdfasdfads"
  ["reply_count"] => int(0)
  ["view_count"] => int(32)
  ["user_id"] => int(1)
  ["username"] => string(5) "admin"
  ["post_date"] => int(1286739559)
  ["sticky"] => int(0)
  ["discussion_state"] => string(7) "visible"
  ["discussion_open"] => int(1)
  ["discussion_type"] => string(0) ""
  ["first_post_id"] => int(133983)
  ["first_post_likes"] => int(0)
  ["last_post_date"] => int(1286739559)
  ["last_post_id"] => int(133983)
  ["last_post_user_id"] => int(1)
  ["last_post_username"] => string(5) "admin"
  ["thread_read_date"] => int(1286739559)
  ["thread_is_watched"] => int(0)
  ["lastPostInfo"] => array(4) {
    ["post_date"] => int(1286739559)
    ["post_id"] => int(133983)
    ["user_id"] => int(1)
    ["username"] => string(5) "admin"
  }
  ["canInlineMod"] => bool(true)
  ["canEditThread"] => bool(true)
  ["isNew"] => bool(false)
  ["hasPreview"] => bool(true)
  ["isRedirect"] => bool(false)
  ["isDeleted"] => bool(false)
  ["isModerated"] => bool(false)
  ["titleCensored"] => bool(true)
  ["lastPageNumbers"] => bool(false)
}
As another example, we can debug the $visitor array by adding this code to any template (since $visitor is available to every template):

Code:
{xen:helper dump, $visitor}
Once the template is saved you can reload the front end page to see all of the values contained within $visitor.

Using Debug Mode To Find The Relevant ControllerPublic File

Enable debug mode on your forum by adding this line to your library/config.php file:

Code:
$config['debug'] = 1;
Now load the forum page that uses the template in question and click the debug link on the bottom:

Timing: 0.2365 seconds Memory: 9.117 MB DB Queries: 11

Scroll to the bottom of the debug output where included files are listed. Look for the library/XenForo/ControllerPublic file.

Related Links
Here is a guide for identifying the root template of a page if you don't know the name of the template you are looking for.
A lot of people have commented on the appearance of the WYSIWYG / Tiny MCE editor.

Well here's a very simple edit which makes it blend in a bit better to the default style, matching the border radius settings of other elements.
Even the menu items get the radius.

Simply add this to EXTRA.css:
Code:
/* Apply rounded corners to text editor */
 
.xenForoSkin table.mceLayout {
border-radius: 4px;
}
 
.xenForoSkin table, .xenForoSkin tbody, .xenForoSkin a, .xenForoSkin img, .xenForoSkin tr, .xenForoSkin div, .xenForoSkin td, .xenForoSkin iframe, .xenForoSkin span, .xenForoSkin *, .xenForoSkin .mceText {
border-radius: 4px;
}

[Tutorial] TWEAK-BABY How to make small changes - safely

If you're doing small stuff you probably have instructions from the forum here on which template to work on.
Find your template by opening your admin area (admincp) and click the Templates area.
PASTE the name of the template in the box on the top bar on that page.

In the template you can always test for where to put something by putting in

TEST TEST TEST

then see where it shows up!

Do not use punctuation like
commas , or " exclamation marks ! question marks ? hyphen - underscore _ or a dot .
These get code dangeroudly excited. If you just use letters it won't damage anything.

Basic safety rules foir tweaking (adding small bits of code).

1. Code has to be EXACT. It is cruel and stupid in its reactions if you make one dot or one bracket wrong. DO NOT RUSH.
But you rarely cause disaster of you follow these rules.

2. Do one tiny item at a time. Check the public view (frontend). Not OK?
back in the template use keyboard CTRL+Z to Undo, then try again.

3. If you can, allow 2 empty lines of space above AND below your change so it is easy to find when you return - do NOT rely on memory.

4. Never delete the code you see.
You may need it again if your change does not work. Also if you get help your helper will find it useful.
Use comment brackets instead.
Put <!-- before the part you do not want. Put --> after it.
This hides or disables whatever is in that bracet. It cannot be seen in public (frontend) and the system cannot use it.
In a css list put /* before and */ after the part you want to disable.
If you MUST delete because it is too mixed in with the code, keep a copy in a document log so as to replace it later if necessary.

4. Learn to respect <xen: if> and <div> brackets.
These are brackets that MUST match a partner. The partner will be further down.
If you put code in the wrong place so these brackets are disturbed you get strange results. If you follow the basic rules above you can fix it. But it's faster for you when you do not need to fix it.
<div xxx> matches the NEXT </div> you see.
Disturbing this marriage can make a whole page go crazy!
<xen: if xxx> matches the NEXT </xen: if> you see.
In the same family is -
<xen:else> matches <xen:else />
<xen:foreach> matches </xen:foreach>

5. Use comment code to LABEL what you do.
In 6 months you will not remember what you did. If it fights something else you add later you will not understand. Or you might want to remove this later. Or someone who comes to help or work with you will need to find it.
<!-- hides whatever you place after it until it reaches its partner bracket - but YOU can see it in the code. You CAN use punctuation inside this safe place. -->
<!-- example - MY SHOUTBOX -->
In a css list this might be /* SHOUTBOX DESIGN */

6. Keep a log - a brief diary of all changes. Then you can find it later.
I make lots of changes but I transferred them all to a new site in just over an hour because I keep a list, and use comment brackets in the templates.
Example part of my log record. I keep mine A-Z.

ARTICLES Addon installed - see waindigo in templates list
CATEGORY BARS See /* Jake Bunce*/ section in EXTRA.css
http://xenforo.com/community/threads/category-design-jake-bunce-tribute.22381/
SHOUTBOX Inserted in sidebar_online_users
Source www.MYSHOUTBOX.com
SIDEBAR Inserted in templates below:
<xen:sidebar>
<xen:include template="nodemenu" />
</xen:sidebar>
I have a list of around 12 templates here. "nodemenu" is my own template sidebar section which adds to the XF sidebar. See the link in my sig.

This forum is useful:
Styling and Customisation Questions
http://xenforo.com/community/forums/styling-and-customization-questions.47/
(also see Template Modifications for nice ideas)

Happy tweaking!

XenForo Usergroup Markup


The following enhancement will show an image beside the usergroups that you assign the markup to on the Staff who's Online listings blockRegistered Memberspage & in the Postbit.

Login into your AdminCP >> Users >> User Groups & click on the usergroup that you want to apply the new markup to.

In the Username CSS Box paste in the following code:

Code:
font-family: "Lucida Grande" ,Helvetica,Arial,sans-serif;
font-weight: bold;
color: #73427c;
background-image: url(styles/default/xenforo/smilies/admin.png);
background-repeat: no-repeat;
padding-left: 13px;


If you require for the markup to show in the Members Online Now listings you'll have to go into the the sidebar_online_users Template and make the following change. Thanks to Mental for allowing me to post the following code.

Search:
Code:
class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{$user.username}</a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>
Replace with:
Code:
class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{xen:helper richUserName, $user}</a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>

Xenforo enabling CDN for static content and javascript - DONE