SimplePortal

Customization => Blocks and Modifications => Topic started by: Chen Zhen on May 07, 2012, 08:22:59 PM

Title: [Block] Horizontal/Vertical Buttons for displaying SP pages
Post by: Chen Zhen on May 07, 2012, 08:22:59 PM
These are block codes for displaying buttons/links to access any of your Simple Portal pages.

PHP Block codes:

Adjust the spacing, image dimensions & 2 arrays containing the images + pages.



Horizontal Buttons
Code: [Select]
global $boardurl, $scripturl, $settings;

/* Set space between buttons */
$spacing = '5px';

/* Images height & width */
$width = '50px';
$height = '50px';

/* Home button: image1, image2 */
$home = array('my_home_button1.png', 'my_home_button2.png');

/* All other buttons: image1, image2, page link */
$buttons = array('Page1' => array('Page1_image1.png', 'Page1_image2.png', 'page=myPage1'), 'Page2' => array('Page2_image1.png', 'Page2_image2.png', 'page=myPage2'));

/* Display the buttons/links */
echo '
<div style="overflow:hidden">
<span>
<a href="'.$boardurl.'" onMouseover="document.changeMyHome.src = \''.$settings['default_theme_url'].'/images/'.$home[1].'\';" onMouseout="document.changeMyHome.src = \''.$settings['default_theme_url'].'/images/'.$home[0].'\';" style="text-decoration: none;">
<img id="changeMyHome" src="'.$settings['default_theme_url'].'/images/'.$home[0].'" style="height:'.$height.';width:'.$width.';" alt="Home" />
</a>
</span>';

foreach ($buttons as $button => $image)
{
echo '
<span style="padding-left:'.$spacing.';">
<a href="'.$scripturl.'?'.$image[2].'" onMouseover="document.changeMy'.$button.'.src = \''.$settings['default_theme_url'].'/images/'.$image[1].'\';" onMouseout="document.changeMy'.$button.'.src = \''.$settings['default_theme_url'].'/images/'.$image[0].'\';" style="text-decoration: none;">
<img id="changeMy'.$button.'" src="'.$settings['default_theme_url'].'/images/'.$image[0].'" style="height:'.$height.';width:'.$width.';" alt="'.$button.'" />
</a>
</span>';
}

echo '
</div>';



Vertical Buttons:
Code: [Select]
global $boardurl, $scripturl, $settings;

/* Set space between buttons */
$style = 'padding-left:0px;';

/* Images height & width */
$width = '50px';
$height = '50px';

/* Home button: image1, image2 */
$home = array('my_home_button1.png', 'my_home_button2.png');

/* All other buttons: image1, image2, page link */
$buttons = array('Page1' => array('Page1_image1.png', 'Page1_image2.png', 'page=myPage1'), 'Page2' => array('Page2_image1.png', 'Page2_image2.png', 'page=myPage2'));

/* Display the buttons/links */
echo '
<div style="overflow:hidden">
<div style="'.$style.'">
<a href="'.$boardurl.'" onMouseover="document.changeMyHome.src = \''.$settings['default_theme_url'].'/images/'.$home[1].'\';" onMouseout="document.changeMyHome.src = \''.$settings['default_theme_url'].'/images/'.$home[0].'\';" style="text-decoration: none;">
<img id="changeMyHome" src="'.$settings['default_theme_url'].'/images/'.$home[0].'" style="height:'.$height.';width:'.$width.';" alt="Home" />
</a>
</div>';

foreach ($buttons as $button => $image)
{
echo '
<div style="'.$style.'">
<a href="'.$scripturl.'?'.$image[2].'" onMouseover="document.changeMy'.$button.'.src = \''.$settings['default_theme_url'].'/images/'.$image[1].'\';" onMouseout="document.changeMy'.$button.'.src = \''.$settings['default_theme_url'].'/images/'.$image[0].'\';" style="text-decoration: none;">
<img id="changeMy'.$button.'" src="'.$settings['default_theme_url'].'/images/'.$image[0].'" style="height:'.$height.';width:'.$width.';" alt="'.$button.'" />
</a>
</div>';
}

echo '
</div>';

Imo opt no body for your block.
You can change/add to the style variable for ie. positioning.
Code: [Select]
$style = 'text-align:center;';



ref. thread: Click Here (http://simpleportal.net/index.php?topic=10866.msg55957#msg55957)
SimplePortal 2.3.8 © 2008-2024, SimplePortal