@andy
I have been fixing the styling finally by my self. Been learning how to use Firebug ( LOVE THAT tool 
) and been learning more about CSS thankx to this annoying plugin 
Sorry to have bothered you
Lets start of first with the copying files and creating layouts and so forth:
This is what I did:
template-archive-question.php
template-ask-question.php
template-edit-answer.php
template-edit-question.php
template-single-question.php
template-user-question.php
These files where created in the Salutation theme folder.
I copied over the code from the original files with same name minus the “template-” part. The content in the original files ( that where already since before copied over to the Salutation Theme folder) where then erased and this line where added in each and everyone of them, where the name of the template of course where changed to fit the file names like ‘single-question’, ‘ask-question’ and so forth,
<?php create_page_layout('archive-question', 'qa-layout'); // context = archive-question ?>
I then created a new layout that I am calling Q&A with the key being your suggestion: ‘qa-layout’.
I am using same layout for all files. I fixed only in that layout a minimal header, default footer and a container with Default content in it.
Here comes the CSS changes that are done ( all in the plugins general.css that you find inside the plugin directory:
Added following lines to the css:
width: 620px!important;
to
#qa-page-wrapper {
float: left;
overflow: hidden;
padding-bottom: 2em;
background-color:white;
width: 620px!important;
}
width:470px!important;
to
.question-summary {
padding: 0 5px 0 0;
float: right;
width:470px!important;
}
width: 600px!important;
to
#question-form textarea,
#answer-form textarea,
.cleditorMain {
margin: 20px 0;
width: 600px!important;
}
This changes fix the whole plugin to keep itself nicely to max 620pc and the titles of the questions to show up properly.
Following changes are done for the title and tags input areas in the questions editor and the editor it self:
width: 600px!important;
to
#question-form textarea,
#answer-form textarea,
.cleditorMain {
margin: 20px 0;
width: 600px!important;
}
width:380px!important;
to
<pre>#question-title,
#question-tags {
border: 1px solid #999;
background-color: #fff;
width:380px!important;
}
And finally to make the plugin look nicely in your members area where you can see the questions you have posted and or answered.
background-color:white;
to
#qa-user-answers {
margin-top: 0px;
padding-top:10px;
background-color:white;
}
margin-top: 20px;
is changed to
margin-top: 0px;
and
padding-top:10px;
is added.
And last part added is
background-color:white;
to
.question {
border-bottom: 1px dotted #999999;
overflow: hidden;
padding: 10px 0;
background-color: white;
}
And a fix for the user information box that hangs around with ones user name and avatar on the right side next to the questions one has posted or answered:
padding-right:5px;
add to
.qa-user-details {
float: left;
line-height: 17px;
padding-right:5px;
}
Then there is a need to increase the height of one picture unfortunately. within Photoshop or any favorite choice program of yours when it comes to image editing.
The picture toolbar.gif that you find in wp-content/plugins/qa/default-templates/js/cleditor/images/toolbar.gif.
The height of this picture needs to be increased from 26px to 35px. Do not touch width, no need for that. I am pretty sure this could have been achieved somehow within the .Js file but not sure how to.
Some changes as you can see.
