The Molongui Authorship plugin provides a bunch of styling settings you can use to fully customize your author boxes. Most of the users find all those available settings more than enough to make the author box look like they need. However, a few may need to take author box customization a step further. If you are one of those few, keep reading.
All the elements that make up the author box have a CSS class. So if you have some experience coding with CSS, it will be easy for you to add styling overwrites. Just inspect the author box markup, get the CSS class for the element to customize and add your targeted styles.
If your customization requires deeper changes, you may want to completely disable the stylesheet packaged with the plugin and provide your own.
Adding Custom Styles
WordPress provides several ways for you to add your own styles in the frontend of your site. Which are preferred and why is beyond the scope of this support article. Here we only list a few of them to give you a starting point.
So to add your custom styles, you can:
- Enter them into the editor field you will find on the WordPress Customizer, under the “Additional CSS” option
- Define them into the .CSS file of your child theme
- Make use of a third party plugin, like Code Snippets
- Or code a PHP function and hook it into a suitable WordPress action, like
wp_headorwp_footer
Social Media Icons
Disabling the stylesheet provided by the plugin prevents social icons font to be loaded too. Which means that you might need to provide your own font too.
Knowing that might be quite challenging for some of you, here we provide the code you need to add to your custom CSS code so the plugin icons font is loaded.
/*
* Molongui Authorship
* Custom CSS code added to display social icons.
*/
@font-face
{
font-family: 'molongui-authorship-font';
src: url('assets/font/molongui-authorship-font.eot?27310790');
src: url('assets/font/molongui-authorship-font.eot?27310790#iefix') format('embedded-opentype'),
url('assets/font/molongui-authorship-font.woff2?27310790') format('woff2'),
url('assets/font/molongui-authorship-font.woff?27310790') format('woff'),
url('assets/font/molongui-authorship-font.ttf?27310790') format('truetype'),
url('assets/font/molongui-authorship-font.svg?27310790#molongui-authorship-font') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="m-a-icon-"]:before, [class*=" m-a-icon-"]:before
{
font-family: "molongui-authorship-font";
font-style: normal;
font-weight: normal;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.m-a-icon-facebook:before { content: '\e000'; }
.m-a-icon-twitter:before { content: '\e001'; }
.m-a-icon-googleplus:before { content: '\e002'; }
.m-a-icon-youtube:before { content: '\e003'; }
.m-a-icon-pinterest:before { content: '\e004'; }
.m-a-icon-tumblr:before { content: '\e005'; }
.m-a-icon-instagram:before { content: '\e006'; }
.m-a-icon-renren:before { content: '\e007'; }
.m-a-icon-vk:before { content: '\e008'; }
.m-a-icon-flickr:before { content: '\e009'; }
.m-a-icon-vine:before { content: '\e00a'; }
.m-a-icon-meetup:before { content: '\e00b'; }
.m-a-icon-weibo:before { content: '\e00c'; }
.m-a-icon-deviantart:before { content: '\e00d'; }
.m-a-icon-stumbleupon:before { content: '\e00e'; }
.m-a-icon-myspace:before { content: '\e00f'; }
.m-a-icon-mixi:before { content: '\e010'; }
.m-a-icon-soundcloud:before { content: '\e011'; }
.m-a-icon-lastfm:before { content: '\e012'; }
.m-a-icon-foursquare:before { content: '\e013'; }
.m-a-icon-spotify:before { content: '\e014'; }
.m-a-icon-vimeo:before { content: '\e015'; }
.m-a-icon-dailymotion:before { content: '\e016'; }
.m-a-icon-reddit:before { content: '\e017'; }
.m-a-icon-skype:before { content: '\e018'; }
.m-a-icon-periscope:before { content: '\e019'; }
.m-a-icon-askfm:before { content: '\e01a'; }
.m-a-icon-livejournal:before { content: '\e01b'; }
.m-a-icon-blogger:before { content: '\e01c'; }
.m-a-icon-taringa:before { content: '\e01d'; }
.m-a-icon-odnoklassniki:before { content: '\e01e'; }
.m-a-icon-bebee:before { content: '\e01f'; }
.m-a-icon-livestream:before { content: '\e020'; }
.m-a-icon-slides:before { content: '\e021'; }
.m-a-icon-quora:before { content: '\e022'; }
.m-a-icon-tinder:before { content: '\e023'; }
.m-a-icon-plurk:before { content: '\e024'; }
.m-a-icon-buzzfeed:before { content: '\e025'; }
.m-a-icon-everplaces:before { content: '\e026'; }
.m-a-icon-goodreads:before { content: '\e027'; }
.m-a-icon-whatsapp:before { content: '\e028'; }
.m-a-icon-telegram:before { content: '\e029'; }
.m-a-icon-draugiemlv:before { content: '\e02a'; }
.m-a-icon-spreaker:before { content: '\e02b'; }
.m-a-icon-houzz:before { content: '\e02c'; }
.m-a-icon-tripadvisor:before { content: '\e02d'; }
.m-a-icon-upwork:before { content: '\e02e'; }
.m-a-icon-gumtree:before { content: '\e02f'; }
.m-a-icon-speakerdeck:before { content: '\e030'; }
.m-a-icon-medium:before { content: '\e031'; }
.m-a-icon-runkeeper:before { content: '\e032'; }
.m-a-icon-deezer:before { content: '\e033'; }
.m-a-icon-bandcamp:before { content: '\e034'; }
.m-a-icon-kaggle:before { content: '\e035'; }
.m-a-icon-superuser:before { content: '\e036'; }
.m-a-icon-500px:before { content: '\e037'; }
.m-a-icon-storify:before { content: '\e038'; }
.m-a-icon-coderwall:before { content: '\e039'; }
.m-a-icon-jsfiddle:before { content: '\e03a'; }
.m-a-icon-ifixit:before { content: '\e03b'; }
.m-a-icon-mixcloud:before { content: '\e03c'; }
.m-a-icon-designernews:before { content: '\e03d'; }
.m-a-icon-twitch:before { content: '\e03e'; }
.m-a-icon-readthedocs:before { content: '\e03f'; }
.m-a-icon-coursera:before { content: '\e040'; }
.m-a-icon-googleplay:before { content: '\e041'; }
.m-a-icon-styleshare:before { content: '\e042'; }
.m-a-icon-github:before { content: '\e043'; }
.m-a-icon-wikipedia:before { content: '\e044'; }
.m-a-icon-ello:before { content: '\e045'; }
.m-a-icon-stitcher:before { content: '\e046'; }
.m-a-icon-codepen:before { content: '\e047'; }
.m-a-icon-stackoverflow:before { content: '\e048'; }
.m-a-icon-digg:before { content: '\e049'; }
.m-a-icon-line:before { content: '\e04a'; }
.m-a-icon-researchgate:before { content: '\e04b'; }
.m-a-icon-academia:before { content: '\e04c'; }
.m-a-icon-bookbub:before { content: '\e04d'; }
.m-a-icon-rss:before { content: '\e04e'; }
.m-a-icon-applepodcasts:before { content: '\e04f'; }
.m-a-icon-castbox:before { content: '\e050'; }
.m-a-icon-radiopublic:before { content: '\e051'; }
.m-a-icon-tunein:before { content: '\e052'; }
.m-a-icon-scoutfm:before { content: '\e053'; }
.m-a-icon-overcast:before { content: '\e054'; }
.m-a-icon-breaker:before { content: '\e055'; }
.m-a-icon-philpapers:before { content: '\e056'; }
.m-a-icon-tiktok:before { content: '\e057'; }
.m-a-icon-lbry:before { content: '\e058'; }
.m-a-icon-gab:before { content: '\e059'; }
.m-a-icon-orcid:before { content: '\e05a'; }
.m-a-icon-linkedin:before { content: '\e800'; }
.m-a-icon-slideshare:before { content: '\e803'; }
.m-a-icon-itunes:before { content: '\e80a'; }
.m-a-icon-dropbox:before { content: '\e80c'; }
And just for illustrative purposes only, below we show how that code would be added via the wp_footer WordPress hook:
/**
* Echoes my custom styles for author boxes by Molongui Authorship.
* This function is meant to be hook into either the 'wp_header' or 'wp_footer' hook.
* @return void Adds custom styles to page markup.
*/
function my_molongui_author_box_styles()
{ ?>
@font-face
{
font-family: 'molongui-authorship-font';
src: url('<?php echo MOLONGUI_AUTHORSHIP_URL; ?>assets/font/molongui-authorship-font.eot?27310790');
src: url('<?php echo MOLONGUI_AUTHORSHIP_URL; ?>assets/font/molongui-authorship-font.eot?27310790#iefix') format('embedded-opentype'),
url('<?php echo MOLONGUI_AUTHORSHIP_URL; ?>assets/font/molongui-authorship-font.woff2?27310790') format('woff2'),
url('<?php echo MOLONGUI_AUTHORSHIP_URL; ?>assets/font/molongui-authorship-font.woff?27310790') format('woff'),
url('<?php echo MOLONGUI_AUTHORSHIP_URL; ?>assets/font/molongui-authorship-font.ttf?27310790') format('truetype'),
url('<?php echo MOLONGUI_AUTHORSHIP_URL; ?>assets/font/molongui-authorship-font.svg?27310790#molongui-authorship-font') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="m-a-icon-"]:before, [class*=" m-a-icon-"]:before
{
font-family: "molongui-authorship-font";
font-style: normal;
font-weight: normal;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.m-a-icon-facebook:before { content: '\e000'; }
.m-a-icon-twitter:before { content: '\e001'; }
.m-a-icon-googleplus:before { content: '\e002'; }
.m-a-icon-youtube:before { content: '\e003'; }
.m-a-icon-pinterest:before { content: '\e004'; }
.m-a-icon-tumblr:before { content: '\e005'; }
.m-a-icon-instagram:before { content: '\e006'; }
.m-a-icon-renren:before { content: '\e007'; }
.m-a-icon-vk:before { content: '\e008'; }
.m-a-icon-flickr:before { content: '\e009'; }
.m-a-icon-vine:before { content: '\e00a'; }
.m-a-icon-meetup:before { content: '\e00b'; }
.m-a-icon-weibo:before { content: '\e00c'; }
.m-a-icon-deviantart:before { content: '\e00d'; }
.m-a-icon-stumbleupon:before { content: '\e00e'; }
.m-a-icon-myspace:before { content: '\e00f'; }
.m-a-icon-mixi:before { content: '\e010'; }
.m-a-icon-soundcloud:before { content: '\e011'; }
.m-a-icon-lastfm:before { content: '\e012'; }
.m-a-icon-foursquare:before { content: '\e013'; }
.m-a-icon-spotify:before { content: '\e014'; }
.m-a-icon-vimeo:before { content: '\e015'; }
.m-a-icon-dailymotion:before { content: '\e016'; }
.m-a-icon-reddit:before { content: '\e017'; }
.m-a-icon-skype:before { content: '\e018'; }
.m-a-icon-periscope:before { content: '\e019'; }
.m-a-icon-askfm:before { content: '\e01a'; }
.m-a-icon-livejournal:before { content: '\e01b'; }
.m-a-icon-blogger:before { content: '\e01c'; }
.m-a-icon-taringa:before { content: '\e01d'; }
.m-a-icon-odnoklassniki:before { content: '\e01e'; }
.m-a-icon-bebee:before { content: '\e01f'; }
.m-a-icon-livestream:before { content: '\e020'; }
.m-a-icon-slides:before { content: '\e021'; }
.m-a-icon-quora:before { content: '\e022'; }
.m-a-icon-tinder:before { content: '\e023'; }
.m-a-icon-plurk:before { content: '\e024'; }
.m-a-icon-buzzfeed:before { content: '\e025'; }
.m-a-icon-everplaces:before { content: '\e026'; }
.m-a-icon-goodreads:before { content: '\e027'; }
.m-a-icon-whatsapp:before { content: '\e028'; }
.m-a-icon-telegram:before { content: '\e029'; }
.m-a-icon-draugiemlv:before { content: '\e02a'; }
.m-a-icon-spreaker:before { content: '\e02b'; }
.m-a-icon-houzz:before { content: '\e02c'; }
.m-a-icon-tripadvisor:before { content: '\e02d'; }
.m-a-icon-upwork:before { content: '\e02e'; }
.m-a-icon-gumtree:before { content: '\e02f'; }
.m-a-icon-speakerdeck:before { content: '\e030'; }
.m-a-icon-medium:before { content: '\e031'; }
.m-a-icon-runkeeper:before { content: '\e032'; }
.m-a-icon-deezer:before { content: '\e033'; }
.m-a-icon-bandcamp:before { content: '\e034'; }
.m-a-icon-kaggle:before { content: '\e035'; }
.m-a-icon-superuser:before { content: '\e036'; }
.m-a-icon-500px:before { content: '\e037'; }
.m-a-icon-storify:before { content: '\e038'; }
.m-a-icon-coderwall:before { content: '\e039'; }
.m-a-icon-jsfiddle:before { content: '\e03a'; }
.m-a-icon-ifixit:before { content: '\e03b'; }
.m-a-icon-mixcloud:before { content: '\e03c'; }
.m-a-icon-designernews:before { content: '\e03d'; }
.m-a-icon-twitch:before { content: '\e03e'; }
.m-a-icon-readthedocs:before { content: '\e03f'; }
.m-a-icon-coursera:before { content: '\e040'; }
.m-a-icon-googleplay:before { content: '\e041'; }
.m-a-icon-styleshare:before { content: '\e042'; }
.m-a-icon-github:before { content: '\e043'; }
.m-a-icon-wikipedia:before { content: '\e044'; }
.m-a-icon-ello:before { content: '\e045'; }
.m-a-icon-stitcher:before { content: '\e046'; }
.m-a-icon-codepen:before { content: '\e047'; }
.m-a-icon-stackoverflow:before { content: '\e048'; }
.m-a-icon-digg:before { content: '\e049'; }
.m-a-icon-line:before { content: '\e04a'; }
.m-a-icon-researchgate:before { content: '\e04b'; }
.m-a-icon-academia:before { content: '\e04c'; }
.m-a-icon-bookbub:before { content: '\e04d'; }
.m-a-icon-rss:before { content: '\e04e'; }
.m-a-icon-applepodcasts:before { content: '\e04f'; }
.m-a-icon-castbox:before { content: '\e050'; }
.m-a-icon-radiopublic:before { content: '\e051'; }
.m-a-icon-tunein:before { content: '\e052'; }
.m-a-icon-scoutfm:before { content: '\e053'; }
.m-a-icon-overcast:before { content: '\e054'; }
.m-a-icon-breaker:before { content: '\e055'; }
.m-a-icon-philpapers:before { content: '\e056'; }
.m-a-icon-tiktok:before { content: '\e057'; }
.m-a-icon-lbry:before { content: '\e058'; }
.m-a-icon-gab:before { content: '\e059'; }
.m-a-icon-orcid:before { content: '\e05a'; }
.m-a-icon-linkedin:before { content: '\e800'; }
.m-a-icon-slideshare:before { content: '\e803'; }
.m-a-icon-itunes:before { content: '\e80a'; }
.m-a-icon-dropbox:before { content: '\e80c'; }
<?php
}
add_action( 'wp_footer', 'my_molongui_author_box_styles' );
