How To ...

[Paul B]

How To ... - A series of tips and guides covering the basics

This is a series of tips and guides on how to do some of the most commonly requested things, such as:

• Locating a specific phrase
• Editing a phrase
• Creating a new phrase
• Determining which template to edit
• How to edit a template
• Creating a new template
• Altering the styling of a particular element
• Editing templates to apply styling

Each specific guide has been added as an update, to make it easier to refer and link to.

Click on each bullet point list item to jump directly to the relevant guide.

 

[Paul B]

Brogan updated How To ... with a new update entry:

Locating And Editing Phrases

There are several ways of searching for phrases.

The easiest method of identifying a particular phrase, is by following these steps.


Access the phrase search page by navigating to the ACP -> Appearance -> Search Phrases

View attachment 110892


Enter a snippet of the text you wish to find, like so:

View attachment 110893


That will return a list of matching phrases - the more specific you are, the fewer the matches will be. If there are no matches, be less specific:...

Read the rest of this update entry...

 

[Paul B]

Brogan updated How To ... with a new update entry:

Creating Phrases

Rather than editing an existing phrase, or inserting text directly into a template, sometimes it's better to create a new phrase.

This is especially true if the text is going to be used in multiple locations, making it quicker and easier to update and less prone to errors.


To create a new phrase, navigate to the ACP -> Appearance -> Phrases

View attachment 110906


Select the language in which you want to create the new phrase:

View attachment 110909


Click on the +...

Read the rest of this update entry...

 

[Paul B]

Brogan updated How To ... with a new update entry:

Identifying Templates

If you wish to change the position of certain elements, add something specific, or create a unique style, it may be necessary to edit the templates.

There are several ways of determining which template to edit.
In this guide we're interested in the main forum index, which is the forum_list template and in particular we want to locate the Staff Online Now block in the sidebar.


The first method involves using a browser inspection tool, so typically this requires a desktop...

Read the rest of this update entry...

 

[Amaury]

Excellent guide, @Brogan! This will certainly make it easier to style things, both on KH-Flare and with Stylish (I'm using it to style SEGA Forum a little more consistent).

So the name of the template is always after <div id="content" class=". So, for example, if I wanted to change the color of links only on the forum list, this would be correct:

#forum_list .primaryContent a { color: #FF0000; }

So not only does it make easier, it makes it easier to be more specific. I sort of already had an idea, but mostly made guesses in many of the areas I increased CSS specificity.

 

[Paul B]

If referencing a class, use a period, otherwise if referencing an id, use #.

So in your case it would be:

.forum_list .primaryContent a { color: #FF0000; }

I'll be adding lots more mini guides over time.

 

[Amaury]

I look forward to them!

 

[Paul B]

Brogan updated How To ... with a new update entry:

Editing Templates

Following on from the previous guide relating to locating a specific template, this tutorial will deal with editing a template.

Once again the examples we're going to use will involve the Staff Online Now block in the forum index sidebar.

We already know that the template we need to edit is the sidebar_online_users template so navigate to the ACP -> Appearance -> Templates and load the...

Read the rest of this update entry...

 

[Paul B]

Brogan updated How To ... with a new update entry:

Creating Templates

Adding custom content can sometimes require the use of a new template.
This can make it easier to keep track of customisations and limit the amount of code added to the default templates.

For example, to add a custom sidebar block you could add your code directly to the forum_list[/] template, as explained in the template editing guide.
However, depending on the amount of code and the nature of it, it...

Read the rest of this update entry...

 

[Amaury]

@Brogan



khflare_user_group_legend_sidebar_block

<div class="section">
    <div class="secondaryContent">
        <h3>{xen:phrase khflare_user_group_legend}</h3>
        <b><font color="#DC143C">{xen:phrase administrators}</font></b> <font color="#D2691E">{xen:phrase moderators}</font> <br> <font color="#000000">{xen:phrase registered}</font> <font color="#808080">{xen:phrase banned}</font>
    </div>
</div>

One quick question, though: How can I add a bullet point separator like the one used under Postings on profiles for finding content/threads?

 

[Paul B]

Just do this:

<b><font color="#DC143C">{xen:phrase administrators}</font></b> • <font color="#D2691E">{xen:phrase moderators}</font> • <br> <font color="#000000">{xen:phrase registered}</font> • <font color="#808080">{xen:phrase banned}</font>

 

[MasonK]

Great guides @Brogan! Being someone who barely knows anything about going beyond the basic settings of the ACP this has helped me learn a lot and take a step out of my comfort zone when being an admin.

 

[Paul B]

Brogan updated How To ... with a new update entry:

Styling

In addition to editing templates and phrases, changes can also be made to the styling and layout, utilising CSS or even editing the HTML.

Working with CSS and HTML requires some knowledge. If you're not familiar with it then one of the many tutorial sites is a good place to start, for example: W3Schools Online Web Tutorials

Once you have identified the component you wish to change, there are multiple ways of doing so, depending on the element.

Once...

Read the rest of this update entry...

 

[Martok]

Another excellent and very detailed update to this resource.

 

[Paul B]

I'm not overly happy with the wording and flow of that particular guide, but it's hard to cover the basics without going into too much detail, which could be overwhelming for the target audience.

 

[Amaury]

Do you have any examples of this, Brogan, or will it be in your next/a future guide? I often run into this myself, whether CSS or not.

It's not always obvious which CSS template you may need to edit

 

[Paul B]

It's a case of using more specificity when searching, or checking each template in turn.
In most cases it should be possible to work out which template it is from the name and the area you are working with.

 

[T Money]

When I change the phrase text, it does not indicate which style I am applying the change. Does this mean I am changing the "default" style? If so, will this complicate future XF upgrades? Because I read that I should only change sister styles.

For example, I searched the word "conversations" and changed it to "messages" as the phrase text.

 

[James]

When I change the phrase text, it does not indicate which style I am applying the change. Does this mean I am changing the "default" style? If so, will this complicate future XF upgrades? Because I read that I should only change sister styles.

For example, I searched the word "conversations" and changed it to "messages" as the phrase text.

Phrases aren't style specific. If you change a phrase you're changing it across any style that might reference it.

 

[T Money]

So does this mean changes I have applied will pose a problem on future xenforo upgrades?