Hey everyone,
I installed the Blue Ace theme and I'm looking to get a shout box up and running. I went with this one. It's the only one that would actually work for me.
http://custom.simplemachines.org/mods/index.php?mod=585
However it appears only in the default theme. How can I convert it over? Any tutorials? I know the basics of some coding and all html. I might be able to do it.
Thanks!
Most of the mods available are designed to work with the default themes only, so you have to make the edits the mod installation does to default theme, manually to you custom themes. For this you can use the package parser that can be found on the mod download page.
Under the download link, there is "Manual Install Instructions for SMF" where you select your version of smf, and press submit. Then the parser tells you exactly the changes it makes when installing.
On that mod you should look at the edits done to
./Themes/default/index.template.php
and
./Themes/default/languages/Modifications.english.php
And make the same edit to the same files in your custom themes. If a specified file is not a part of your custom theme, you can safely ignore the edit, as it has been done to your default theme already by the mod install through package manager. :)
Quote from: LexArma on March 17, 2009, 02:35:44 PM
Most of the mods available are designed to work with the default themes only, so you have to make the edits the mod installation does to default theme, manually to you custom themes. For this you can use the package parser that can be found on the mod download page.
Under the download link, there is "Manual Install Instructions for SMF" where you select your version of smf, and press submit. Then the parser tells you exactly the changes it makes when installing.
On that mod you should look at the edits done to
./Themes/default/index.template.php
and
./Themes/default/languages/Modifications.english.php
And make the same edit to the same files in your custom themes. If a specified file is not a part of your custom theme, you can safely ignore the edit, as it has been done to your default theme already by the mod install through package manager. :)
I tried to stick it in my template and well as you can see it doesn't put it in the right place on my theme. I tried multiple other spots but I always get parse errors. Would anyone know where to place the code instead?
http://mysticalmatrix.com/forums/index.php
You'll have to login so you can use the username demo with the password demo.
You need to check the package parser for ANY files it changes inside the /themes/default folder and duplicate those changes to ALL of the same files inside the folder for your theme. Also, at the bottom the parser will report file operations where files from the install package are copied to various places. Any of those that are placed inside the /themes/default folder may have to manually be copied into the folder for your theme.
I'm certain that a shoutbox does more than one change and probably some files as well.
Quote from: Tiribulus on March 17, 2009, 10:01:57 PM
You need to check the package parser for ANY files it changes inside the /themes/default folder and duplicate those changes to ALL of the same files inside the folder for your theme. Also, at the bottom the parser will report file operations where files from the install package are copied to various places. Any of those that are placed inside the /themes/default folder may have to manually be copied into the folder for your theme.
I'm certain that a shoutbox does more than one change and probably some files as well.
The only thing I have to change in the new theme is the below. The second peace of code say it's optional. Everything else is change in the default theme. Therefore I was thinking maybe I could just move the code to another location in the index template to make it appear in a better slot.
// YSHOUT HERE - <head> code
global $boardurl,$shoutFile;
$shoutFile='home';
$scripturlparsed = parse_url($scripturl);
$scriptpath=isset($scripturlparsed['path'])?$scripturlparsed['path']:'/';
$args='';
foreach($_GET as $key => $value) // passthrough $_GET
$args.='&'.urlencode($key).'='.urlencode($value);
echo '
<script src="',$boardurl,'/yshout/js/moo.ajax.js" type="text/javascript"></script>
<script src="',$boardurl,'/yshout/settings.js" type="text/javascript"></script>
<script type="text/javascript"><!-- // --><![CDATA[
window.onload=function(){loadChat();};
var shoutFile="',$shoutFile,'";
var yshout_php="',$scriptpath,'?yshout',$args,'";
// ]]></script>
<script src="',$boardurl,'/yshout/js/yshout.js?July062008" type="text/javascript"></script>
<style type="text/css">
#yshout {
font-size: 10px;
overflow: hidden;
}
#yshout #yshout-toollinks { /* tool links (History, Commands, etc.) */
}
#yshout #shouts { /* main shouts area */
}
#yshout .shout { /* one shout */
margin: 0 0 0; /* Top Bottom Linespacing */
line-height: 1;
}
#yshout .shout-timestamp {
font-style: normal;
font-weight: normal;
}
#yshout .shout-adminlinks { /* del and ban buttons */
font-size: 6pt;
color: #141414;
}
#yshout #shout-form {
margin: 0;
padding: 0;
}
#yshout #shout-form fieldset {
border: none;
}
#yshout #forum-name {
color: #666666;
width: 70px;
margin-right: 5px;
}
#yshout #shout-text {
width: 310px;
margin-right: 5px;
}
#yshout #shout-button {
width: 55px;
}
#yshout .shout-invalid { /* invalid shout (shout textbox) */
background: #FFFDD1;
}
</style>';
// YSHOUT END - <head> code
// YSHOUT HERE - shoutbox code
global $txt,$context,$boarddir;
if(allowedTo('yshout_view'))
{
echo '<br /><b>',$txt['yshout_shoutbox'],'</b><br /><br />';
echo '<div id="yshout">';
include_once($boarddir.'/yshout/yshout.php');
echo '</div>';
}
elseif($context['user']['is_guest'])
echo $txt['yshout_no_guests'];
// YSHOUT END - shoutbox code
It looks like that's right. Make the sure the other edits actually happened, the .js file is there and especially that it's enabled int he control panel. Other than that I don't know.
Quote from: Tiribulus on March 17, 2009, 10:26:04 PM
It looks like that's right. Make the sure the other edits actually happened, the .js file is there and especially that it's enabled int he control panel. Other than that I don't know.
Everything is there and working. I set up the permissions for regular users now. So you can login to the demo account now and see the shoutbox. It works perfectly fine. You can post and everything. However login and take a look where the shout box is. It's in the top right. Is there anyway for me to move it down above the discussions?
Thanks for the help!
That's outta my league chief, sorry.
Quote from: Tiribulus on March 17, 2009, 10:55:13 PM
That's outta my league chief, sorry.
Haha no problem, but thanks for all the help.
Does anyone with coding experience have any ideas on how I can move the shout box? Thanks!
Yeah that's not hard. Where do you want the shoutbox to be? Pick a location and someone will tell you how to put it there.
ETA: You know what would be fun? Since you seem to be using the news lines above the board index you could co-opt the news fader to hold your shoutbox. This can be jazzed up by nicking a bit of code from SMF 2 and made collapsible. That way if some members don't want to scroll past the shoutbox they can get rid of it with one click.
Quote from: Antechinus on March 18, 2009, 10:34:20 AM
Yeah that's not hard. Where do you want the shoutbox to be? Pick a location and someone will tell you how to put it there.
ETA: You know what would be fun? Since you seem to be using the news lines above the board index you could co-opt the news fader to hold your shoutbox. This can be jazzed up by nicking a bit of code from SMF 2 and made collapsible. That way if some members don't want to scroll past the shoutbox they can get rid of it with one click.
Ah interesting. Not a clue how to do that though. I'm using 1.18. I was thinking it should be centered under all of the Navigation links.
When I get a bit of time I'll have a look at it. I've already done the collapsible newsfader for 1.1.8 (which, come to think of it, I should turn into a mod) and offhand I can't see why the shoutbox couldn't go in it.
Awesome :) I have some time before I launch so any time you can take a look let me know. That would be great! I appreciate the help.
Bump if you can get the shoutbox in a good spot let me know! I'd be greatful!
Ok. I'll have a look at it tonight.
Quote from: Antechinus on March 20, 2009, 05:07:12 PM
Ok. I'll have a look at it tonight.
Awesome, do you need any of my files?
Nevermind. Sorted it. Since you already have it working I figure you can do the edits just fine.
This nicks the news fader collapse code and javascript from SMF 2 RC1. I also tweaked the css for Blue Ace.
Index.template.php:
Find:
// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?fin11" />
Add after:
<script language="JavaScript" type="text/javascript" src="', $settings['theme_url'], '/newscollapse.js"></script>
Find:
// YSHOUT HERE
global $boardurl;
echo '
<script src="',$boardurl,'/yshout/js/prototype.js" type="text/javascript"></script>
<script src="',$boardurl,'/yshout/js/moo.ajax.js" type="text/javascript"></script>
<script src="',$boardurl,'/yshout/js/behaviour.js" type="text/javascript"></script>
<script src="',$boardurl,'/yshout/js/domFunction.js" type="text/javascript"></script>
<script type="text/javascript">
var myfunc = new domFunction(function()
{
loadChat();
}, { "yshout":"id"});
var board_url = "'; $boardurlparsed = parse_url($boardurl); echo (isset($boardurlparsed['path'])?$boardurlparsed['path']:""), '";
</script>
<script src="',$boardurl,'/yshout/js/yshout.js?May122008" type="text/javascript"></script>
<script type="text/javascript">var shoutFile = "home.txt";</script>
<style type="text/css">
#yshout {
font-size: 10px;
}
#yshout p {
margin: 0 0 0; /* Top Bottom Linespacing */
}
.shout-invalid {
background: #FFFDD1;
}
#yshout fieldset {
border: none;
}
#yshout em {
font-style: normal;
}
#yshout p {
line-height: 1;
margin-top: 0;
}
#yshout {
overflow: hidden;
}
#yshout .shout-timestamp {
font-weight: normal;
color: #000;
}
#yshout .adminlink {
font-size: 6pt;
color: #141414;
}
#forum-name, #shout-text, #shout-button {
font-size: 9px;
margin: 0;
padding: 0;
}
#yshout #forum-name {
color: #666666;
width: 70px;
margin-right: 5px;
}
#yshout #shout-text {
color: #000000;
width: 310px;
margin-right: 5px;
}
#yshout #shout-button {
width: 55px;
}
</style>';
// YSHOUT END
Replace with:
// YSHOUT HERE
global $boardurl;
echo '
<script src="',$boardurl,'/yshout/js/prototype.js" type="text/javascript"></script>
<script src="',$boardurl,'/yshout/js/moo.ajax.js" type="text/javascript"></script>
<script src="',$boardurl,'/yshout/js/behaviour.js" type="text/javascript"></script>
<script src="',$boardurl,'/yshout/js/domFunction.js" type="text/javascript"></script>
<script type="text/javascript">
var myfunc = new domFunction(function()
{
loadChat();
}, { "yshout":"id"});
var board_url = "'; $boardurlparsed = parse_url($boardurl); echo (isset($boardurlparsed['path'])?$boardurlparsed['path']:""), '";
</script>
<script src="',$boardurl,'/yshout/js/yshout.js?May122008" type="text/javascript"></script>
<script type="text/javascript">var shoutFile = "home.txt";</script>
<style type="text/css">
#yshout {
font-size: 10px;
width: 640px;
text-align: left;
padding-left: 70px;
padding-right: 30px;
}
#yshout p {
margin: 0 0 0; /* Top Bottom Linespacing */
}
.shout-invalid {
background: #FFFDD1;
}
#yshout fieldset {
border: none;
}
#yshout em {
font-style: normal;
}
#yshout p {
line-height: 1;
margin-top: 0;
padding-right: 50px;
color: #BFBFBF;
}
#yshout {
overflow: hidden;
}
#yshout .shout-timestamp {
font-weight: normal;
color: #7B7B7B;
}
#yshout .adminlink {
font-size: 6pt;
}
#forum-name, #shout-text, #shout-button {
font-size: 9px;
margin: 0;
padding: 0;
}
#yshout #forum-name {
color: #666666;
width: 70px;
padding-left: 6px;
margin-right: 5px;
}
#yshout #shout-text {
background: #272727;
color: #BFBFBF;
border: 1px solid #245FB8;
width: 410px;
margin-right: 5px;
}
#yshout #shout-button {
width: 55px;
}
</style>';
// YSHOUT END
Don't forget to remove your existing shoutbox code from later on in the file. You wont need that any more ;D
Anyway, BoardIndex.template.php:
Find:
// Show the news fader? (assuming there are things to show...)
if ($settings['show_newsfader'] && !empty($context['fader_news_lines']))
{
echo '
<table border="0" width="100%" class="tborder" cellspacing="' , ($context['browser']['is_ie'] || $context['browser']['is_opera6']) ? '1' : '0' , '" cellpadding="4" style="margin-bottom: 2ex;">
<tr>
<td class="catbg"> ', $txt[102], '</td>
</tr>
<tr>
<td valign="middle" align="center" height="60">';
// Prepare all the javascript settings.
echo '
<div id="smfFadeScroller" style="width: 90%; padding: 2px;"><b>', $context['news_lines'][0], '</b></div>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
// The fading delay (in ms.)
var smfFadeDelay = ', empty($settings['newsfader_time']) ? 5000 : $settings['newsfader_time'], ';
// Fade from... what text color? To which background color?
var smfFadeFrom = {"r": 0, "g": 0, "b": 0}, smfFadeTo = {"r": 255, "g": 255, "b": 255};
// Surround each item with... anything special?
var smfFadeBefore = "<b>", smfFadeAfter = "</b>";
var foreColor, backEl, backColor;
if (typeof(document.getElementById(\'smfFadeScroller\').currentStyle) != "undefined")
{
foreColor = document.getElementById(\'smfFadeScroller\').currentStyle.color.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
smfFadeFrom = {"r": parseInt(foreColor[1]), "g": parseInt(foreColor[2]), "b": parseInt(foreColor[3])};
backEl = document.getElementById(\'smfFadeScroller\');
while (backEl.currentStyle.backgroundColor == "transparent" && typeof(backEl.parentNode) != "undefined")
backEl = backEl.parentNode;
backColor = backEl.currentStyle.backgroundColor.match(/#([\da-f][\da-f])([\da-f][\da-f])([\da-f][\da-f])/);
smfFadeTo = {"r": eval("0x" + backColor[1]), "g": eval("0x" + backColor[2]), "b": eval("0x" + backColor[3])};
}
else if (typeof(window.opera) == "undefined" && typeof(document.defaultView) != "undefined")
{
foreColor = document.defaultView.getComputedStyle(document.getElementById(\'smfFadeScroller\'), null).color.match(/rgb\((\d+), (\d+), (\d+)\)/);
smfFadeFrom = {"r": parseInt(foreColor[1]), "g": parseInt(foreColor[2]), "b": parseInt(foreColor[3])};
backEl = document.getElementById(\'smfFadeScroller\');
while (document.defaultView.getComputedStyle(backEl, null).backgroundColor == "transparent" && typeof(backEl.parentNode) != "undefined" && typeof(backEl.parentNode.tagName) != "undefined")
backEl = backEl.parentNode;
backColor = document.defaultView.getComputedStyle(backEl, null).backgroundColor.match(/rgb\((\d+), (\d+), (\d+)\)/);
smfFadeTo = {"r": parseInt(backColor[1]), "g": parseInt(backColor[2]), "b": parseInt(backColor[3])};
}
// List all the lines of the news for display.
var smfFadeContent = new Array(
"', implode('",
"', $context['fader_news_lines']), '"
);
// ]]></script>
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/fader.js"></script>
</td>
</tr>
</table>';
}
Replace with:
// Show the news fader? (assuming there are things to show...)
if ($settings['show_newsfader'] && !empty($context['fader_news_lines']))
{
echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
// Create the main header object.
var smfNewsFadeToggle = new smfToggle("smfNewsFadeScroller", ', empty($options['collapse_news_fader']) ? 'false' : 'true', ');
smfNewsFadeToggle.useCookie(', $context['user']['is_guest'] ? 1 : 0, ');
smfNewsFadeToggle.setOptions("collapse_news_fader", "', $context['session_id'], '");
smfNewsFadeToggle.addToggleImage("newsupshrink", "/collapse.gif", "/expand.gif");
smfNewsFadeToggle.addTogglePanel("smfNewsFader");
// ]]></script>
<table border="0" width="100%" class="tborder" cellspacing="' , ($context['browser']['is_ie'] || $context['browser']['is_opera6']) ? '1' : '0' , '" cellpadding="4" style="margin-bottom: 1ex;">
<tr>
<td class="catbg" align="center"><a href="#" onclick="smfNewsFadeToggle.toggle(); return false;"><img id="newsupshrink" src="', $settings['images_url']. '/'. $settings['theme_main_color'], '/', empty($options['collapse_news_fader']) ? 'collapse.gif' : 'expand.gif', '" alt="*" title="', $txt['upshrink_description'], '" style="padding: 3px 2px 3px 0px;" align="right" /></a>Shoutbox!</td>
</tr>
<tr>
<td class="windowbg" align="center" height="60" id="smfNewsFader"', empty($options['collapse_news_fader']) ? '' : ' style="display: none;"', '>';
echo '
<div id="yshout">',$txt['yshout_loading'],'<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
</td>
</tr>
</table>';
}
That's all the file edits. You also have to set thing up in SMF admin.
Go to the Current Theme page and uncheck "Enable News?"
This is important. Don't try to run both at the same time. Turn this one off and leave it off.
Now make sure "Show news fader on board index" is checked. It has to be on.
Now go to the News and Newletters section of admin and put this in the news item box, then save.
<div id="yshout">',$txt['yshout_loading'],'
The last thing you need to do is load the attached javascript file into your Blue Ace folder.
You can repeat these steps for any theme you want to use this arrangement with. Enjoy.
Hey, wow awesome work. That looks like it may have taken a while. Thank you! Though I have a minor issue some reason. On my site http://www.mysticalmatrix.com/ it just says "...loading shoutbox...". Any idea what might cause this? All permissions are set. I also noticed the shrink option does work. Oh and guests can see it too. Even though permissions removed this.
Thanks again!
If the shrink option doesn't work you have either not put the javascript file in the right folder or you have missed one of the edits.
If it just says "loading shoutbox" you have probably not put the required text in the News and Newsletters section, or you have not removed the existing text for the shoutbox in index.template.php. This bit has to go:
// YSHOUT HERE
echo '
<br /><b>',$txt['yshout_shoutbox'],'</b><br /><br />
<div id="yshout">',$txt['yshout_loading'],'<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>';
// YSHOUT END
and this bit:
// YSHOUT HERE
echo '
<br /><b>',$txt['yshout_shoutbox'],'</b><br /><br />
<div id="yshout">',$txt['yshout_loading'],'<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>';
// YSHOUT END
The guests thing can be solved easily. In BoardIndex.template.php change this:
// Show the news fader? (assuming there are things to show...)
if ($settings['show_newsfader'] && !empty($context['fader_news_lines']))
to this:
// Show the news fader? (assuming there are things to show...)
if ($settings['show_newsfader'] && !empty($context['fader_news_lines']) && $context['user]['is_logged'])
Quote from: Antechinus on March 21, 2009, 04:50:27 PM
If the shrink option doesn't work you have either not put the javascript file in the right folder or you have missed one of the edits.
If it just says "loading shoutbox" you have probably not put the required text in the News and Newsletters section, or you have not removed the existing text for the shoutbox in index.template.php. This bit has to go:
// YSHOUT HERE
echo '
<br /><b>',$txt['yshout_shoutbox'],'</b><br /><br />
<div id="yshout">',$txt['yshout_loading'],'<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>';
// YSHOUT END
and this bit:
// YSHOUT HERE
echo '
<br /><b>',$txt['yshout_shoutbox'],'</b><br /><br />
<div id="yshout">',$txt['yshout_loading'],'<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>';
// YSHOUT END
The guests thing can be solved easily. In BoardIndex.template.php change this:
// Show the news fader? (assuming there are things to show...)
if ($settings['show_newsfader'] && !empty($context['fader_news_lines']))
to this:
// Show the news fader? (assuming there are things to show...)
if ($settings['show_newsfader'] && !empty($context['fader_news_lines']) && $context['user]['is_logged'])
Dang man sorry to be of trouble. I deleted the text you mentioned above earlier already. I changed the text for the guest part and go this error.
"Template Parse Error!
There was a problem loading the /Themes/BlueAcenew/BoardIndex.template.php template or language file. Please check the syntax and try again - remember, single quotes (') often have to be escaped with a slash (\). To see more specific error information from PHP, try accessing the file directly.
You may want to try to refresh this page or use the default theme. "
EDIT: As for in the newsletter section I put "<div id="yshout">',$txt['yshout_loading'],'" as you stated. However in the preview spot it says "',$txt['yshout_loading'],'" only.
Tell ya what, attach your index.template and BoardIndex.template and I'll have a look at them later today.
Did you load the javascript file as well? That's essential for the upshrink to work.
Oh yeah, which version of the shoutbox are you using? There are several and I tested with SB_117.
Quote from: Antechinus on March 21, 2009, 06:51:25 PM
Tell ya what, attach your index.template and BoardIndex.template and I'll have a look at them later today.
Did you load the javascript file as well? That's essential for the upshrink to work.
Oh yeah, which version of the shoutbox are you using? There are several and I tested with SB_117.
Oh wow now I see what you mean with the javascript file. I uploaded it and the shrink option works. I've attached the files and I believe I'm trying out 1.17. Thanks!
Just bumping this. Thanks for the help :)
Bump :|
Sorry, I've been very busy. I haven't forgotten. I'll do it as soon as I can.
Quote from: Antechinus on March 26, 2009, 02:37:12 PM
Sorry, I've been very busy. I haven't forgotten. I'll do it as soon as I can.
Hey no worries. It's up to you if you can. I'm very grateful for what you've done already. Thanks :)
Bumpers!
Bump!
Quote./Themes/default/languages/Modifications.english.php
And make the same edit to the same files in your custom themes. If a specified file is not a part of your custom theme, you can safely ignore the edit, as it has been done to your default theme already by the mod install through package manager.
Slight problem here, I'm using the Reflection theme that doesn't have this file or the languages folder that I'm trying to do a mod edit on. Do I have to carry the file over to this custom theme, or choose another theme that has it?
Bump :(
Quote from: Spiritwarrior on April 01, 2009, 09:10:18 PM
Quote./Themes/default/languages/Modifications.english.php
And make the same edit to the same files in your custom themes. If a specified file is not a part of your custom theme, you can safely ignore the edit, as it has been done to your default theme already by the mod install through package manager.
Slight problem here, I'm using the Reflection theme that doesn't have this file or the languages folder that I'm trying to do a mod edit on. Do I have to carry the file over to this custom theme, or choose another theme that has it?
No, if your theme doesn't have the file that's needed to edit, it will look for that file in the default theme :)
Ok pumpkins old son, I'm finished being evil so I'll let you off the hook now. :D
First up, my bad on the guest access code. I typed it out in a hurry and missed one apostrophe. It should be like this:
if ($settings['show_newsfader'] && !empty($context['fader_news_lines']) && $context['user']['is_logged'])
With the rest of it, your problem was that you didn't follow the instructions I gave you. You didn't replace the standard BoardIndex.template.php code with the code I gave you and you didn't add the yshout code to index.template at all. She no worky without the code bro. Gotta have the code.
These files should be ok. Try them out and see how you go.