We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Text Re-Sizer For Posts
Topic Started: Mar 28 2012, 01:45 PM (1,309 Views)
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Code Name: Text Re-Sizer For Posts

What the code does: This code will add a plus and minus symbol to the H2 (header) in topics that will allow you to either keep increasing (+) or keep decreasing (−) the font size of posts. Preview

How to use the code: Install as instructed, no editing is required.

You can use the following CSS to style the plus and minus symbol in the H2.
Code:
 
#topic_viewer #c_post-resize span {
color: #HEX;
}
Replace '#HEX' with a valid hexadecimal or color name.

How to install the code:

Admin CP >> Themes >> Board Template >> Javascripts
Code:
 
<script type='text/javascript' src='http://z1.ifrm.com/0/2/0/p407929/zeta_cookie.js'></script>
Admin CP >> Themes >> Board Template >> Below the Board
Code:
 
<script type="text/javascript">
//<![CDATA[
(function ($) {
$(document).ready(function () {
if (location.href.indexOf('/topic')) {
var font_size = zeta_cookie.get('font_size');
if (font_size) $('td.c_post').css({
'font-size': font_size + "px"
});
$('#topic_viewer thead th, #topic_viewer > thead div.h2center').prepend('<div id="c_post-resize" style="padding: 0 10px"><span class="increase" style="padding: 0 5px 0; font-size: 18px" title="Increase Post Font">+</span><span class="decrease" style="padding: 0 5px 0; font-size: 18px" title="Decrease Post Font">−</span></div>');

$('span.increase').click(function () {
var c_font_i = parseInt($('td.c_post').css('font-size').split('px')[0]) + 1;
$('td.c_post').css('font-size', c_font_i);
zeta_cookie.set('font_size', c_font_i, 365);
});

$('span.decrease').click(function () {
var c_font_d = parseInt($('td.c_post').css('font-size').split('px')[0]) - 1;
$('td.c_post').css('font-size', c_font_d);
zeta_cookie.set('font_size', c_font_d, 365);
});
}
});
})(jQuery);
//]]>
</script>
Extra notes: Cookies addition to save the font size added with Quozzo's help.
Attached to this post:
Attachments: zeta_cookie.js (1.52 KB)
Edited by Cory, Oct 29 2016, 12:53 AM.
Online Profile Quote Post Goto Top
 
SandyC (PM)
Member Avatar
Member
[ *  *  *  * ]
Thanks for this Cory, just what I need in my forum for a few of my members :)
I've just discovered it only works on the Zeta Original theme atm, I tried it on the other themes and it wouldn't work, it had a small + and - just to the left of the topic titles, but they weren't clickable :( .. it works really well on the Zeta Original theme though...
Edited by SandyC, Mar 28 2012, 09:16 PM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I have updated the code so it works in all themes.
Online Profile Quote Post Goto Top
 
SandyC (PM)
Member Avatar
Member
[ *  *  *  * ]
Awesome work, I've just added it and tried a few themes and it works brilliantly.. a thumbs up for you Cory :)
Edited by SandyC, Mar 29 2012, 04:55 PM.
Offline Profile Quote Post Goto Top
 
SandyC (PM)
Member Avatar
Member
[ *  *  *  * ]
Just to say this is still working brilliantly on my forum, the members love it.. had no probs with it at all since I added it :)
Offline Profile Quote Post Goto Top
 
Joshua J
Member Avatar
Member
[ *  *  * ]
any way to make the + & - more noticable & appear at the bottom of the page also? it looks wierd justa tt eh top just asking thanks
Edited by Joshua J, Apr 26 2012, 12:38 AM.
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Glad to hear that, Sandy! :)

See CSS instructions in original post to make them more noticeable.

Where at the bottom did you want them to appear exactly? It doesn't really work well at the bottom of the board, because as the font size increases it just causes you to scroll down more, pushing the plus and minus symbols further down.
Online Profile Quote Post Goto Top
 
Joshua J
Member Avatar
Member
[ *  *  * ]
i mean like bold and make the + - biggger?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Add boldness and changes the font size:
Code:
 
#topic_viewer #c_post-resize span {
font-weight: 700;
font-size: #px !important;
}
Change the number sign as necessary.
Online Profile Quote Post Goto Top
 
Joshua J
Member Avatar
Member
[ *  *  * ]
add below other 1
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Add to the bottom of Edit Theme Appearance.
Online Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards Codes & Modifications · Next Topic »
Add Reply