WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Altering WP Biographia Box (14 posts)

  1. turndogmillionaire
    Member
    Posted 2 years ago #

    Hi all

    Hoping for some quick tips please. I'm building my new site, and i have added the WP Biographia plugin. Really like it, but i was wonderinf if i could get in there and alter the size of the text and the gap between the bottom of the social media buttons and the text

    There's quite a large gap so i want to make it a more slim lined version

    my link is Here

    anybody have any tips? Am i able to just add some CSS code to alter this?

    cheers

    Matt (Turndog Millionaire)

  2. vicchi
    Member
    Posted 2 years ago #

    Hi ... this is eminently doable ... it just needs the right CSS to be tweaked.

    The layout of the Biography Box that WP Biographia produces looks something like this ...

    <div class="wp-biographia-container-xxx" style="background-color:#FFFFFF;">
    <div class="wp-biographia-pic" style="height:100px; width:100px;">
    <img ... />
    </div> <!-- end image div -->
    <div class="wp-biographia-text">
    <h3>Biography heading</h3>
    <p>Biography text</p>
    <div class="wp-biographia-links">
    <small><ul class="wp-biographia-list wp-biographia-list-xxx">
    </ul>
    </small>
    </div> <!-- end links div -->
    </div> <!-- end biography text div -->
    </div> <!-- end biography container div -->

    The main container is styled by wp-biographia-container-xxx, where xxx is one of top, around or none depending on your chosen Biography Box border option.

    The author's photo, if present, is styled by wp-biographia-pic; note that the photo size is not CSS style-able as it's specified by the plugin's settings and the plugin emits the style="height:size-px; width:size-pix;" for you based on that setting.

    The biography text and social media/contact links are styled by wp-biographia-text, the biography text by wp-biographia-text p and the links by wp-biographia-list and wp-biographia-list-xxx, where xxx is one of text or icon dependent on whether you've selected the links to be text or icons (oddly enough!)

    The links are also styled by ul.wp-biographia-list-xxx li (again xxx is one of text or icon) and if you're using icons there's also .wp-biographia-list-icon a:link and .wp-biographia-list-icon a:visited. The icon size is styled by .wp-biographia-item-icon.

    All of this is in the plugin's CSS file which is usually located at /wp-content/plugins/wp-biographia/css/wp-biographia.css.

    Hopefully all of this will give you enough information to go on to add/tweak the CSS to your liking.

    -Gary

  3. vicchi
    Member
    Posted 2 years ago #

    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! :-)

  4. turndogmillionaire
    Member
    Posted 2 years ago #

    Thanks for your help, i checked the FAQs and i couldn't find anything relevant to what i needed

    I think i've found the code you talk about, but i've tried copying some of it over to custom file editor and had little joy. I've managed to make some of the padding smaller, but can't find a way to make the text smaller, and the gap at the bottom smaller

    the text is:

    [77 lines of CSS moderated as per the Forum Rules. Please just post a link to your site.]

    are you able to spot anything in there that might allow me to alter things? I feel it's quite a simple thing, but can't quite find the right pieces

    thanks in advance

    Matt (Turndog Millionaire)

  5. vicchi
    Member
    Posted 2 years ago #

    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

  6. turndogmillionaire
    Member
    Posted 2 years ago #

    No you are perfectly fine, i am a technical novice. Slowly but surly learning some CSS tricks though :)

    It's the text of the Bio i'm looking to change, and the gap between the social media links (i use the icons) and the bottom of the box

    I've never used firebug before, so is that the only way around this? If so i better get learning how to use that too :)

    Matt (Turndog Millionaire)

  7. vicchi
    Member
    Posted 2 years ago #

    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

  8. turndogmillionaire
    Member
    Posted 2 years ago #

    that was perfect, 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?

    It isn't the theme's direct CSS form, so i think this may be ok???

    If this is an ok solution, then am i able to put the codes for the title header and boundaries in there too? If so how do i find out the code. 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.

    Now i'm looking at my box i'd love to change the size of the title and the gap between title and text. If you can give me some tips on finding this code then i feel i may be able to move forward in the css world. Teach a man a fish and he has fish for life kind of thing

    Thanks for your help so far. I'm learning loads each day :)

    Matt (Turndog Millionaire)

  9. vicchi
    Member
    Posted 2 years ago #

    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

  10. vicchi
    Member
    Posted 2 years ago #

    So ... try this. To set the size of the Biography paragraph(s) use this, setting the font-size and any other characteristics you want accordingly ...

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

    To set the size of the heading and to narrow the space between the heading and the Biography paragraph(s) ...

    .wp-biographia-text h3 {
    	font-size: 18px;
    	margin: 0 0 10px 0 !important;
    }

    Finally, to narrow the space between the icons and the next element following the Biography Box ...

    .wp-biographia-container-none {
    	margin: 20px 0 0 0;
    	padding: 20px 0 0 0;
    }

    -Gary

  11. turndogmillionaire
    Member
    Posted 2 years ago #

    you sir are an absolute start

    I'm really happy about everything and think i've learnt a thing or two too.

    And you're right, i do need to delve deeper into the css world

    thank you so much for your help

    Matt (Turndog Millionaire)

  12. vicchi
    Member
    Posted 2 years ago #

    So for some reason I can't seem to flag this thread as "resolved" ... can you see if you can do this from your side?

    -Gary

  13. simbelsim
    Member
    Posted 1 year ago #

    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!

  14. vicchi
    Member
    Posted 1 year ago #

    Thanks for the comments; it's posts like these that make being part of the WordPress community so worthwhile!

    -Gary

Topic Closed

This topic has been closed to new replies.

About this Topic