Altering WP Biographia Box

Actually, I think what I’ve just written above should probably be in the plugin’s FAQ, so thanks for making me write this up! 🙂

Hi,

Which text are you looking to alter the size of? All the page text or just the plugin’s? If the latter, which part? The author’s name, the contact links (if you’re not using icons) and/or the biography text?

This is really a CSS issue between the plugin and your theme and it does need a certain level of knowledge of CSS/HTML (not that I’m saying you’re not technical here I hasten to add).

Have you tried using Safari’s Web Inspector or Firefox’s Firebug to see what CSS is being applied to the elements you want to change the styling of?

-Gary

To change the font style of the Biography itself, put the CSS you want in a file, let’s call it custom.css, and place this into the same directory as the root of your theme. If you’re using the TwentyTen theme for example, the path would look something like …

/wp-content/themes/twentyten/custom.css

I’m not sure exactly what you want to change with the font, so for the sake of example, let’s change the font size to 24px. You’d add this to your new custom.css file

.wp-biographia-text p {
	font-size: 24px;
}

Now you need to get your theme to load the custom CSS. To do this you need to add a function to load the CSS to the wp_enqueue_scripts hook and then within that function, make the CSS get loaded in addition to the other CSS your theme uses. This code goes into your theme’s functions.php and looks something like this …

add_action ('wp_enqueue_scripts', 'add_custom_css');
function add_custom_css () {
	$url = get_stylesheet_directory_uri ();
	wp_enqueue_style ('custom-css', $url . '/custom.css');
}

This may seem like a lot of work and some people recommend adding the CSS directly to your theme’s header.php or adding the custom CSS to your theme’s style.css, but the problem with this approach is that each time you update your theme, your changes will be overwritten. The above approach protects you from updates overwriting your changes as much as possible.

Obviously, you’ll need to change the precise CSS you’re adding to fit your needs, but there’s loads of CSS resources out there on the web. I’ll take a look later at what you need to do to tweak the gap between the icons and the bottom of the box, but this will get you started.

-Gary

I think now is the time to nudge you gently towards learning what CSS is and how it works. For example, to answer your question …

For example you gave me .wp-biographia-text p … Is it the letter p that makes all the difference? I tried adding this without the p and it did nothing.

… you need to understand that .wp-biographia-text p refers to any paragraph elements that appear within a block element that has the class wp-biographia-text. So this is why the CSS …

.wp-biographia-text p {
	font-size: 24px;
}

… would change the font size of the paragraph containing “Biography text” in the code example below.

<div class="wp-biographia-text">
<h3>Biography heading</h3>
<p>Biography text</p>

To answer your other question …

my theme has a CSS editor built in so i just had to paste the code you gave straight in there and it changed the font size. Is this going to create issues when i update things like you say?

I’ve had a look at the code which makes up the your site and I can see you’re using the Backbone theme. Unfortunately as this is a premium/paid for theme I can’t look to see whether CSS edits you make will be persisted across upgrades. I hope you can understand that purchasing a theme just to test my plugin out against it would work out being very expensive very quickly.

I’ll continue to have a look at the other CSS tweak you want and if I’m successful I’ll post back here. But for now, I can help you with how to get CSS changes into your site that re-style my plugin’s output, but teaching you how to use CSS and understand it is really beyond my ability and the amount of time I have to maintain the plugin and support it.

-Gary

I would just like to thank the developer very much for the continuous support and the helpful comments I see everywhere this plugin is discussed.

I had a similar wish to change the font size in the box and this thread taught me to do it in an elegant manner that perfectly suits my purposes and won’t break when updating. Thank you!