Changing Quick buttons

[nobl3_6_sniper]

Hi i want to design and impliment my own Quick Buttons such as Quote, Modify, remove ect but i do not know were the code is i need to change. Ive tried searching but cannot find what i need.

Any help please.

[Hj Ahmad Rasyid Hj Ismail]

Welcome to SMF. You may want to modify these two files i.e. Display.template.php and index.css.

[nobl3_6_sniper]

ok let me look and i'll post back. thanks for the welcome. im not so new at the site. i cant remember the log i details for my old account.

[tMicky]

can someone help me with something similar.
I want to change the quick button images and also have them display after the post, not before it, like in ipb and vbulletin.
thanks

[Kindred]

you'll have to modify display.template.php (or find a theme which already does that)

[dimspace]

for moving the buttons, in display.template you are looking for something a little like this

Code Select Expand

// If this is the first post, (#0) just say when it was posted - otherwise give the reply #.


if ($message['can_approve'] || $context['can_reply'] || $message['can_modify'] || $message['can_remove'] || $context['can_split'] || $context['can_restore_msg'] || $message['can_like'] || $message['can_dislike'])
echo '
<ul class="reset smalltext quickbuttons">';







    if (class_exists('SAFacebookhooks')) {
    echo
SAFacebookhooks::facebook_showPub(
    array(
'subject' => $message['subject'],
'body' => $message['body'],
'href' => $message['href'],
'isPost' => true,
        )
);
    }
// Maybe we can approve it, maybe we should?
if ($message['can_approve'] || $message['can_unapprove'])
echo '
<li class="', $message['can_unapprove'] ? 'un' : '', 'approve_button"><a href="', $scripturl, '?action=moderate;area=postmod;sa=approve;topic=', $context['current_topic'], '.', $context['start'], ';msg=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '">', $txt[$message['can_unapprove'] ? 'unapprove' : 'approve'], '</a></li>';
if ($message['can_like'] || $message['can_dislike'])
{
if (!$message['can_dislike'])
echo '
<li class="', (empty($modSettings['likes_icons_set']) ? '' : 'custom_'), 'like_button" id="like_', $message['id'], '"><a href="', $scripturl, '?action=like;topic=', $context['current_topic'], ';msg=', $message['id'], '" '.(!empty($modSettings['likes_with_ajax']) ? ' onclick="return like(' . $message['id'] . ', ' . $message['likes'] . ');"' : '').'>', $txt['likes_like'], '</a></li>';

if (!$message['can_dislike'] && !empty($modSettings['likes_with_ajax']) && $context['browser']['is_ie'])
echo '
<script language="JavaScript" type="text/javascript">
// Rewrite the url :x so that internet explorer can not follow it
document.getElementById("like_' . $message['id'] . '").href = "#msg=' . $message['id'] . '";
</script>';

echo '
<li class="', (empty($modSettings['likes_icons_set']) ? '' : 'custom_'), 'unlike_button" id="unlike_', $message['id'], '" ', ($message['can_dislike'] ? '' : 'style="display: none;"'), '><a href="', $scripturl, '?action=like;topic=', $context['current_topic'], ';msg=', $message['id'], ';unlike">', $txt['likes_unlike'], '</a></li>';
}

      // Simple Reply Button
      if ($context['can_reply'] && !empty($options['display_quick_reply']))
      echo '
               <li class="quickreply_button"><a href="#quickreply">', $respond_button, '</a></li>';
      else
      echo '
               <li class="quickreply_button"><a href="', $scripturl . '?action=post;topic=' . $context['current_topic'] . '.' . $context['start'] . ';num_replies=' . $context['num_replies'], '">', $respond_button, '</a></li>';
               
               
// Can they reply? Have they turned on quick reply?
if ($context['can_quote'] && !empty($options['display_quick_reply']))
echo '
<li class="quote_button"><a href="', $scripturl, '?action=post;quote=', $message['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';last_msg=', $context['topic_last_message'], '" onclick="return oQuickReply.quote(', $message['id'], ');">', $txt['quote'], '</a></li>';

// So... quick reply is off, but they *can* reply?
elseif ($context['can_quote'])
echo '
<li class="quote_button"><a href="', $scripturl, '?action=post;quote=', $message['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';last_msg=', $context['topic_last_message'], '">', $txt['quote'], '</a></li>';

// Can the user modify the contents of this post?
if ($message['can_modify'])
echo '
<li class="modify_button"><a href="', $scripturl, '?action=post;msg=', $message['id'], ';topic=', $context['current_topic'], '.', $context['start'], '">', $txt['modify'], '</a></li>';

// How about... even... remove it entirely?!
if ($message['can_remove'])
echo '
<li class="remove_button"><a href="', $scripturl, '?action=deletemsg;topic=', $context['current_topic'], '.', $context['start'], ';msg=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '" onclick="return confirm(\'', $txt['remove_message'], '?\');">', $txt['remove'], '</a></li>';

// Can the user merge the double post?
if ($message['can_merge'])
echo '
<a href="', $scripturl, '?action=post2;merge=', $message['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';sesc=', $context['session_id'], '">', $merge_button, '</a>';

// What about splitting it off the rest of the topic?
if ($context['can_split'] && !empty($context['real_num_replies']))
echo '
<li class="split_button"><a href="', $scripturl, '?action=splittopics;topic=', $context['current_topic'], '.0;at=', $message['id'], '">', $txt['split'], '</a></li>';



// Can we restore topics?
if ($context['can_restore_msg'])
echo '
<li class="restore_button"><a href="', $scripturl, '?action=restoretopic;msgs=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '">', $txt['restore_message'], '</a></li>';

// Show a checkbox for quick moderation?
if (!empty($options['display_quick_mod']) && $options['display_quick_mod'] == 1 && $message['can_remove'])
echo '
<li class="inline_mod_check" style="display: none;" id="in_topic_mod_check_', $message['id'], '"></li>';







if (!empty($context['show_publish_button']) && !$context['user']['is_logged'] || !empty($context['show_publish_button']) && $context['user']['is_logged'] || $message['can_approve'] || $context['can_reply'] || $message['can_modify'] || $message['can_remove'] || $context['can_split'] || $context['can_restore_msg'])
echo '
</ul>';

it will look vaguely like that, but only very vaguely thats straight out of my display.template and have various mods installed but the key lies between the "if this is the first post" and the closing "echo ' </ul>';"

to put it at the bottom you are aiming for it to go somewhere below the attachments code which will look, again, something vaguely, like this

Code Select Expand

// Assuming there are attachments...
if (!empty($message['attachment']))
{
echo '
<div id="msg_', $message['id'], '_footer" class="attachments smalltext">
<div style="overflow: ', $context['browser']['is_firefox'] ? 'visible' : 'auto', ';">';

$last_approved_state = 1;
foreach ($message['attachment'] as $attachment)
{
// Show a special box for unapproved attachments...
if ($attachment['is_approved'] != $last_approved_state)
{
$last_approved_state = 0;
echo '
<fieldset>
<legend>', $txt['attach_awaiting_approve'];

if ($context['can_approve'])
echo '&nbsp;[<a href="', $scripturl, '?action=attachapprove;sa=all;mid=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '">', $txt['approve_all'], '</a>]';

echo '</legend>';
}

if ($attachment['is_image'])
{
if ($attachment['thumbnail']['has_thumb'] && !empty($modSettings['hs4smf_enabled']) && !empty($modSettings['hs4smf_enableonattachments']))
{
$context['hs4smf_img_count'] = (isset($context['hs4smf_img_count'])) ? $context['hs4smf_img_count'] + 1 : 1;
$slidegroup = hs4smf_get_slidegroup($message['id']);
echo '
<a href="', $attachment['href'], ';image" id="link_', $attachment['id'], '" class="highslide" onclick="return hs.expand(this, ' . $slidegroup . ')"><img src="', $attachment['thumbnail']['href'], '" alt="' , $attachment['name'] , '" id="thumb_', $attachment['id'], '" border="0" /></a><br />';
}
elseif ($attachment['thumbnail']['has_thumb'])
echo '
<a href="', $attachment['href'], ';image" id="link_', $attachment['id'], '" onclick="', $attachment['thumbnail']['javascript'], '"><img src="', $attachment['thumbnail']['href'], '" alt="" id="thumb_', $attachment['id'], '" border="0" /></a><br />';
else
echo '
<img src="' . $attachment['href'] . ';image" alt="" width="' . $attachment['width'] . '" height="' . $attachment['height'] . '" border="0" /><br />';
}

echo '
<a href="' . $attachment['href'] . '"><img src="' . $settings['images_url'] . '/icons/clip.gif" align="middle" alt="*" />&nbsp;' . $attachment['name'] . '</a> ';

if (!$attachment['is_approved'] && $context['can_approve'])
echo '
[<a href="', $scripturl, '?action=attachapprove;sa=approve;aid=', $attachment['id'], ';', $context['session_var'], '=', $context['session_id'], '">', $txt['approve'], '</a>]&nbsp;|&nbsp;[<a href="', $scripturl, '?action=attachapprove;sa=reject;aid=', $attachment['id'], ';', $context['session_var'], '=', $context['session_id'], '">', $txt['delete'], '</a>] ';
echo '
(', $attachment['size'], ($attachment['is_image'] ? ', ' . $attachment['real_width'] . 'x' . $attachment['real_height'] . ' - ' . $txt['attach_viewed'] : ' - ' . $txt['attach_downloaded']) . ' ' . $attachment['downloads'] . ' ' . $txt['attach_times'] . '.)<br />';
}


// HS4SMF decide which slidegroup the attacments belong in
if (isset($modSettings['hs4smf_enableonattachments']) && isset($modSettings['hs4smf_enabled']))
hs4smf_track_slidegroup($message['id']);

// If we had unapproved attachments clean up.
if ($last_approved_state == 0)
echo '
</fieldset>';

echo '
</div>
</div>';
}

But that is only very approximate. Depending on what mods you have installed, what changes you make your display template could vary greatly. This is only a very rough guide on the kinda area you are looking in. Before making ANY changes always backup the file involved so you can correct it if you need to (and always use something like notepad++ that supports multiple undoes).

Changing the buttons is easy, they are all in index.css

[tMicky]

for moving the buttons, in display.template you are looking for something a little like this ...
Changing the buttons is easy, they are all in index.css

Thank you so much, for the quick reply.

[Mick.]

This is going to make the bottom a bit busy with all these buttons. FYI.

[tMicky]

This is going to make the bottom a bit busy with all these buttons. FYI.

True, is there a way to just have the images and not the text?
like just have a button for quote and have it be clickable and not have the text next to it?

[dimspace]

This is going to make the bottom a bit busy with all these buttons. FYI.

yeh, dependant on the theme, it could look very higgledepiggledy..

mine looks ok, i think, but we made sure it looked right in the theme. We also really needed them at the bottom, we have some really long posts, like really really long, ive just done one with 24 images, and about 1000 words of text, so we really have better things to do than scroll up to get to the buttons.


bear in mind as well it could be a simple job, but if you have a number of modifications that add buttons it could also be a headache. Decide if you really need it, if your posts are short you possibly dont, if they are longer you might do.

But you will need some php knowledge, the code points you roughly in the right direction, but will varely hugely. (my display.template is probably a really bad example)

[dimspace]

This is going to make the bottom a bit busy with all these buttons. FYI.

True, is there a way to just have the images and not the text?
like just have a button for quote and have it be clickable and not have the text next to it?

you can, but then you get into accessibility issues and also you need people to understand what the icons mean.

[Mick.]

Yes, if you want. But users are not guessers to know what they mean

[tMicky]

Yes, if you want. But users are not guessers to know what they mean

can you please help me with how to go about changing it to images?

thanks

[Mick.]

in /Themes/default/Display.template.php

Find:

Code Select Expand

// So... quick reply is off, but they *can* reply?
elseif ($context['can_quote'])
echo '
<li class="quote_button"><a href="', $scripturl, '?action=post;quote=', $message['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';last_msg=', $context['topic_last_message'], '">', $txt['quote'], '</a></li>';

// Can the user modify the contents of this post?
if ($message['can_modify'])
echo '
<li class="modify_button"><a href="', $scripturl, '?action=post;msg=', $message['id'], ';topic=', $context['current_topic'], '.', $context['start'], '">', $txt['modify'], '</a></li>';

// How about... even... remove it entirely?!
if ($message['can_remove'])
echo '
<li class="remove_button"><a href="', $scripturl, '?action=deletemsg;topic=', $context['current_topic'], '.', $context['start'], ';msg=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '" onclick="return confirm(\'', $txt['remove_message'], '?\');">', $txt['remove'], '</a></li>';


...and remove the text strings.

Code Select Expand

', $txt['quote'], '

Code Select Expand

', $txt['modify'], '

Code Select Expand

', $txt['remove'], '

[dimspace]

BUt bear in mind you will confuse your users, and there are no tooltips on smf buttons.

And accessibilty will now be a huge issue.

[Mick.]

BUt bear in mind you will confuse your users, and there are no tooltips on smf buttons.

And accessibilty will now be a huge issue.

There's a tooltip mod in the que but it only works when title="whatever" is used. In which these quick buttons dont have but it can be added.

[tMicky]

in /Themes/default/Display.template.php

Find:
...

thank you so much 

BUt bear in mind you will confuse your users, and there are no tooltips on smf buttons.

And accessibilty will now be a huge issue.

I have left the images as is for now, till I can find a better solution. But thanks for the tip on how to move the buttons.

The problem I have is, I used larger icons (50px, 50px), this messed up the array and also cut off on the button. Is there a way to enlarge the area?

[Mick.]

Ok. Im not sure neither tested.

In the css file find:

Code Select Expand

ul.quickbuttons li a
{
padding: 0 0 0 20px;
display: block;
height: 20px;
line-height: 18px;
float: left;
}

...and play with the height and line-height.  Maybe increment by 2px or 4px.

[tMicky]

Ok. Im not sure neither tested.

In the css file find:

Code Select Expand

ul.quickbuttons li a
{
padding: 0 0 0 20px;
display: block;
height: 20px;
line-height: 18px;
float: left;
}

...and play with the height and line-height.  Maybe increment by 2px or 4px.

you guys are smf geniuses, the height worked.

thanks again Mick and dimspace 

[tMicky]

Just in case anyone else wants to do this:
my images where 40px width and 40px height.
I changed the height to 40px
Since, I left the text, I used the line-height to center the text with the image and changed the right padding, to have the text be right beside the image.

[GreenSage]

Thanks for this. Just updated my own forum with it.