Adding written Bio next to photograph on sidebar (5 posts)

  1. JuliaMueller
    Posted 3 years ago #

    Hi there,
    I would like to add a short bio next to my picture on my sidebar: http://www.theroastedroot.net/ with the border around the text and the picture. How do I add text? I would like it to appear similar to the pic/bio on this girl's site: http://www.climbinggriermountain.com/ Can you point me in the right direction?

    Hope you're having a great weekend!

  2. Krishna
    Posted 3 years ago #

    It is a text widget on which an image (of size 125x125) has been posted aling with appropriate text. You can add color of your choice by CSS.

  3. JuliaMueller
    Posted 3 years ago #

    Thanks Krishna!

    Okay, I'm sure this code needs a ridiculous amount of help, but here is what I tried:

    <div align="left"><a href="http://www.theroastedroot.net/about/" title="about Julia"><img src="http://www.theroastedroot.net/wp-content/uploads/2012/10/sidebarimage1.jpg" alt="about Julia"></a></div>
    <div align=”right”><text=”Hi there, I’m Julia! I enjoy sharing nutrient-dense recipes, both savory and sweet. I’m an amateur gardener and love the great outdoors! Learn more about me and visit often!”></a><div>

    What happened was the text in the footer moved to next to the image and the text I want next to my image does not appear. You can tell I'm new at code...any help would be great!!



  4. WPyogi
    Forum Moderator
    Posted 3 years ago #

    On your site, the image is floated left, so all you need to do is add your text right under it in the text widget HTML. So you'd have something like this:

    <img class="alignleft" width="200" height="180" src="http://www.theroastedroot.net/wp-content/uploads/2012/10/sidebarimage1.jpg">
    <span class="my_bio">This is about me...</span>

    Then you can use the my_bio class to add any styles you want in the CSS:

    .my_bio {
       styles here

    You might have to use more specific CSS selectors for the CSS -- but try adding these first and see if it works.

  5. WPyogi
    Forum Moderator
    Posted 3 years ago #

    One other thing is that you might want to make the image a bit smaller or at least narrower, so you have a bit more room for the text.

Topic Closed

This topic has been closed to new replies.

About this Topic