Simple Machines Community Forum

Customizing SMF => SMF Coding Discussion => Topic started by: James Gryphon on December 20, 2016, 04:11:22 PM

Title: Converting Text Link to Image
Post by: James Gryphon on December 20, 2016, 04:11:22 PM
I realize that image buttons aren't in vogue these days, but for various reasons, I've turned towards using them for my take on a retro YaBB SE theme.

Things have gone surprisingly well so far, but I've run into a problem, as usual over a stupid little detail. I decided to try to convert the "Go Down"/"Go Up" links on the message index back to images. I thought I'd adapt the "New" buttons, since they're already on the same page. To make a long story short, there's always something unexpected or another every time I run it.

Here's what the segment looks like originally:
echo '
<div id="modbuttons_top" class="modbuttons clearfix margintop">
<div class="floatleft middletext">', $txt['pages'], ': ', $context['page_index'], !empty($modSettings['topbottomEnable']) ? $context['menu_separator'] . '&nbsp;&nbsp;<a href="#bot"><strong>' . $txt['go_down'] . '</strong></a>' : '', '</div>
', template_button_strip($normal_buttons, 'bottom'), '
</div>';

And revised/messed up:
echo '
<div id="modbuttons_top" class="modbuttons clearfix margintop">
<div class="floatleft middletext">', $txt['pages'], ': ', $context['page_index'], !empty($modSettings['topbottomEnable']) ? $context['menu_separator'] . '&nbsp;&nbsp;<a href="#bot"><img src="', $settings['lang_images_url'], '/go_down.gif" alt="', $txt['new'], '" /></a>' : '', '</div>
', template_button_strip($normal_buttons, 'bottom'), '
</div>';


It seems like this ought to be easy, but the punctuation soup down at  the bottom has me completely discombobulated.

If anybody has any quick ideas on how to get this working, I'd very much appreciate it.
Title: Re: Converting Text Link to Image
Post by: richardwbb on January 02, 2017, 12:29:04 PM
I can't tell you what exactly you have need for, but I recommend to open your index.template.php, and do a find for 'logo'.

example;

<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '<img src="'. $settings['images_url']. '/theme/logo.png" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />' : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" title="' . $context['forum_name'] . '" />', '</a>


And, change your template.css; find the id or class [id="modbuttons_top" class="modbuttons clearfix margintop" and put a 'display: none;' in there.

That way you can copy that piece of php code, change just an id or class to, for example; 'modbuttons_top-tst', create this one in template.css, and, remove the 'display: none;' [for the 'none' property, see; http://www.w3schools.com/css/css_display_visibility.asp] from there.

That way you will have a working code to look at, above or below the code you are modifying.