[Article] XenForo Style System (Phrasing)

Status
Not open for further replies.

Floris

I'm just me :) Hi.
Staff member
Joined
Jan 1, 2001
Messages
60,101
XenFans.com Article: XenForo Style System (part 3)
Copyright (c) 2010-2011 http://xenfans.com, author: Steven Moore @ Mythotical's Blog

In this bonus article we will be diving into the features of the modern forum product XenForo that allows you to customize your community to your liking, explaining that besides templates and properties, there are phrases too.

You can find part 1 & 2 here: http://xenfans.com/forums/learn/


We recently took a look at the XenForo style system which involved 4 of the 6 options to edit a style. In this article we will look at the last 2 options that add the full functionality to the style system and a XenForo ran site.

This article includes screenshots, and helpful tips/hints to guide those new to XenForo in shaping their site to reflect what they want. The end result will be very appeasing and great looking.

As explained in XenForo: Style System Part 1, when viewing the admin area, you have links in left side navigation as well as header navigation. To access to the style system you will see Appearance in the header the styling of XenForo is unique in its own way.

The style system is quite different than that of other forum software but has some similarities. The displaying of the style is the same, through this system the admin controls how their XenForo looks, feels, and reacts. Each style can be custom made to reflect how the owner wants their site to appear to users. The left navigation is similar to the more appeasing image buttons but not as fancy.

Appearance.png


Let’s get started, click on the Languages button located in the center of the Appearance page. This system is very user friendly and controls what words appear in exchange for a phrase used throughout many templates. When the page loads you will see a list of all installed languages.

Click on your language; take a look at the options on the new page that loaded. You can change the title, whether the language has a parent language pack or not, locale means your local language, date format, time format, and separator characters for time and date. You can use the other box to place your own format, I only suggest those familiar with the system to add their own format.

phrase.png


Click your back button, look to the right of your language; you will see Phrases, Export, and a red 'X'.
- Export allows you to export the language pack before editing or after editing. I suggest using the export feature before any changes are made just in case.
- The red 'X' image is used to delete that language pack, don't attempt to delete your main language pack unless you have another language pack as backup installed.

Click on Phrases, this page loads up a list of phrases used throughout the templates so instead of editing multiple templates to change one word, you can just edit a phrase to change all those words at one time.

about_you.png

:)
edit_phrase.png


Click on the phrase title 'about_you.' This page displays the language pack it belongs to, the title, master value, and phrase text. Language and Master Value are unchangeable, these options stay. Master Value is just a reminder of what the default value is. Editing the Phrase Text box will edit every place 'About You' is located. Go ahead and enter any text and click Save and Reload. Go to your member settings for your own profile on the front end of the XenForo site. You will see 'About You' has been changed to reflect the new text. Go back to the edit phrase page; change the phrase text back to the default value by clicking Revert Phrase button. This will revert the phrase back to an unaltered state allowing for editing again.

create_new_phrase.png

new_phrase.png


Once the page reloads back to the phrase list, in the upper right hand corner is a button says '+Create New Phrase'. On the new page enter a title for your phrase; let us do 'phrase_test' as an example. In the text add 'Phrase Test' then click Save and Reload. The phrase has been added to the database allowing you to use that phrase anywhere in your templates which will be covered in part 2 of this guide.
Now clicking on 'Revert Phrase' will delete the phrase altogether so don't click this unless you know for certain your added phrase is not being used in any template.

search_phrase.png


Look to the left of the page you're on, click on Search Phrases. On this page, enter the text 'About You' in the Text Contains box. Then click Search Phrases, this will search for any phrase that contains that text. You can use Title Contains box to only search titles but I find Text Contains for a text search easier and much more efficient. Once the new page loads it will show only one search result which is the 'about_you' phrase. Clicking the phrase title has the same effect of opening a new window allowing for editing of the phrase.

outdated.png

import_language.png


Look to the left navigation again, find 'Outdated Phrases' and click it. This will load a new page that shows a list of phrases that are outdated and needs to be updated to reflect the new XenForo version use. Usually this will display no outdated phrases.

Find 'Import a Language' and click on that. The new page shows various options, the first is 'Import from Uploaded file' which means you can select a file from your computer to upload and import. 'Import as' allows the selection of either 'Child of language' or 'Overwrite language'. Child of language refers to selecting a language that this pack will display under and share phrases. Overwrite language allows you to overwrite a current language pack but I suggest only doing this if you know what you’re doing or updating a language pack.

Phrase Usage
As we have created a new phrase it is now time to put that new phrase to use in a template.

search.png


Return to the Appearance page and click on "Templates", once the page loads, in the upper right box search for 'message_user_info' then click on the template that is displayed.

In the template find:
HTML:
<xen:if is="@messageShowGender AND {$user.gender}">
                    <dl class="pairsInline">
                        <dt>{xen:phrase gender}:</dt>
                        <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
                    </dl>
                </xen:if>

After add:
HTML:
                <dl class="pairsInline">
                    <dt>{xen:phrase phrase_test}:</dt>
                    <dd>{xen:phrase phrase_test}</dd>
                </dl>

Save all changes then open a thread and view the user info on the left of a post, you should now see the new phrase you added as 'Phrase Test: Phrase Test'.

Benefit of Phrases:
The benefit of using phrases allows a person to reuse phrases without having to retype the same thing over and over again. Such as the title of the page which has the same title across multiple pages.

That now concludes XenForo Style System bonus part, I hope you have enjoyed the XenForo styling article series and hope you will read other articles related to doing specific tasks within XenForo.
 

Brian Roberts

OMG Member
Joined
Jul 17, 2011
Messages
3
nice work as always floris think you can do 1 on a bigger avatar size in postbit and such?
 

Brian Roberts

OMG Member
Joined
Jul 17, 2011
Messages
3
yeah gunna mess with that this weekend and try and figure it out.
Ashley was able to give me important parts of the deleted thread.

Code:
If you open this php file: yourinstalldirectory/library/XenForo/Model/Avatar.php you will find this located near the top:
 
PHP:
 
protected static $_sizes = array(
'l' => 192,
'm' => 96,
's' => 48
);
the "l" contains the value for the large avatar, "m" for the medium (used in the poster block), and "s" for small avatars. Change the 96 to 124, and save.
 
Template edits: AdminCP -> Appearance -> Templates. Select your style you want to apply the changes to.
 
Open xenforo.css, find:
 
Code:
.avatar .img.m { width: 96px; height: 96px; }
Change both 96px's to 124px
 
Save, and then open navigation.css:
 
Code:
#AccountMenu .menuHeader .links .fl
{
position: absolute;
bottom: 10px;
left: {xen:calc '10 + 10 + 96'}px;
}
change the 96 to 124, and select save.
 
You will need to fine tune paddings for the poster information block. You will need to re-upload your avatar so the new "m" size can be saved. Also, the three default avatars should have their medium size changed to 124px too."
 
Status
Not open for further replies.
Top