The current PSD to WordPress project that I am currently working on has the following design for inner pages (click the image for bigger view):
In this article I share how I have set up the
- Print icon to trigger Print command
- Share icon to display social sharing options when hovered
- Font Resizing icon to display a tooltip having three buttons to control the text size of page's content.
I am going to use Genesis Sample as the active theme in this tutorial.
Screenshots of the output:
Install and activate Genesis Printstyle Plus plugin. This plugin adds a printer-ready stylesheet. We can also add custom styles to hide unneeded elements in the printed version.
Install and activate AddToAny plugin. We shall use the function provided by this plugin to display a universal share button.
Save the code below as gamajo-font-sizer.js and upload it to 'js' directory (create if not existing) under your child theme directory.
Sample path: wp-content/themes/genesis-sample/js/gamajo-font-sizer.js
This file has the code by Gary Jones that will make
- any button having a class of increase to up the font-size of article.entry by 25%
- any button having a class of decrease to reduce the font-size of article.entry by 20%
- any button having a class of resetMe to reset the font-size to its default
To view the full content, please sign up for the membership.
Already a member? Log in below or here.