Replace blocks TPcollapse/TPexpand buttons

[whoesa]

I can't seem to figure out how to replace these buttons with custom ones.

- First i tried to add a "tinyportal" folder in the images folder of the custom theme but that didn't work. It still used the images from default theme.

- Then i tried adding this line in index.template file...:

Code Select Expand

$settings['tp_images_url'] = $settings['images_url'] . '/tinyportal';
...that seemed to work at first. But the moment you click the blocks TPcollapse/TPexpand button, it then changes to collapse/expand.gif from images folder. (Happens on this site as well.)

Not sure why it behaves like this but perhaps it's something in the script in TPBlocks.template file?

Code Select Expand

// the upshrink routine for blocks
$tid=time();
echo '</div>
<script language="Javascript" type="text/javascript"><!--
function toggle( targetId )
{
var state = 0;
var blockname = "block" + targetId;
var blockimage = "blockcollapse" + targetId;

if ( document.getElementById ) {
target = document.getElementById( blockname );
if ( target.style.display == "none" ) {
target.style.display = "";
state = 1;
}
else {
target.style.display = "none";
state = 0;
}

document.getElementById( blockimage ).src = smf_images_url + (state ? "/collapse.gif" : "/expand.gif");
var tempImage = new Image();
tempImage.src = "'.$scripturl.'?action=tpmod;upshrink=" + targetId + ";state=" + state + ";" + (new Date().getTime());

}
}
--></script>';

I tried to change a few things without success.

[Jpg]

Are you using Expand/Collapse or TPCollapse/TPExpand?

You might have to rename the gifs.

edit-
Change

Code Select Expand

document.getElementById( blockimage ).src = smf_images_url + (state ? "/collapse.gif" : "/expand.gif");

to

Code Select Expand

document.getElementById( blockimage ).src = smf_images_url + (state ? "tinyportal/TPcollapse.gif" : "tinyportal/TPexpand.gif");

It points to -> Theme/YourTheme/images/
Add a -> tinyportal/ to determine your directory.

[whoesa]

That's one of the things i tried already but didn't work.

TP 0.98 uses collapse/expand.gif for the blocks. TP 1.0 uses TPcollapse/TPexpand.gif and it shows these after i added that line in my first post. Only when you click them, they go back and use collpase/expand.gif again until you refresh the page.

Like i said, the same happens on this site. For example look at BZ14 theme and expand a block.

[Jpg]

Did you try replacing the code as I pointed above?

[whoesa]

That's one of the things i tried already but didn't work.

[Jpg]

I don't understand. You said you put-

Code Select Expand

$settings['tp_images_url'] = $settings['images_url'] . '/tinyportal';

So now all the images are pointing to-
Themes/YourTheme/images/tinyportal/

So now the image is for collapsing the block is-
Themes/YourTheme/images/tinyportal/Tpcollapse.gif

When you click it goes back to-
Themes/YourTheme/images/expand.gif and
Themes/YourTheme/images/collapse.gif

Is this all correct?

So basically you have to change the filename + directory?

Open TBlocks.Template.php
Change:

Code Select Expand

(state ? "/collapse.gif" : "/expand.gif");
to-

Code Select Expand

(state ? "tinyportal/TPcollapse.gif" : "tinyportal/TPexpand.gif");
It should point to your folder + file.

What could possibly be wrong is that you have javascript in your theme's index.template.php that could be interfering with the javascript in the TBlocks.template.php.

[whoesa]

Trust me, i don't understand as well lol. 

If i don't add that line in index.template file, it just takes the images from default theme, no matter what.

So now all the images are pointing to-
Themes/YourTheme/images/tinyportal/

So now the image is for collapsing the block is-
Themes/YourTheme/images/tinyportal/Tpcollapse.gif

When you click it goes back to-
Themes/YourTheme/images/expand.gif and
Themes/YourTheme/images/collapse.gif

Is this all correct?

Correct.

So basically you have to change the filename + directory?

That's what i thought as well but it's not working. It shows TPcollapse.gif but when clicked, all buttons disappear.

[Jpg]

Do you want me to take a look for you?
Set me up an account and I'll be glad to help you personally.

[whoesa]

All my testsites are on a local server on my pc but thanks anyway. I'll just wait till Bloc has the time to check and answer this.

[Jpg]

LOL MY BAD I forgot the slash["/"] Ahahahaha!


Try this php in my attachment[I tested it and it works]-

[whoesa]

Omg how could i miss that one.    Is it possible to be drunk without drinking alcohol?

Anyway, thx for pointing it out.

[Jpg]

Lol, I don't think you can...hahaha...
And No problem Bikken. I'm here to help.

[Gidget]

Many thanks Bikken and Jpg for raising, and solving, the same problem that I had 

Gidget

[Jpg]

Your welcome Gidget.

Bloc is going to have to fix that error in the future.

[bloc]

Yes, I do lol. So..after a quick read, what was the error actually? a typo?

[whoesa]

Well, to make them work properly in custom themes, it was needed to add this line in index.template file:

Code Select Expand

$settings['tp_images_url'] = $settings['images_url'] . '/tinyportal';

and change the image url in the script in TPBlocks.template file from:

Code Select Expand

document.getElementById( blockimage ).src = smf_images_url + (state ? "/collapse.gif" : "/expand.gif");

to:

Code Select Expand

document.getElementById( blockimage ).src = smf_images_url + (state ? "/tinyportal/TPcollapse.gif" : "/tinyportal/TPexpand.gif");

After these changes, everything works fine.   

[Jpg]

That would point to your theme directory Bikken not the default theme directory.
I'll look into this for a fix.

[whoesa]

Yea and that was the whole point of me starting this topic. I tried to find out how i could point a custom theme to it's own "tinyportal" folder and TPcollapse/TPexpand button instead of defaults one.

I did this fix in 4 custom themes and all are working error less. 

[Jpg]

Okay I decided to take 5 minutes to fix this.

Here's the code needed to fix the bug forever-

In TPblocks.template.php:

Find-

Code Select Expand

document.getElementById( blockimage ).src = smf_images_url + (state ? "/collapse.gif" : "/expand.gif");

Replace with-

Code Select Expand


                  document.getElementById( blockimage ).src = "' .$settings['tp_images_url']. '" + (state ? "/TPcollapse.gif" : "/TPexpand.gif");

----

I guess all you have to do is add this code to your themes now Bikken for customization-

Code Select Expand

$settings['tp_images_url'] = $settings['images_url'] . '/tinyportal';

[rand12om]

Where exactly should I put the $settings['tp_images_url'] = $settings['images_url'] . '/tinyportal'; ?

Placing it in the index.template does fix the collapse button problem, but completely messes up the buttons in Articles adminpage and same for blocks. I mean, it displays text instead of buttons. What am I doing wrong?

[IchBin]

If you place that code in your index.template.php file, then you also need to copy ALL of the tinyportal images from the default theme to your theme. You're probably missing the images, which is why its displaying the text instead.

[rand12om]

Yes, thats it. Thanks

[confuzed]

Okay I decided to take 5 minutes to fix this.

Here's the code needed to fix the bug forever-

In TPblocks.template.php:

Find-

Code Select Expand

document.getElementById( blockimage ).src = smf_images_url + (state ? "/collapse.gif" : "/expand.gif");

Replace with-

Code Select Expand


                  document.getElementById( blockimage ).src = "' .$settings['tp_images_url']. '" + (state ? "/TPcollapse.gif" : "/TPexpand.gif");

----

I guess all you have to do is add this code to your themes now Bikken for customization-

Code Select Expand

$settings['tp_images_url'] = $settings['images_url'] . '/tinyportal';

ah I just found this solution

does it matter whereabouts in the index.template file you add the code above?

[IchBin]

template_init() is where you can do it.

[confuzed]

Code Select Expand

// Initialize the template... mainly little settings.
function template_init()
{
global $context, $settings, $options, $txt;

/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';

/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';

/* The version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '1.1';

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = true;

/* Use plain buttons - as oppossed to text buttons? */
$settings['use_buttons'] = true;

/* Show sticky and lock status seperate from topic icons? */
$settings['seperate_sticky_lock'] = true;
}

here is my template_init() function, where specifically should it go?

Thanks

[IchBin]

Anywhere in there. Don't be afraid to try things or you'll never learn mate.

[Riryoku]

Oh! Thx.
That's cool.