News:

Join the Facebook Fan Page.

Main Menu

Images in menu buttons

Started by jamescormack, September 15, 2009, 08:49:40 PM

Previous topic - Next topic

jamescormack

Hey everyone, I just added Twitter and Facebook buttons to the menu of my site, economicate.org, by adding the following to my Subs.php file:

'Twitter' => array(
'title' => 'Twitter',
'href' => 'http://twitter.com/economicate',
'show' => true,
'sub_buttons' => array(
),
'is_last' => true,
),
'Facebook' => array(
'title' => 'Facebook',
'href' => 'http://www.facebook.com/pages/Economicate-The-Economics-Forum/125855794305',
'show' => true,
'sub_buttons' => array(
),
'is_last' => true,
),


My questions is, could I change the button titles to be images instead of text? So instead of "Twitter", somehow providing a URL to display a small twitter icon? I'm hoping this is possibly and I'm just missing knowledge of the relevant code!

EDIT: While I'm here does anyone also know how to open the links in a new window? I did look around for this but nobody seemed to know how to do this!

Thanks all
James

Kays

For an image, use the html to display an image. To open in a new window add " target="_blank


'Twitter' => array(
'title' => '<img src="path_to_image" alt="" />',
'href' => 'http://twitter.com/economicate" target="_blank',

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

jamescormack

Hey Kays that's all worked brilliantly! I've been try to do this for ages, thanks for the help.

I just have one more question on this topic now - the images aren't aligned very well on my site, being pressed up against the top of the menu bar. You can see what I mean at economicate.org .

I tried to use the standard html 'align' parameter but that didn't move the images.... What would you suggest in this case? Simply adding a blank area to the top of my images to keep them away from the top of the menu? Or is there a way of doing this with code?

Thanks again

Kays

First check it with other browsers to see if it's consistant. What I would do is to add some padding to the top of the image tag.

style="padding-top:5px;"

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

jamescormack

Excellent, thanks Kays - I've done a temporary fix and now I'm going to try out padding as you suggest.

Thanks for all the help,
James

Kays

Not a problem. Glad it worked out. :)

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

blazinchuck

i too want the facebook image/connect button in or menu...would this work for my site as well? i have 1.1.11 . also would this work with the "menu adding button" mod?i know how to add another button, but it would look just like the default button on the theme...and i would want it to look like the FB icon...thanks

http://palmettoperformancediesels.com
"I'm not as Think, as you stoned I am"

CapadY

Quote from: blazinchuck on July 20, 2010, 02:16:26 PM
i too want the facebook image/connect button in or menu...would this work for my site as well? i have 1.1.11 . also would this work with the "menu adding button" mod?i know how to add another button, but it would look just like the default button on the theme...and i would want it to look like the FB icon...thanks

http://palmettoperformancediesels.com

I think this question belongs to the SMF1.x support board :s
Please, don't PM me for support unless invited.
If you don't understand this, you will be blacklisted.

Hj Ahmad Rasyid Hj Ismail

Quote from: Kays on September 15, 2009, 10:01:04 PM
For an image, use the html to display an image. To open in a new window add " target="_blank


'Twitter' => array(
'title' => '<img src="path_to_image" alt="" />',
'href' => 'http://twitter.com/economicate" target="_blank',

Nice trick... I am actually looking for images to replace my menu too..

Kays

Something similar can be done for 1.x also. Look in index.template.php of your theme for where the buttons are setup and replace the $txt string with the <img> tag.

Since the code for the buttons does vary from theme to theme, this is just the code for the link.

Change:


<a href="', $scripturl, '?action=arcade">' , $txt['arcade'] , '</a>


to:


<a href="', $scripturl, '?action=arcade"><img src="path_to_arcade_image" alt="" /></a>

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

blazinchuck

#10
Quote from: Kays on July 21, 2010, 08:39:00 AM
Something similar can be done for 1.x also. Look in index.template.php of your theme for where the buttons are setup and replace the $txt string with the <img> tag.

Since the code for the buttons does vary from theme to theme, this is just the code for the link.

Change:


<a href="', $scripturl, '?action=arcade">' , $txt['arcade'] , '</a>


to:


<a href="', $scripturl, '?action=arcade"><img src="path_to_arcade_image" alt="" /></a>

by clicking what you listed, would it take you to that page?? or does a link have to be writing in that code?





if this was used for facebook....// the facebook Button... [facebook]
  echo '<li><a href="', $scripturl, '?action=facebook"><a href="http://www.facebook.com//"><img src="http://www.path _to_image""/></li>';



would it look something like this??
"I'm not as Think, as you stoned I am"

Kays

The <a href="', $scripturl, '?action=facebook"> is if the link is internal to your site. For Facebook, which is an exernal link, replace it with <a href="http://www.facebook.com/">. You have it twice now.

It should just be:


<a href="http://www.facebook.com//"><img src="http://www.path _to_image""/></a>


If you don't have the button created yet, Look at the code for the "Help" button. Duplicate it and make the necessary changes. This is for the Core theme. The code might be different for your theme so use this as a guide. How do you add custom tabs to the Core (default) theme menu?

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

blazinchuck

ok so i tried it and the facebook image showed up right, however...it looked like there was another button under the image....here was my code.
// the facebook Button... [facebook]
  echo '<li><a href="http://m.facebook.com/group.php?gid=111056478946616//"><img src="http://palmettoperformancediesels.com/gallery/2_21_07_10_7_27_45.png""/></li>';



here is the "help" button you mentioned for comparison...
// Show the [help] button.
    echo '<li', $current_action == 'help' ? ' id="chosen"' : '', '><a href="', $scripturl, '?action=help"><span>' , $txt[119] , '</span></a></li>';


im placing that facebook code back in, so you can see what i mean http://palmettoperformancediesels.com
"I'm not as Think, as you stoned I am"

Kays

You didn't close the <a> tag and the help text is encased in a <span>. Which might or might not have something to do with it.

Try this:

// the facebook Button... [facebook]
  echo '<li><a href="http://m.facebook.com/group.php?gid=111056478946616//"><span><img src="http://palmettoperformancediesels.com/gallery/2_21_07_10_7_27_45.png""/></span></a></li>';

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

blazinchuck

also...if im wanting the the facebook button on the far right of everything....would i place this code below the "register", "login", "log out" buttons?


// the facebook Button... [facebook]
  echo '<li><a href="http://m.facebook.com/group.php?gid=111056478946616//"><img src="http://palmettoperformancediesels.com/gallery/2_21_07_10_7_27_45.png""/></li>';

// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
   echo '<li', $current_action == 'register' ? ' id="chosen"' : '', '><a href="', $scripturl, '?action=register"><span>' , $txt[97] , '</span></a></li>';

// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
   echo '<li', $current_action == 'login' ? ' id="chosen"' : '', '><a href="', $scripturl, '?action=login"><span>' , $txt[34] , '</span></a></li>';

// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
   echo '<li', $current_action == 'logout' ? ' id="chosen"' : '', '><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '"><span>' , $txt[108] , '</span></a></li>';
[color=red]***HERE IS WHERE I THINK I SHOULD PUT IT**[/color]
   echo '
    </ul>
  </div>';
}
"I'm not as Think, as you stoned I am"

Kays

Yes, basically that's where you will need to place it.

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

blazinchuck

Quote from: Kays on July 21, 2010, 10:54:46 AM
You didn't close the <a> tag and the help text is encased in a <span>. Which might or might not have something to do with it.

Try this:

// the facebook Button... [facebook]
  echo '<li><a href="http://m.facebook.com/group.php?gid=111056478946616//"><span><img src="http://palmettoperformancediesels.com/gallery/2_21_07_10_7_27_45.png""/></span></a></li>';

ok, that looks like there is a button that the image is centered in...looks better, but hoping more for just the image is possible...i really apperciate your help on this also,thanks
"I'm not as Think, as you stoned I am"

Kays

Try removing the <span>. Or else you'll need to add it as an image link after the buttons.

find:


   echo '
    </ul>
  </div>';


and replace it with


   echo '
    </ul>';
    echo '
        <a href="http://m.facebook.com/group.php?gid=111056478946616//"><img src="http://palmettoperformancediesels.com/gallery/2_21_07_10_7_27_45.png""/></a>
  </div>';

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

blazinchuck

ok  i tried the last code...and it doesnt change anything. now it looks like something between the facebook and the login/logout button
"I'm not as Think, as you stoned I am"

Kays

The code needs to be outside the <ul> or that styling will take effect.

If you move it down as I posted. What does it do?

If at first you don't succeed, use a bigger hammer. If that fails, read the manual.
My Mods

Advertisement: