MyBB Community Forums

Full Version: How to add a CSS button?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
I am trying to add a CSS button that is not part of the normal buttons. It is a like/unlike button for a plugin. Is this done through templates?
Both CSS and template. Decide what your styling will be. Apply it to the global or whatever CSS theme file (it's in theme not template). Then find the html element in your templates and apply the class or id to it.. provided there are not formating/styling conflicts.. your CSS button will be rendered.

Do you need a more practical example?
Try CSS by Zurb:
http://foundation.zurb.com/docs/components/buttons.html

If this was helpful please rep Smile
Well my board uses CSS button already. SO it is established in the global.css. However I added a Like plugin and would like for it to be a CSS button also.
Can you show me a pic or describe what the button currently is?
More than likely it's an image defined in the plugins template file (if the developer output to template) which you can change to a href and just add the button class to it. If there's not template... open the plugin and edit the code which calls for the image, change to ahref with the class you want.. de-activate / re-activate and you got it... I've done this to a few plugins before... editing the template Arrays doesn't hurt anything.
http://i.imgur.com/Pv9aHd9.png

That is what it looks like. I didn't know if this was a template/hard coded into the plugin.

This is the plugin http://mods.mybb.com/view/thank-you-like-system
oh yea.. that's the heavy one... have you tried the one by eunator?

I downloaded to take a look, I'll post a suggestion in a few moments.
Haven't heard of it. I will use it if its easier and does the same job. Whats the link?
____________________________________________________________________________________________________________________^rep+
starting on line 313 in inc>thankyoulike.php
That's your plugin template data... kept in $tyl_templates array.
	$tyl_templates = array(
		'thankyoulike'					=> "			<td class=\"trow2 post_buttons {\$unapproved_shade}\">
				{\$tyl_expcol} 
				<span id=\"tyl_title_{\$post['pid']}\" style=\"{\$tyl_title_display}\">{\$lang->tyl_title}</span><span id=\"tyl_title_collapsed_{\$post['pid']}\" style=\"{\$tyl_title_display_collapsed}\">{\$lang->tyl_title_collapsed}</span><br />
				<span id=\"tyl_data_{\$post['pid']}\" style=\"{\$tyl_data_display}\">{\$post['thankyoulike']}</span>
			</td>",
		'thankyoulike_classic'					=> "	<td colspan=\"2\" class=\"trow2 post_buttons {\$unapproved_shade}\">
		{\$tyl_expcol} 
		<span id=\"tyl_title_{\$post['pid']}\" style=\"{\$tyl_title_display}\">{\$lang->tyl_title}</span><span id=\"tyl_title_collapsed_{\$post['pid']}\" style=\"{\$tyl_title_display_collapsed}\">{\$lang->tyl_title_collapsed}</span><br />
		<span id=\"tyl_data_{\$post['pid']}\" style=\"{\$tyl_data_display}\">{\$post['thankyoulike']}</span>
	</td>",
		'thankyoulike_expcollapse'					=> "<a href=\"#\" onclick=\"thankyoulike.tgl({\$post['pid']});return false;\" title=\"{\$tyl_showhide}\" id=\"tyl_a_expcol_{\$post['pid']}\"><img src=\"{\$theme['imgdir']}/{\$tyl_expcolimg}\" alt=\"{\$tyl_showhide}\" id=\"tyl_i_expcol_{\$post['pid']}\" /></a> ",
		'thankyoulike_button_add'		=> "<span id=\"tyl_btn_{\$post['pid']}\"><a href=\"thankyoulike.php?action=add&amp;pid={\$post['pid']}&amp;my_post_key={\$mybb->post_code}\" onclick=\"return thankyoulike.add({\$post['pid']}, {\$post['tid']});\" title=\"{\$lang->add_tyl}\" id=\"tyl_a{\$post['pid']}\"><img src=\"{\$imgdir}/postbit_{\$pre}_add.gif\" border=\"0\" alt=\"{\$lang->add_tyl}\" id=\"tyl_i{\$post['pid']}\" /></a></span>",
		'thankyoulike_button_del'		=> "<span id=\"tyl_btn_{\$post['pid']}\"><a href=\"thankyoulike.php?action=del&amp;pid={\$post['pid']}&amp;my_post_key={\$mybb->post_code}\" onclick=\"return thankyoulike.del({\$post['pid']}, {\$post['tid']});\" title=\"{\$lang->del_tyl}\" id=\"tyl_a{\$post['pid']}\"><img src=\"{\$imgdir}/postbit_{\$pre}_del.gif\" border=\"0\" alt=\"{\$lang->del_tyl}\" id=\"tyl_i{\$post['pid']}\" /></a></span>",
		'thankyoulike_users'			=> "<span class=\"smalltext\">{\$comma}</span><a href=\"{\$profile_link}\" class=\"smalltext\">{\$username}</a><span class=\"smalltext\">{\$dt}</span>",
		'thankyoulike_postbit'			=> "{\$lang->tyl_given}: {\$post['tyl_unumtyls']}
<br />
{\$lang->tyl_rcvd}: {\$post['tyl_unumrtyls']}",
		'thankyoulike_memprofile'		=> "<tr>
<td class=\"trow1\"><strong>{\$lang->tyl_total_tyls_given}</strong></td>
<td class=\"trow1\">{\$memprofile['tyl_unumtyls']} ({\$tylpd_percent_total})<br /><span class=\"smalltext\">(<a href=\"tylsearch.php?action=usertylthreads&amp;uid={\$uid}\">{\$lang->tyl_find_threads}</a> &mdash; <a href=\"tylsearch.php?action=usertylposts&amp;uid={\$uid}\">{\$lang->tyl_find_posts}</a>)</span></td>
</tr>
<tr>
<td class=\"trow1\"><strong>{\$lang->tyl_total_tyls_rcvd}</strong></td>
<td class=\"trow1\">{\$memprofile['tyl_unumrcvtyls']} ({\$tylrcvpd_percent_total})<br /><span class=\"smalltext\">(<a href=\"tylsearch.php?action=usertylforthreads&amp;uid={\$uid}\">{\$lang->tyl_find_threads_for}</a> &mdash; <a href=\"tylsearch.php?action=usertylforposts&amp;uid={\$uid}\">{\$lang->tyl_find_posts_for}</a>)</span></td>
</tr>"
					);
So in the above mess... you'd change the image to an ahref with the class you want.
I think line 324 <img src might be it... and line 325 and line 326

no need to edit the following:
the search and replace that happen relative to what you are looking for:]
starting line 362
	find_replace_templatesets("postbit", "#".preg_quote('</tbody>')."#i", '	<tr style="{$post[\'tyl_display\']}" id="tyl_{$post[\'pid\']}">
			{$post[\'thankyoulike_data\']}
		</tr>
	</tbody>');
	find_replace_templatesets("postbit", "#".preg_quote('{$post[\'button_edit\']}')."#i", '{$post[\'button_tyl\']}{$post[\'button_edit\']}');
	// CRLF/LF
	if(!find_replace_templatesets("postbit_classic", "#([\n ]*".preg_quote('</tr>')."[\n ]*".preg_quote('</table>').")#i", "\n</tr>\n<tr style=\"{\$post['tyl_display']}\" id=\"tyl_{\$post['pid']}\">\n	{\$post['thankyoulike_data']}\\1"))
	{
		find_replace_templatesets("postbit_classic", "#([\r\n ]*".preg_quote('</tr>')."[\r\n ]*".preg_quote('</table>').")#i", "\n</tr>\n<tr style=\"{\$post['tyl_display']}\" id=\"tyl_{\$post['pid']}\">\n	{\$post['thankyoulike_data']}\\1");
	}
	find_replace_templatesets("postbit_classic", "#".preg_quote('{$post[\'button_edit\']}')."#i", '{$post[\'button_tyl\']}{$post[\'button_edit\']}');
	find_replace_templatesets("postbit_author_user", "#".preg_quote('	{$lang->postbit_posts} {$post[\'postnum\']}<br />')."#i", '	{$lang->postbit_posts} {$post[\'postnum\']}<br />
	%%TYL_NUMTHANKEDLIKED%%<br />');
	// AAArrrgghhhh!! CRLF/LF crap!
	if(!find_replace_templatesets("member_profile", "#(".preg_quote('<td class="trow1">{$memprofile[\'postnum\']} ({$lang->ppd_percent_total})<br /><span class="smalltext">(<a href="search.php?action=finduserthreads&amp;uid={$uid}">{$lang->find_threads}</a> &mdash; <a href="search.php?action=finduser&amp;uid={$uid}">{$lang->find_posts}</a>)</span></td>')."[\n ]*".preg_quote('</tr>').")#i", "\\1\n{\$tyl_memprofile}"))
	{
		find_replace_templatesets("member_profile", "#(".preg_quote('<td class="trow1">{$memprofile[\'postnum\']} ({$lang->ppd_percent_total})<br /><span class="smalltext">(<a href="search.php?action=finduserthreads&amp;uid={$uid}">{$lang->find_threads}</a> &mdash; <a href="search.php?action=finduser&amp;uid={$uid}">{$lang->find_posts}</a>)</span></td>')."[\r\n ]*".preg_quote('</tr>').")#i", "\\1\n{\$tyl_memprofile}");
	}


the other like system by Eunator:
https://github.com/euantor/SimpleLikes
I just tried his plugin and I get this error...

Parse error: syntax error, unexpected '[' in /home/rs2007/public_html/inc/plugins/SimpleLikes/Likes.php on line 65

I am going to use the one I have and wait for someone to help me add a CSS button.
... i just explained what you could do to add a css button directly in your existing plugin.
Pages: 1 2