News:

Wondering if this will always be free?  See why free is better.

Main Menu

Mods that don't work on a Theme?

Started by smashedpumpkins, March 17, 2009, 02:29:44 PM

Previous topic - Next topic
Print
Go Down Pages1 2 All
User actions

smashedpumpkins

March 17, 2009, 02:29:44 PM
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!

Aleksi "Lex" Kilpinen

#1
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. :)
Slava
Ukraini!
"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

How you can help SMF

smashedpumpkins

#2
March 17, 2009, 09:42:44 PM Last Edit: March 17, 2009, 09:48:56 PM by smashedpumpkins
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.

Tiribulus

#3
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.

smashedpumpkins

#4
March 17, 2009, 10:05:01 PM
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.

Code Select

// 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

Code Select

// 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

Tiribulus

#5
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.

smashedpumpkins

#6
March 17, 2009, 10:36:30 PM
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!

Tiribulus

#7
March 17, 2009, 10:55:13 PM
That's outta my league chief, sorry.

smashedpumpkins

#8
March 17, 2009, 11:04:07 PM
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!

Antechinus

#9
March 18, 2009, 10:34:20 AM Last Edit: March 18, 2009, 10:37:32 AM by Antechinus
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.

smashedpumpkins

#10
March 18, 2009, 11:19:20 AM
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.

Antechinus

#11
March 18, 2009, 05:10:49 PM
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.

smashedpumpkins

#12
March 18, 2009, 09:08:59 PM
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.

smashedpumpkins

#13
March 20, 2009, 04:20:31 PM
Bump if you can get the shoutbox in a good spot let me know! I'd be greatful!

Antechinus

#14
March 20, 2009, 05:07:12 PM
Ok. I'll have a look at it tonight.

smashedpumpkins

#15
March 20, 2009, 05:14:59 PM
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?

Antechinus

#16
March 21, 2009, 01:16:09 AM Last Edit: March 21, 2009, 01:34:52 AM by Antechinus
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:

Code Select
// 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:

Code Select
<script language="JavaScript" type="text/javascript" src="', $settings['theme_url'], '/newscollapse.js"></script>

Find:

Code Select
// 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:

Code Select
// 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:

Code Select
// 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"> &nbsp;', $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:

Code Select
// 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.

Code Select
<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.


smashedpumpkins

#17
March 21, 2009, 04:16:20 PM
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!

Antechinus

#18
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:

Code Select
// 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:

Code Select
// 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:

Code Select
// Show the news fader?  (assuming there are things to show...)
   if ($settings['show_newsfader'] && !empty($context['fader_news_lines']))

to this:

Code Select
// Show the news fader?  (assuming there are things to show...)
   if ($settings['show_newsfader'] && !empty($context['fader_news_lines']) && $context['user]['is_logged'])

smashedpumpkins

#19
March 21, 2009, 06:34:12 PM
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:

Code Select
// 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:

Code Select
// 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:

Code Select
// Show the news fader?  (assuming there are things to show...)
   if ($settings['show_newsfader'] && !empty($context['fader_news_lines']))

to this:

Code Select
// 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.
Print
Go Up Pages1 2 All
User actions
Advertisement: