Can you link to a specific page where you have implemented the author box so we can look at the spacing issue?

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.

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.

<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 Box

After 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.

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.

#tabs a {
	background: #002c58
}
#topnav a:hover {
	text-decoration: none;
	background:none;
	color:#00458b
}

Nice work!

I need to change the black colour on the head section of this website to this blue colour #00008B and sahes of this through CSS and can't work out how to do it - can anyone help?

Thanks
Niki

I'm not sure which background color, the content or behind the content?

Here's what I came up with for an example of changing the background color for the main content of a page and the footer:

#mid-content, #footer, ul.secondary-tabs {
	background: #eee;
}
#mid-content, #respond {
	margin-bottom: 0;
}
#footer {
	margin-top: 0;
}

As an alternative, here's an example I came up with for changing the background color behind the content area in the Fusion theme:

body {
	background: #eee;
}
#page-wrap2 {
	background: none !important;
}
#mid-content, #footer, ul.secondary-tabs {
	background: #fff;
}
#header {
	background-color: #242424;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#707070), color-stop(0.26, #3D3D3D), color-stop(0.26, #242424), to(#0F0F0F));
	background: -moz-linear-gradient(top, #707070, #3D3D3D 26%, #242424 26%, #0F0F0F);
}
#mid-content {
	padding: 0 1em;
}
#page .clearcontent {
	display: none;
}

Note that the Fusion theme is setup with quite a few different wrap elements, and so there are probably several different ways to accomplish changing the background color.

I also want to know if I can change how the "Excerpt" post appears? Right now I have it on Full Post, because on "Excerpt" post, it doesn't show an image.. just writing. Is there a way I can change that?

There is not a way to add images to automatic excerpts, but you can setup your own excerpts manually and include images. To do it, open a post for editing, click the Screen Options tab at the top right of the page, make sure the "Excerpt" option is checked, find the excerpt on the page, add in a manual excerpt including HTML code for the image you'd like to add, and save changes.

Here is an example of a manual excerpt with an image:

<img src="YOUR_IMAGE_URL" class="alignleft"/> This is a test post with a manual excerpt that also includes an image.

Replace YOUR_IMAGE_URL with an image URL you choose. The best practice is to upload an image to your media library and then copy the image URL from there.

I have the Fusion Theme (www.purecomplex.com) and I can't find the css language that will allow me to change the look of the subscribe form.

The Fusion Theme doesn't have any specific CSS rules setup for the subscribe form, and that means it will just inherit rules used for the sidebar in most cases. When that happens, you'll want to look at the HTML to see what selectors to use in your CSS.

Here is an example of the HTML for the visible elements of the follow widget while logged out:

<div class="widget widget_blog_subscription" id="blog_subscription-6"><h2 class="title"><label for="subscribe-field">Receive Updates via Email..</label></h2>
			<form id="subscribe-blog" accept-charset="utf-8" method="post" action="https://subscribe.wordpress.com">
				<p><input type="text" id="subscribe-field" value="" style="width: 95%; padding: 1px 2px" name="email"></p>
				<p>
					<input type="submit" value="Subscribe Today..">
				</p>
			</form>
</div>

To style the subscription field and the submit button separately, you would add CSS using selectors like this:

.widget_blog_subscription #subscribe-field {
/* CSS goes here */
}

.widget_blog_subscription input[type="submit"] {
/* CSS goes here */
}

Here is a more specific CSS example which changes a few things about the input fields:

.widget_blog_subscription #subscribe-field {
height: 25px;
border: 1px solid black;
color: #444;
}

.widget_blog_subscription input[type="submit"] {
background: darkorange;
color: black;
display:block;
width:100%;
padding:5px;
border:1px solid sienna;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}

Of course, this is just one way of styling the form elements, and you can add/remove/adjust the rules to your liking.

I have the Fusion Theme (www.purecomplex.com) and I can't find the css language that will allow me to change the look of the subscribe form. Can someone please help point out where the language is and how to change it?

I also want to know if I can change how the "Excerpt" post appears? Right now I have it on Full Post, because on "Excerpt" post, it doesn't show an image.. just writing. Is there a way I can change that? Please help and thank you in advance for anyone willing to help.

Okay, thanks for the advice. I was thinking along the same lines myself, but I was a little thrown by the fact that the preview in the CSS Stylesheet Editor works.

I'll keep an eye on it and see what happens.

If you are talking about that line of text you've hidden with the "display:none; in #topnav in the CSS, I do not see that on any browser and I do not see it on my iPhone.

I would suspect a caching issue at your phone service provider possibly where they haven't upgraded their cache. They use invisible proxy servers to lower bandwidth usage.

Did you definitely access via 3G and not WiFi?