Layout Modification - Which file and how?

[3rsaku]

Currently, my layout for Jcomments using Roundbox template looks like...



I would like to rearrange the text for Name, E-mail, the box for captcha as in gk_style Jcomments template. By this way, some vertical space is reduced in the page. My comments section with gk_style template.



Which files I need to modify? if it is the css file,

The css code of round box,

Code:

/* Comment form */
#comments-form, #comments-form p, #comments-report-form, #comments-report-form p, #comments-form .comments-policy, #comments-form span, #comments-form .counter {text-align: left;text-decoration: none;text-transform: none;text-indent: 0}
#comments-form p, #comments-report-form p, #comments-form span, #comments-form .counter {color: #777;font: normal 1em Verdana, Arial, Sans-Serif}
#comments-form p, #comments-form #comments-form-buttons, #comments-form #comments-form-error {font: normal 1em Verdana, Arial, Sans-Serif;margin-left: 20px !important;margin-top: 10px;margin-bottom: 8px;overflow: hidden;padding: 0}

#comments-inline-edit {border: 2px solid #41A317;margin: 5px 0 0 0;background: #fff;padding:12px;-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;}
#comments-inline-edit #comments-form p, #comments-inline-edit #comments-form #comments-form-buttons,
#comments-inline-edit #comments-form-error {font: normal 1em Verdana, Arial, Sans-Serif;margin-left: 5px !important;margin-left: 5px;margin-top: 5px;margin-bottom: 2px;padding: 0}

#comments-form div.comments-policy {color: #777; background-color: inherit; border: 1px dotted #ccc; margin-left: 20px !important; margin-left: 20px; margin-top: 5px; margin-bottom: 5px; padding: 5px}
#comments-form div.comments-policy ol, #comments-form div.comments-policy ul {margin: 0;padding: 5px 0 0 20px;line-height: 5px}
#comments-form div.comments-policy ol li,
#comments-form div.comments-policy ul li {font: normal 1em Verdana, Arial, Sans-Serif; margin: 0;padding: 0;border: none;line-height: 5px}

#comments-form img.smile {margin: 0 3px 3px 0;padding: 0;border: none;cursor: pointer}
#comments-form img.captcha {padding: 0;margin: 0 0 3px 0;border: 1px solid #ccc}
#comments-form span.captcha {padding: 0 0 0 12px; color: #777; background: url(images/jc_refreshg.gif) no-repeat 0 2px;cursor: pointer}
#comments-form label, #comments-report-form label {color: #777; background-color: inherit; line-height: 1.5em; padding: 0; margin: 0; vertical-align: middle}
#comments-form input, #comments-report-form input, #comments-form textarea {color: #444; background-color: #fff; padding: 0; border: 1px solid #1C64A5}
#comments-form input {width: 170px;margin-bottom: 2px;height: 1.5em}
#comments-form input.selected, #comments-form textarea.selected {color: #777;background-color: #ffffe0;border: 1px solid #1C64A5}
#comments-form input.error, #comments-form textarea.error {border: 1px solid #f00;text-decoration:none;text-transform:none;background-color: #ffffe0}

#comments-form input.checkbox {width: 16px; line-height: 1.5em; padding: 0; margin: 0; vertical-align: middle; border: none}
#comments-form input.captcha {width: 116px; margin: 3px 0 5px 0}
#comments-form textarea {max-width: 400px !important;width: 350px;margin:0}

#comments-form-message {padding: 5px 5px 5px 25px;margin-right: 5px;display: block}
.comments-form-message-error {background: #FFD86F url(images/jc_error.gif) no-repeat 4px 50%}
.comments-form-message-info {background: #DFEEFF url(images/jc_info.gif) no-repeat 4px 50%}

#comments-form .counterpanel {height:13px;display:block;overflow:hidden;color: #ccc;padding: 0;margin:0;border:1px solid #ddd;border-top-width:0;max-width: 400px !important;width: 350px;background-color: #eee}

#comments-form .grippie {height:13px;display:block;overflow:hidden;color: #ccc;padding: 0;margin:0;border:1px solid #ddd;border-top-width:0;max-width: 400px !important;width: 350px;cursor:s-resize;background: #eee url(images/resize.gif) no-repeat right center}
#comments-form .grippie .counter {font-size: 10px;padding: 0; margin: 0}
#comments-form .grippie span {display:block;float:left}
#comments-form .grippie span span {display:inline;float:none}

#comments-form .btn, #comments-report-form .btn {float: left}
#comments-form .btn a, #comments-report-form .btn a {font-size: 12px;color: #FFF;border: 1px solid #1C64A5; background: #1C64A5; margin-right: 6px;padding:3px 6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;display:inline-block;text-decoration:none}
#comments-form .btn a:hover , #comments-report-form .btn a:hover {color: #1C64A5;background: #FFF}
#comments-form-smilespanel {display: none;cursor: pointer;padding: 2px;max-width: 200px;background-color: #fff;border: 1px solid #ccc;overflow: auto;left: 0;top: 0;position:absolute}
#comments-footer, #comments-footer a {color: #ccc !important; background-color: inherit; font: normal 9px Verdana, Arial, Sans-Serif !important}
#comments-footer {display: block;height: 14px;border-top: 1px solid #1C64A5;padding-top: 1px;margin-top: 4px;text-align: right}
#comments-footer a {text-decoration: none !important;text-transform: none;padding: 0;margin: 0;border: none !important;float: right; background: none !important}
#comments-footer a:first-letter {font-weight:700;color: #1C64A5;}

and GK_STYLE is

Code:

#comments-form label { clear:both; display:block; }
#comments-form p { float:left; margin:0 20px 0 0; }
.clearbox,
 #comments-form-buttons { clear:both; float: none !important }
.clearbox label { display: inline !important }
#comments-form p,
 #comments-form span,
 #comments-form .counter { color: #888; }
#comments-form p,
 #comments-form #comments-form-error { margin: 8px 20px 20px 0; padding: 0 }
#comments-inline-edit { border: 1px solid #3d3d3d; margin: 5px 0 0 0; background: #2d2d2d }
#comments-form #comments-form-buttons { margin-left: 0 !important; margin-top: 10px; margin-bottom: 8px; }
#comments-form #comments-form-cancel a { float: left }
#comments-inline-edit #comments-form p,
 #comments-inline-edit #comments-form #comments-form-buttons,
 #comments-inline-edit #comments-form-error { margin: 5px 5px 2px; }
#comments-form div.comments-policy { color: #777; background-color: inherit; border: 1px dotted #3d3d3d; margin-left: 0 !important; margin-left: 0; margin-top: 5px; margin-bottom: 5px; padding: 5px }
#comments-form div.comments-policy ol,
 #comments-form div.comments-policy ul { margin: 0; padding: 5px 0 0 20px; line-height: 5px }
#comments-form div.comments-policy ol li,
 #comments-form div.comments-policy ul li { margin: 0; padding: 0; border: none; line-height: 5px }
#comments-form img.smile { margin: 0 3px 3px 0; padding: 0; border: none; cursor: pointer }
#comments-form img.captcha { padding: 0; margin: 0 20px 3px 0; border: 1px solid #D6D4D1; height: 40px; float: left; }
#comments-form span.captcha { padding: 0 0 0 12px; color: #666; background: url('images/jc_refreshg.gif') no-repeat 0 2px; cursor: pointer; }
#comments-form label { }
#comments-form input,
 #comments-form textarea { padding: 0; border: 1px solid #D6D4D1; }
#comments-form input { width: 130px; margin-bottom: 2px; padding: 2px 6px; }
#comments-form input.selected,
 #comments-form textarea.selected { color: #777; background-color: #FFFEF4; border: 1px solid #EAE8CC }
#comments-form input.error,
 #comments-form textarea.error { border: 1px solid #f00; text-decoration:none; text-transform:none; background-color: #ffffe0 }
#comments-form input.checkbox { width: 16px; line-height: 1.5em; padding: 0; margin: 0; vertical-align: middle; border: none }
#comments-form input.captcha { width: 116px; padding: 7px 10px; margin: 0 0 5px 0 }
#comments-form textarea { margin:0; width:97%; }
#comments-form #comments-form-message,
 #comments-inline-edit #comments-form-message { padding: 5px; margin-right: 5px; display: block; font-weight: bold; }
.comments-form-message-error { background: #BF0000; color: #fff }
.comments-form-message-info { background: #333; color: #fff }
#comments-form .counterpanel { height:13px; display:block; overflow:hidden; color: #ccc; padding: 0; margin:0; border:1px solid #ddd; border-top-width:0; max-width: 400px !important; width: 350px; background-color: #eee }
#comments-form .grippie { float: left; font-size: 90%; margin: 6px 0; }
#comments-form .grippie .counter { float: none; background: none!important; color: #bbb; }
#comments-form .grippie .counter span { background: none!important; padding: 0; color: #bbb; }
#comments-form .btn,
#comments-report-form .btn { float: left; margin-right: 5px }
#comments-form .btn div,
#comments-report-form .btn div { margin:0 -1px 0 0; float: left;}
#comments-form-send .readon {padding: 2px 7px;}
#comments-form-smilespanel { display: none; cursor: pointer; padding: 2px; max-width: 200px; background-color: #fff; border: 1px solid #ccc; overflow: auto; left: 0; top: 0; position:absolute; z-index: 999999 !important; }
#comments-form-smilespanel { display: none; cursor: pointer; padding: 2px; max-width: 200px; background-color: #fff; border: 1px solid #ccc; overflow: auto; left: 0; top: 0; position:absolute }

#comments-footer,
 #comments-footer a { color: #c3c0bc!important; font-size: 90%; }
#comments-footer { display: block; height: 14px; padding-top: 3px; margin: 20px 0 0; text-align: center; border-top: 1px dotted #D6D4D1; }
/* Pagination */

Thank you for the suggestion.

[smart]

You need to edit file /components/com_jcoments/tpl/deafult/tpl_form.php and change the form layout as you need.