3
(HBV)Collapsible elements and (optional) remember user prefs!
This will teach you how to create, or modify elements of your board so they can expand or collapse, and if you like, remember your user's preferences.
For an example: Each category on the index page can be collapsed or expanded by pressing the [-] or [+] button on the right of its header. Or just look at the menu on the left of this!
First, find out where you want to add/edit the code. For this, go to ACP->Look & Feel->Click
next to the skin you want to edit->Edit Template HTML->Select the appropriate template bit.
(Backup what you change just in case!)
Now add the code below. You must replace the following bits of code with your own:
<!-- INSERT CONTENT HERE -->: This is what you want to collapse.
NAME: A unique identifier for the element you are creating/modifying. Note, there are two instances of this.
TITLE: This is the title of the element. E.g. Menu, as it appears in the picture above.
(Note: You must replace java script with javascript. The space is automatically added here, but should not be there)
Now add directly ABOVE it, the following code.
Remember to replace the two instances of NAME (and probably TITLE) with the same words you used above! And of course, replace java script with javascipt.
Then save your template bit and you're done!
Optional: Now to remember your user's peferences!
Assuming this is for a component...
Open mod.php (where mod is the name of your mod) found in sources/components_public/
Now, find/add function run_component() { in the component_public class:
After that, you will need to add/modify this line, if your template is, for example, is in skin group "skin_mod" and template bit "main":
Now open the template bit in your ACP:
ACP->Look & Feel->Click next to the skin you want to edit->Edit Template HTML->Select the appropriate template bit, in this case skin_mod->main
Now click on the top right and click "Edit Data variables". Now add the following:
Save the template bit. Now in the same bit, where your collapsible element is...
In the collapsed div code, find this (of course, NAME will be different for you):
Replace with this (use the NAME you chose):
Then in the open div, find this (again, NAME will be different):
And replace with this, again, changing NAME to what you chose:
Then save your template bit and you're done!
This will teach you how to create, or modify elements of your board so they can expand or collapse, and if you like, remember your user's preferences.
For an example: Each category on the index page can be collapsed or expanded by pressing the [-] or [+] button on the right of its header. Or just look at the menu on the left of this!
First, find out where you want to add/edit the code. For this, go to ACP->Look & Feel->Click
next to the skin you want to edit->Edit Template HTML->Select the appropriate template bit.(Backup what you change just in case!)
Now add the code below. You must replace the following bits of code with your own:
<!-- INSERT CONTENT HERE -->: This is what you want to collapse.
NAME: A unique identifier for the element you are creating/modifying. Note, there are two instances of this.
TITLE: This is the title of the element. E.g. Menu, as it appears in the picture above.
(Note: You must replace java script with javascript. The space is automatically added here, but should not be there)
<div class="borderwrap" id="fo_NAME" style="">
<div style="text-align:left" class="maintitle">
<p class="expand"><a href="java script:togglecategory('NAME', 1);"><img border="0" alt="Collapse" src="style_images/<#IMG_DIR#>/exp_minus.gif"/></a></p>
<p><{CAT_IMG}>TITLE</div></p>
</div>
<div>
<p>
<!-- INSERT CONTENT HERE -->
</p>
</div>
</div>
Now add directly ABOVE it, the following code.
Remember to replace the two instances of NAME (and probably TITLE) with the same words you used above! And of course, replace java script with javascipt.
<div id="fc_NAME" style="display:none;" class="borderwrap">
<div class="maintitlecollapse">
<p class="expand"><a href="java script:togglecategory('NAME', 0);"><img border="0" alt="Expand" src="style_images/<#IMG_DIR#>/exp_plus.gif"/></a></p>
<p><{CAT_IMG}>TITLE</p>
</div>
</div>
Then save your template bit and you're done!
Optional: Now to remember your user's peferences!
Assuming this is for a component...
Open mod.php (where mod is the name of your mod) found in sources/components_public/
Now, find/add function run_component() { in the component_public class:
$collapsed_ids = ','.$this->ipsclass->my_getcookie('collapseprefs').',';
$i_show['fo'] = 'show';
$i_show['fc'] = 'none';
if ( strstr( $collapsed_ids, ',shout,' ) )
{
$i_show['fo'] = 'none';
$i_show['fc'] = 'show';
}
After that, you will need to add/modify this line, if your template is, for example, is in skin group "skin_mod" and template bit "main":
$this->output .= $this->ipsclass->compiled_templates['skin_mod']->main($i_show);
Now open the template bit in your ACP:
ACP->Look & Feel->Click
next to the skin you want to edit->Edit Template HTML->Select the appropriate template bit, in this case skin_mod->mainNow click
on the top right and click "Edit Data variables". Now add the following:$i_show=array()
Save the template bit. Now in the same bit, where your collapsible element is...
In the collapsed div code, find this (of course, NAME will be different for you):
<div id="fc_NAME" style="display:none;" class="borderwrap">
Replace with this (use the NAME you chose):
<div id="fc_NAME" style="display:{$i_show['fc']};" class="borderwrap">
Then in the open div, find this (again, NAME will be different):
<div class="borderwrap" id="fo_NAME" style="">
And replace with this, again, changing NAME to what you chose:
<div class="borderwrap" id="fo_NAME" style="display:{$i_show['fo']};">
Then save your template bit and you're done!
