Customizing SMF > Tips and Tricks

Forum Tips and Tricks Fader

(1/1)

GL700Wing:
With the forums I manage I create 'Tips and Tricks' topics to help members learn how to use forum features - some of which have been added by mods - they may not have encountered on other forums (eg, mentions, inline attachments, event registration system, etc).

I've found this is particularly important/valuable when a new SMF forum community is created by migrating the users and content from another forum platform - change is not always welcomed and for some users it can be quite challenging to have to learn how to do things all over again ...

In the past I've used the 'News' feature to create a fader with links to the 'Tips and Tricks' topics but with a new forum I'm in the process of creating for the customers of a business there is a need for the business be able to use the 'News' feature for - well - news!!  Who would have thought??

With a little bit of clever coding I've been able to create a 'Tips and Tricks' fader that uses 'News' items but which displays 'News' and 'Tips and Tricks' items separately ('News' items are displayed below 'Tips and Tricks').  Also, the 'Tips and Tricks' fader can be enabled/disabled and also has its own fade delay timer.

The way this works is that you configure a 'Tips and Tricks' prefix via the current theme settings and then create one or more 'News' items for the 'Tips and Tricks' containing the prefix.
(Important Note: The prefix is case-sensitive).

Note: I've used the word prefix but it can actually be any character string you want to use (eg, HowTo:, New Feature Added -, etc) and it can occur anywhere in the text of the 'News' item (this allows you to also use BBCodes for formatting including hyperlinks).
Example:
[color=blue][url=https://my-website.info/forum/index.php?topic=137.0]HowTo: Insert image attachments into the body of messages[/url][/color]


1.  Create a javascript fader for the 'Tips and Tricks' items.

Copy ./Themes/default/scripts/fader.js ./Themes/default/scripts/fader_tips.js

Edit ./Themes/default/scripts/fader_tips.js and change all occurrences of the word News with the word Tips

Or copy the attached fader_tips.js file to ./Themes/default/scripts/ ...


2.  Edit ./Sources/Subs.php

Find:

--- Code: --- // Get some news...
$context['news_lines'] = explode("\n", str_replace("\r", '', trim(addslashes($modSettings['news']))));
$context['fader_news_lines'] = array();
for ($i = 0, $n = count($context['news_lines']); $i < $n; $i++)
{
if (trim($context['news_lines'][$i]) == '')
continue;

// Clean it up for presentation ;).
$context['news_lines'][$i] = parse_bbc(stripslashes(trim($context['news_lines'][$i])), true, 'news' . $i);

// Gotta be special for the javascript.
$context['fader_news_lines'][$i] = strtr(addslashes($context['news_lines'][$i]), array('/' => '\/', '<a href=' => '<a hre" + "f='));
}
$context['random_news_line'] = $context['news_lines'][mt_rand(0, count($context['news_lines']) - 1)];

--- End code ---

Replace With:

--- Code: --- // Get some news (and maybe also some forum tips and tricks) ...
$context['all_news_lines'] = explode("\n", str_replace("\r", '', trim(addslashes($modSettings['news']))));
$context['news_lines'] = array();
$context['fader_news_lines'] = array();
$context['tips_lines'] = array();
$context['fader_tips_lines'] = array();

for ($i = 0, $n = count($context['all_news_lines']); $i < $n; $i++)
{
if (trim($context['all_news_lines'][$i]) == '')
continue;

// These are tips ...
if (!empty($settings['tips_prefix']) && strpos($context['all_news_lines'][$i], $settings['tips_prefix']) != '')
{
// Clean it up for presentation ;).
$context['tips_lines'][] = parse_bbc(stripslashes(trim($context['all_news_lines'][$i])), true, 'tips' . $i);

// Gotta be special for the javascript.
$context['fader_tips_lines'][] = strtr(addslashes($context['all_news_lines'][$i]), array('/' => '\/', '<a href=' => '<a hre" + "f='));
}
// These are news items ...
else
{
// Clean it up for presentation ;).
$context['news_lines'][] = parse_bbc(stripslashes(trim($context['all_news_lines'][$i])), true, 'news' . $i);

// Gotta be special for the javascript.
$context['fader_news_lines'][] = strtr(addslashes($context['all_news_lines'][$i]), array('/' => '\/', '<a href=' => '<a hre" + "f='));
}
}
if (count($context['news_lines']) > 0)
$context['random_news_line'] = $context['news_lines'][mt_rand(0, count($context['news_lines']) - 1)];

--- End code ---


3.  Edit ./Themes/default/BoardIndex.template.php

Find:

--- Code: --- // Show the news fader?  (assuming there are things to show...)
--- End code ---

Add Before:

--- Code: --- // Show the tips fader?  (assuming there are things to show...)
if ($context['user']['is_logged'] && $settings['tips_show'] && !empty($context['fader_tips_lines']))
{
echo '
<div id="tipsfader" style="padding: 0 0 1em 1em;">
<ul class="reset" id="smfTipsFadeScroller">';

foreach ($context['tips_lines'] as $tips)
echo '
<li>', $txt['forum_tips'], $tips, '</li>';

echo '
</ul>
</div>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/fader_tips.js"></script>
<script type="text/javascript"><!-- // --><![CDATA[

// Create a tips fader object.
var oTipsFader = new smf_TipsFader({
sSelf: \'oTipsFader\',
sFaderControlId: \'smfTipsFadeScroller\',
sItemTemplate: ', JavaScriptEscape('<strong>%1$s</strong>'), ',
iFadeDelay: ', empty($settings['tips_delay']) ? 5000 : $settings['tips_delay'], '
});
// ]]></script>';
}

--- End code ---


4.  Edit ./Themes/default/Settings.template.php

Find:

--- Code: --- '',
array(
'id' => 'show_newsfader',
'label' => $txt['news_fader'],
),

--- End code ---

Add Before:

--- Code: --- '',
array(
'id' => 'tips_show',
'label' => $txt['tips_show'],
),
array(
'id' => 'tips_delay',
'label' => $txt['tips_delay'],
'type' => 'number',
),
array(
'id' => 'tips_prefix',
'label' => $txt['tips_prefix'],
'description' => $txt['tips_prefix_desc'],
'type' => 'text',
),

--- End code ---


5.  Edit ./Themes/default/languages/Themes.english.php

Add the following lines to the file:

--- Code: ---global $scripturl;
$txt['tips_show'] = 'Show <em>\'Forum Tips and Tricks\'</em> fader on board index for members';
$txt['tips_delay'] = 'Fade delay for <em>\'Forum Tips and Tricks\'</em> items';
$txt['tips_prefix'] = 'Prefix for identifying tips (eg, <em>HowTo:</em>, etc)';
$txt['tips_prefix_desc'] = 'The prefix is case sensitive and MUST match text in the <a href="' . $scripturl . '?action=admin;area=news;sa=editnews" target="_blank" class="new_win">News</a> item EXACTLY in order to be shown';

--- End code ---


6.  Edit ./Themes/default/languages/Modifications.english.php

Add the following line to the file:

--- Code: ---$txt['forum_tips'] = 'Forum Tips and Tricks : ';

--- End code ---


Important Note:  For custom themes the equivalent template and language files will also need to be updated.

Navigation

[0] Message Index

Go to full version