WordPress.com is an easy way to start blogging. Get a blog, check out our features, read the latest announcements, choose from great themes, or learn about the team behind it.
Need help? Check out our Support site, then
Hi,
I would like to add an author box at the end of the articles on one blog I have with the Fusion Theme. Just the classic box border, with the picture of the Author on the left, a short description and a link to his website.
How can I do that?
Also, I'm not sure I want to add it for every article I publish, do you know the string for adding it manually at the end of each article? Is it possible?
Thank you.
The blog I need help with is italianeography.com.
There is not a way to add dynamic content such as the author's picture and links to posts using CSS only. To make that kind of change, you would need to switch to WordPress.org in order to get access to the PHP code in the theme.
Ah ok, not even if I manually add a string of html code in the editor at the end of some articles? With just a border and inside a small picture and a short text?
You can do it manually on each post. Do you need help with coding?
well, yes, if it's possible. I don't know so much about CSS unfortunately but I only need to do that. Just a small black border around for creating the "box style", and inside a small picture on the left, and the text on the right, like usual. 640px is the maximum wide. Thank you.
Maybe someone will come and offer more elegant results but this will mostly accomplish what you want - I show 2 ways..
1. Do it all in the html. You could make a template and fill in your changing information. Your html would look something like this, this uses a fake file name, etc. I capitalized part of the file name because I think you have to add that in to the filename. You would add your URL (with "files" added -this is awake URL) and the size of your thumbnail. Put in your image as the first item in the paragraph for the best placement.
davidroccato
designsimply
1tess
<div style="margin-left:24px;border:1px solid #000000;overflow:auto;width:85%;">
<h2> John Doe</h2>
<p style="padding:10px;"> <img style="float:left;padding:0, 5, 0, 5px;" src="http://italianeography.FILES.wordpress.com/2012/11/20121111-082354.jpg?w=150" alt="20121111-082354.jpg" width="150" height="150" />and here is the text about the author. and here is the text about the author.and here is the text about the author. and here is the text about the author. </p></div>The second way uses a combination of CSS that will be added to your style sheet and the way you will need to put in your html. First the CSS for your stylesheet :
/*... Author box...*/
div .author-container {
margin-left: 24px;
border: 1px solid #000000;
overflow: auto;
width: 85%;
}
p.author {
padding: 20px;
}
img.author {
float: left;
padding: 5px;
}
/* End Author BoxAfter adding your css, you are ready to go to your post or page and add the html for your Author box. You just have to add a few notations, the div and its class, the p and its class, and the real image file name will be supplied when you add your image. You will need to go in your text editor and include the class="author" part of the image link.
<div class="author-container">
<h2>Freddy Frog</h2>
<p class="author"><img class="author" src="http://italianeography.files.wordpress.com/2012/11/20121111-082354.jpg?w=150" alt="20121111-082354.jpg" width="150" height="150" />and here is the text about the author.and here is the text about the author. ;and here is the text about the author. and here is the text about the author.and here is the text about the author. here is the text about the author.and here is the text about the author. here is the text about the author. here is the text about the author. here is the text about the author. here is the text about the author.and here is the text about the author. here is the text about the author. here is the text about the author.</p></div>And that is my inelegant solution. Try it and ask any questions you may have. If I come up with a more elegant solution I will post it.
Thank you for your examples @houstonweaver. I've had a couple of very busy days but I'll try to test your solutions during the next days to see if I'm able to make them work. I will let you know if everything is ok or if I need to understand something more. Thank you again.
here I am,
I've just tried the first solution and tried to adapt it to what I would like to achieve. Here's what I've written:
<div style="margin-left: 0px; border: 1px solid #000000; overflow: auto; width: 99%;"></p>
<p><img style="float: left; padding: 1, 5, 1, 5px;" alt="" src="http://italianeography.files.wordpress.com/2012/05/EXAMPLE.jpg" /><br />
<p style="padding: 4px; text-align: justify;"><strong>Author: John Doe - </strong>and here is the text about the author. and here is the text about the author.and here is the text about the author. and here is the text about the author. and here the <a href="http://EXAMPLE.com">Website</a></p><br />
</div>
The picture will be always 70x70 so I don't need to specify it. The only thing is not perfect is the distance/padding between the top border line and the picture/text and the bottom border line and the picture/text. It's almost the same but the distance on the top is a little bit bigger than the distance at the bottom. In any case, if it's too complicated to fix it equally, I can absolutely live with that.
Then, I don't understand why I should add those class containers and how, so how it would be the last version with those included too? If it's not necessary, I could go with the code I've just written above.
In any case, Thank you very much again for your help.
The reason to go the second route is if you wanted to add those classes to your css style sheet. The first example uses inline styles. Either one can work for you but you definitely do not need both.
Can you link to a specific page where you have implemented the author box so we can look at the spacing issue?
This topic has been closed to new replies.
