News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Upshrink Button Relocation To Main Menu End

Started by Hj Ahmad Rasyid Hj Ismail, December 12, 2010, 04:35:23 AM

Previous topic - Next topic

Hj Ahmad Rasyid Hj Ismail

I just advised this to a member here and thought to share this to all of you. This is the tips and tricks on how to relocate the upshrink button from next to SMF Logo to the end of Main Menu / Navigation.

1. There is two css for it that you can just disable. Do not uncomment "float: right;" if you have centered your menu.
img#upshrink_ic, img#newsupshrink
{
// float: right;
// margin: 10px 5px 0 0;
}

/* the upshrink image needs some tweaking */
img#upshrink
{
// float: right;
// margin: 1em;
}


2. Then find and remove or comment out:
// the upshrink image, right-floated
echo '
<img id="upshrink" src="', $settings['images_url'], '/upshrink.png" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />';


// Define the upper_section toggle in JavaScript.
echo '
<script type="text/javascript"><!-- // --><![CDATA[
var oMainHeaderToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: ', empty($options['collapse_header']) ? 'false' : 'true', ',
aSwappableContainers: [
\'upper_section\'
],
aSwapImages: [
{
sId: \'upshrink\',
srcExpanded: smf_images_url + \'/upshrink.png\',
altExpanded: ', JavaScriptEscape($txt['upshrink_description']), ',
srcCollapsed: smf_images_url + \'/upshrink2.png\',
altCollapsed: ', JavaScriptEscape($txt['upshrink_description']), '
}
],
oThemeOptions: {
bUseThemeSettings: ', $context['user']['is_guest'] ? 'false' : 'true', ',
sOptionName: \'collapse_header\',
sSessionVar: ', JavaScriptEscape($context['session_var']), ',
sSessionId: ', JavaScriptEscape($context['session_id']), '
},
oCookieOptions: {
bUseCookie: ', $context['user']['is_guest'] ? 'true' : 'false', ',
sCookieName: \'upshrink\'
}
});
// ]]></script>';


3. Then find:
echo '
<div id="main_menu">
<ul class="dropmenu" id="menu_nav">';

Replace with:
echo '
<div id="main_menu">
<ul class="dropmenu" id="menu_nav">';

// the upshrink image, right-floated
echo '
<img id="upshrink" src="', $settings['images_url'], '/upshrink.png" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />';

// Define the upper_section toggle in JavaScript.
echo '
<script type="text/javascript"><!-- // --><![CDATA[
var oMainHeaderToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: ', empty($options['collapse_header']) ? 'false' : 'true', ',
aSwappableContainers: [
\'upper_section\'
],
aSwapImages: [
{
sId: \'upshrink\',
srcExpanded: smf_images_url + \'/upshrink.png\',
altExpanded: ', JavaScriptEscape($txt['upshrink_description']), ',
srcCollapsed: smf_images_url + \'/upshrink2.png\',
altCollapsed: ', JavaScriptEscape($txt['upshrink_description']), '
}
],
oThemeOptions: {
bUseThemeSettings: ', $context['user']['is_guest'] ? 'false' : 'true', ',
sOptionName: \'collapse_header\',
sSessionVar: ', JavaScriptEscape($context['session_var']), ',
sSessionId: ', JavaScriptEscape($context['session_id']), '
},
oCookieOptions: {
bUseCookie: ', $context['user']['is_guest'] ? 'true' : 'false', ',
sCookieName: \'upshrink\'
}
});
// ]]></script>';


Have fun and good luck!

Ashley S


Hj Ahmad Rasyid Hj Ismail

You might not want to use it with default upshrink button as it is big and ugly. Use a custom small nice button then.

Robert.


lucas-ruroken

Adk Portal 3.1 is coming....

Design your universe!

wnff_chief

Thanks very much for this!  I just have one followup question - how can I remove the space where the upshrink button was before?  Here is a before and after illustration of what I'm attempting to do:

Before:



After:


Advertisement: