|
Welcome,
Guest
|
|
TOPIC: Nested comment's right edge breaks layout
Nested comment's right edge breaks layout 16 years 1 month ago #1049
|
Hi,
When nested comments are enabled they appear with a 40px left margin. style='margin-left:40px;I would like the right edge always in the same position. Can I do this in css template? If not what can I do? 
At http://www.chronoengine.com/home/1-latest/69-chronocomments-released.html there is an example of the comment system which has nested comments (answers to previous comments) and the right edge is always in the same place. |
|
Nested comment's right edge breaks layout 16 years 1 month ago #1091
|
Nested comment's right edge breaks layout 16 years 2 weeks ago #1532
|
Nested comment's right edge breaks layout 16 years 2 weeks ago #1533
|
I've made a little headway in modding the template html and css files, and now I'm stuck... I really should take a class or something to learn how to do this stuff correctly. Anyway, I am sure this is an easy fix... maybe...
This is a test site using Joomla 1.0.15 on a JS Education template. I am using a modified version of the SSlideBoth-emontop theme. I have changed the {form}, {CommentMenu}, and {post} widths to 70% via css. Here is a screenshot of where I am now. 
Here is my css code: #comment img {
border: 0px;
display: inline;
}
#comment .item {
padding: 5px;
}
#comment .hide {
color: #AAAAAA;
}
#comment #CommentMenu {
width: 70%;
margin-top: 5px;
margin-bottom: 5px;
border-bottom: 1px #677791 solid;
border-left : 1px #677791 solid;
border-right : 1px #677791 solid;
}
#comment #CommentMenu .label {
padding-left: 5px;
color: white;
}
#comment #CommentMenu .buttons {
}
#comment #CommentMenu .button{
border-left: white solid 1px;
padding-left: 2px;
padding-right: 2px;
}
#comment #CommentMenu .button a{
color: white;
padding-left: 5px;
padding-right: 5px;
background: url(../images/sectiontableheader.png);
}
#comment #CommentMenu .button a:hover {
background: #1E304E;
background: #0077AA;
}
#comment .sectiontableheader {
height: 15px;
line-height: 15px;
color: white;
padding: 2px;
background: url(../images/sectiontableheader.png);
}
#comment .sectiontableentry1 {
background: #FBFBF5;
margin: 0px;
padding: 0px;
}
#comment .sectiontableentry2 {
background: #F5F5F5;
margin: 0px;
padding: 0px;
}
#comment .postcontainer{
margin-bottom: 5px;
}
#comment .post {
width: 70%;
border-left: 1px #677791 solid;
border-right: 1px #677791 solid;
border-bottom: 1px #677791 solid;
}
#comment .postheader {
color: white;
background: url(../images/head.png);
padding: 2px;
}
#comment .postheader td {
color: white;
height: 15px;
line-height: 15px;
background-image: url(../images/sectiontableheader.png);
}
#comment .postusername {
background-image: url(../images/user.png);
background-repeat: no-repeat;
background-position: 2px -2px;
padding-left: 21px;
}
#comment .postusername a {
color: white;
}
#comment .postusername a:hover {
text-decoration: underline;
}
#comment a.postwebsite:link, #comment a.postwebsite:visited, #comment a.postwebsite:hover {
background: url(../images/html.png) no-repeat;
background-position: 2px -2px;
padding-left: 16px;
font-weight: normal;
white-space: nowrap;
}
#comment .postnotify1 {
background-image: url(../images/mailgreen.jpg);
background-repeat: no-repeat;
padding-left: 16px;
}
#comment .postnotify0 {
background-image: url(../images/mailred.jpg);
background-repeat: no-repeat;
padding-left: 16px;
}
#comment .posttitle {
font-weight: bold;
}
#comment .postusertype {
text-transform: capitalize;
}
#comment .avatarcontainer {
background-image: url(../images/dotv.gif);
background-repeat: repeat-y;
background-position: right top;
}
#comment .avatar {
border: 1px silver solid;
margin-right: 1px;
}
#comment .administrator {
font-weight: bold;
color: white;
}
#comment .postbody td {
color: #505367;
padding: 8px;
text-align: justify;
vertical-align: top;
}
#comment .sectiontableentry1 .postbody {
background: url(../images/body1.gif) repeat-x;
}
#comment .sectiontableentry2 .postbody {
background: url(../images/body2.gif) repeat-x;
}
#comment .createdate {
display: inline; /* AGE */
color: white;
}
#comment .postfooter {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 5px;
padding-right: 5px;
background-image: url(../images/dot.gif);
background-repeat: repeat-x;
background-position: 0px 0px;
}
#comment .form {
width: 70%;
margin-left;auto;
/* border: 1px #677791 solid; */
border-bottom: 1px #677791 solid;
border-left : 1px #677791 solid;
border-right : 1px #677791 solid;
padding: 1px;
margin-bottom: 5px;
margin-top: 10px;
}
#comment #CommentFormTitle {
color: white;
}
#comment .postbody table {
border: 0px;
padding: 2px;
}
#comment .quote {
text-align: center;
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px;
}
#comment .genmed {
color: #505367;
text-align: left;
padding-left: 8px;
padding-bottom: 1px;
}
#comment .quotebody {
color: #505367;
border: 1px #CCCCCC solid;
background: white;
text-align: justify;
padding: 8px;
}
#comment .code .genmed{
padding-left: 29px;
}
#comment .emoticoncontainer {
padding: 5px;
}
#comment .emoticonseparator {
padding: 3px;
}
#comment .emoticon {
}
#comment .buttoncontainer {
float: left;
padding: 8px 5px 5px 5px;
}
#comment .button {
}
#comment .inputbox {
margin: 0px;
}
#comment .select {
width: 82px;
}
#comment .onlyregistered {
padding: 5px;
text-align: center;
font-size: 1.1em;
color: red;
font-weight: bold;
border-top: 1px black solid;
border-bottom: 1px black solid;
background: white;
}
#comment a.voting_yes:link, #comment a.voting_yes:visited {
color: #3C922F;
font-weight: normal;
background: url(../images/voting_yes.png) #EEF9EB no-repeat;
border: 1px outset #3C922F;
padding: 2px 4px 2px 20px;
white-space: nowrap;
float: left;
line-height: 10px;
text-decoration: none;
}
#comment a.voting_yes:hover {
color: #3C922F;
font-weight: normal;
background: url(../images/voting_yes.png) #FFFFFF no-repeat;
border: 1px outset #3C922F;
padding: 2px 4px 2px 20px;
white-space: nowrap;
float: left;
line-height: 10px;
text-decoration: none;
}
#comment a.voting_no:link, #comment a.voting_no:visited {
color: #AE3738;
font-weight: normal;
background: url(../images/voting_no.png) #F9EBEB no-repeat;
border: 1px outset #AE3738;
padding: 2px 4px 2px 20px;
white-space: nowrap;
float: left;
line-height: 10px;
text-decoration: none;
}
#comment a.voting_no:hover {
color: #AE3738;
font-weight: normal;
background: url(../images/voting_no.png) #FFFFFF no-repeat;
border: 1px outset #AE3738;
padding: 2px 4px 2px 20px;
white-space: nowrap;
float: left;
line-height: 10px;
text-decoration: none;
}
#comment .captchacontainer{
float: left;
padding: 5px;
}
#comment .captchainput{
float: left;
margin-top: 1px;
}
#comment #captcha{
border: 1px solid silver;
float: left;
margin-left: 5px;
}
#comment #busy{
padding-left: 5px;
}
#comment #SearchResults a:link, #comment #SearchResults a:visited {
color: #505367;
}
#comment #SearchResults a:hover {
color: black;
}
#comment #SearchResults span {
background: #ffc;
font-weight: bold;
border: 1px solid gray;
}
.comment_preview_container {
border: 1px #677791 solid;
margin: 8px;
}
.comment_preview {
padding: 4px;
text-align: left;
border: 1px #CCCCCC solid;
font-size: 0.9em;
background-color: #F5F5F5;
cursor: hand;
}
.comment_preview:hover {
background-color: white;
}
.comment_preview div {
color: #505367;
padding-left: 4px;
padding-right: 4px;
padding-top: 1px;
padding-bottom: 1px;
}
.comment_preview div:hover {
color: white;
background-color: #253F67;
}Here is my comment template html code: <html>
<head>
<link rel="stylesheet" href="css/css.css" type="text/css" />
</head>
<body>
<div id="comment">
<!-- <<< html code above is just to allow preview of template -->
JOOMLACOMMENT TEMPLATE : SSlide-default
/*-----------------------------------------------------------*/
/*-- only {xxx}{/xxx} blocks are taken in account ---------*/
/*-----------------------------------------------------------*/
{readon}
<div class='write_comment'>
<a href="{READON_LINK}#JOSC_TOP" class="readon">{READON_WRITE_COMMENT} ({READON_COUNT} {READON_COMMENTS})</a>
</div>
{BLOCK-preview}
<div class='comment_preview_container'>
{preview-lines}
</div>
{/BLOCK-preview}
{/readon}
{previewline}
<div class='comment_preview'>
<a href="{PREVIEW_LINK}#josc{id}">{PREVIEW_DATE} <b>{PREVIEW_TITLE}</b></a>
</div>
{/previewline}
{search}
<form name='joomlacommentsearch' method='post'>
<a name='SearchForm'></a>
{_HIDDEN_VALUES}
<table align='left' cellpadding='0' cellspacing='0' class='form'>
<tr>
<td colspan='3' class='sectiontableheader' align='center'>{_JOOMLACOMMENT_SEARCH}</td>
</tr>
<tr class='sectiontableentry1'>
<td class='item'>{_JOOMLACOMMENT_PROMPT_KEYWORD}</td>
<td class='item'><input name='tsearch' type='text' class='inputbox' size='40' /></td>
<td class='item'><input name='bsearch' type='button' class='button' value='{_JOOMLACOMMENT_SEARCH}' onclick='JOSC_search()' /></td>
</tr>
<tr class='sectiontableentry2'>
<td colspan='3' class='item'>
<input type='radio' name='rsearchphrase' onClick='JOSC_rsearchphrase_selection="any"' checked='checked' />{_JOOMLACOMMENT_SEARCH_ANYWORDS}
<input type='radio' name='rsearchphrase' onClick='JOSC_rsearchphrase_selection="all"' />{_JOOMLACOMMENT_SEARCH_ALLWORDS}
<input type='radio' name='rsearchphrase' onClick='JOSC_rsearchphrase_selection="exact"' />{_JOOMLACOMMENT_SEARCH_PHRASE}
</td>
</tr>
</table>
<div style='margin-bottom: 5px;'></div>
</form>
{/search}
{searchresults}
<div id='SearchResults'>
<a name='SearchResults'></a>
<table align='center' cellpadding='0' cellspacing='0' class='form'>
<tr>
<td class='sectiontableheader' align='center'>{resulttitle}</td>
</tr>
{searchresult}
<tr>
<td>
<table width='100%' class='{postclass}' align='center' cellpadding='0' cellspacing='0' class='searchresult'>
<tbody>
<tr class='small'>
<td class='item'>{title} {_JOOMLACOMMENT_BY} {name}</td>
</tr>
<tr class='item'>
<td class='item'><a href='{address}'>{preview}</a></td>
</tr>
<tr class='small'>
<td class='item'>{date}</td>
</tr>
</tbody>
</table>
</td>
</tr>
{/searchresult}
</table>
<div style='margin-bottom: 5px;'></div>
</div>
{/searchresults}
/*-----------------------------------------------------------------------*/
/*-- everything (!) inside body /body are taken in account ---------*/
/*-----------------------------------------------------------------------*/
{body}
<a name='JOSC_TOP'></a>
<div id='JOSC_formpos'>
{form}
<form name='joomlacommentform' method='post' action='{self}'>
<a name='CommentForm'></a>
{_HIDDEN_VALUES}
<table align='left' cellpadding='0' cellspacing='0' class='form'>
<tr>
<td colspan='2'>
<div class='sectiontableheader'>
<table cellpadding='0' cellspacing='0'><tr>
<td align='left'><a href="javascript:JOSC_toogle('JOSCSHstretcherFORM');"><img src="{template_live_site}/images/new.png" alt="+/-" /></a></td>
<td align='left'>
<div id='CommentFormTitle' align='center'>{_WRITECOMMENT}</div>
</td>
</tr></table>
</div>
</td>
</tr>
<tr><td>
<table align='center' width='100%' cellpadding='0' cellspacing='0' id='JOSCSHstretcherFORM'>
<tr class='sectiontableentry1'>
<td><div class='item'>{_ENTERNAME}</div></td>
<td><div class='item'>
<input name='tname' type='text' class='inputbox' size='40' value='{username}' {registered_readonly}/>
</div></td>
</tr>
{BLOCK-_ENTEREMAIL}
<tr class='sectiontableentry1'>
<td><div class='item'>{_ENTEREMAIL}</div></td>
<td><div class='item'>
<input name='temail' type='text' class='inputbox' size='30' value='{email}' {registered_readonly}/>
{notifyselect}
</div></td>
</tr>
{/BLOCK-_ENTEREMAIL}
{BLOCK-_ENTERWEBSITE}
<tr class='sectiontableentry1'>
<td><div class='item'>{_ENTERWEBSITE}</div></td>
<td><div class='item'>
<input name='twebsite' type='text' class='inputbox' size='40' value='{website}'/>
</div></td>
</tr>
{/BLOCK-_ENTERWEBSITE}
<tr class='sectiontableentry1'>
<td><div class='item'>{_ENTERTITLE}</div></td>
<td><div class='item'>
<input name='ttitle' type='text' class='inputbox' size='40'/>
</div></td>
</tr>
{BLOCK-_UBBCode}
<tr id='CommentToolbar' class='sectiontableentry2'>
<td><div class='item'>{_UBBCODE}</div></td>
<td><div class='buttoncontainer'>
<div style='float: left;'> {UBBCodeButtons} </div>
<div style='float: left;'> {UBBCodeSelect} </div>
</div></td>
</tr>
{/BLOCK-_UBBCode}
{BLOCK-emoticons}
<tr class='sectiontableentry1'>
<td> </td>
<td valign='middle'>{emoticons}</td>
</tr>
{/BLOCK-emoticons}
<tr class='sectiontableentry1'>
<td> </td>
<td><div class='item'>
<textarea name='tcomment' class='inputbox' cols='{formareacols}' rows='10'></textarea>
</div></td>
</tr>
<tr>
<td class='sectiontableentry2'>
<table class='buttoncontainer' cellpadding='0' cellspacing='0'>
<tr>
<td><input type='button' class='button' name='bsend' value='{_SENDFORM}' onclick='JOSC_editPost(-1,-1)' /></td>
<td id='JOSC_busy'></td>
</tr>
</table>
</td>
<td class='sectiontableentry2'>
{BLOCK-_CAPTCHATXT}
<table class='captchacontainer' cellpadding='0' cellspacing='0'>
<tr>
<td><input type='text' name='security_try' id='security_try' size='15' maxlength='10' class='captchainput' /></td>
<td>{security_image}</td>
</tr>
</table>
{/BLOCK-_CAPTCHATXT}
</td>
</tr>
{BLOCK-_CAPTCHATXT}
<tr class='sectiontableentry2'>
<td><div class='item'>
</div></td>
<td><div class='itemsmall'>{_CAPTCHATXT}</div></td>
</tr>
{/BLOCK-_CAPTCHATXT}
</table>
</td></tr>
</table>
</form>
{/form}
</div>
{menu}
<table align='left' class='sectiontableheader' id='CommentMenu' width='100%' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td align='left' class='label'><a href="javascript:JOSC_toogle('JOSCSHstretcherPOST');"><img src="{template_live_site}/images/expandall.png" alt="+/-" /></a> {_JOOMLACOMMENT_COMMENTS_TITLE}</td>
<td align='right' class='buttons'>
<table cellpadding='0' cellspacing='0' border='0'>
<tr>
{BLOCK-add_new}
<td class='button'><a id='_JOOMLACOMMENT_ADDNEW' href='javascript:JOSC_afterAjaxResponse("show");{BUTTON_ADDNEW_js}'>{_JOOMLACOMMENT_ADDNEW}</a></td>
{/BLOCK-add_new}
{BLOCK-delete_all}
<td class='button'><a id='_JOOMLACOMMENT_DELETEALL' href='javascript:{BUTTON_DELETEALL_js}'>{_JOOMLACOMMENT_DELETEALL}</a></td>
{/BLOCK-delete_all}
{BLOCK-search}
<td class='button'><a id='_JOOMLACOMMENT_SEARCH' href='javascript:{BUTTON_SEARCH_js}'>{_JOOMLACOMMENT_SEARCH}</a></td>
{/BLOCK-search}
{BLOCK-rss}
<td class='button'><a id='_JOOMLACOMMENT_RSS' href='{BUTTON_RSS_URL}'>{_JOOMLACOMMENT_RSS}</a></td>
{/BLOCK-rss}
</tr>
</table>
</td>
</tr>
</table>
{/menu}
<!-- SLIDE COMMENTS BOARD -->
<table width='100%' cellpadding='0' cellspacing='0' id='JOSCSHstretcherPOST'>
<tr>
<td align='center'>
<table align='center' id='CommentPageNav' width='100%' cellpadding='0' cellspacing='0' border='0'>
<tr><td>
{pagenav}
<!-- here will be inserted the page nav -->
{/pagenav}
</td><td id='JOSC_busypage'></td></tr>
</table>
{post}
<table class='postcontainer' id='post{id}' width='100%' cellpadding='0' cellspacing='0' style='margin-left:{wrapnum};'><!-- style='padding-left:{wrapnum};'> -->
<tr>
<td><a name='josc{id}'></a>
<table class='post' width='100%' cellpadding='0' cellspacing='0'>
<tbody class='{postclass}'>
<tr>
<td><table class='postheader' width='100%' cellpadding='0' cellspacing='0'>
<tr>
<td align='left'>
<span class='postusername'>{username}</span>
{BLOCK-title} - <span class='posttitle'>{title}</span>{/BLOCK-title}
</td>
<td align='right'>
{BLOCK-website}{website}{/BLOCK-website}
{notify}
{BLOCK-usertype}|<span class='postusertype'>{usertype}</span>{/BLOCK-usertype}
|<span class='createdate'>{date}</span>
</td>
</tr>
</table></td>
</tr>
<tr>
<td colspan='2'><table class='postbody' width='100%' cellpadding='0' cellspacing='0'>
<tr>
{BLOCK-avatar_picture}<td class='avatarcontainer' width='1' align='center'>{avatar_picture}</td>{/BLOCK-avatar_picture}
<td style='overflow: hidden;'>{content}</td>
</tr>
</table></td>
</tr>
{BLOCK-footer}
<tr>
<td><table class='postfooter' width='100%' cellpadding='0' cellspacing='0'>
<tr>
<td align='left'>{editbuttons}</td>
<td align='right'>{voting}</td>
</tr>
</table></td>
</tr>
{/BLOCK-footer}
</tbody>
</table>
</td>
</tr>
</table>
{/post}
{poweredby}
<!-- powered by will be inserted here.
to hide, please do not delete. Just set in css #poweredby { display:none; }
-->
{/poweredby}
</td>
</tr></table>
<script type="text/javascript">
function JOSC_afterAjaxResponse(action) {
switch(action) {
case 'show':
case 'response_reply':
case 'response_edit':
case 'response_quote':
JOSC_ShowHide('','JOSCSHstretcherFORM',''); /* open */
return 0;
break;
case 'hide':
case 'response_editpost':
case 'response_posted':
case 'response_approval':
JOSC_ShowHide('','',"JOSCSHstretcherFORM"); /* hide */
return 0;
break;
case 'hidePOST':
JOSC_ShowHide('','',"JOSCSHstretcherPOST"); /* hide */
return 0;
break;
default:
return 0;
}
}
if (window.document.URL.indexOf("#josc")<0)
JOSC_afterAjaxResponse("hidePOST");
if (window.document.URL.indexOf("#CommentForm")<0)
JOSC_afterAjaxResponse("hide");
</script>
{/body}
<!-- >>> html code below is just to allow preview of template -->
</div>
</body>
</html>I'd love to make this work. This would be useful for others as well, at least until the nested comments problem is solved. Thanks for any help. |
|
Nested comment's right edge breaks layout 16 years 2 weeks ago #1536
|
Latest update...
I'm testing with the mySSlideBoth-emontop template using the css.css file for styling. This can be seen at http://philmontforum.com/10test/cms/index.php?option=com_content&task=view&id=1&Itemid=1#josc18 . Here is what I have so far: 
To control the width of the individual comment tables, I added width: 80%; to the #comment .postcontainer css. I added a <div align="left> and the closing </div> to the {post} section of the theme html. Both of the current index.html and css.css files are in the zip file attached for your inspection. This is a sledge hammer fix. I'd love an elegant solution to this that had all comments flush on the right side as they should be. I think I've reached my limits... I still think that this could be controlled somehow utilizing the {wrapnum} value in either the table width or in the css (don't know if you can use the value in the css file - I doubt it). mySSlideBoth_emontop.zip |
|
Nested comment's right edge breaks layout 16 years 1 week ago #1576
|
Nested comment's right edge breaks layout 16 years 1 week ago #1580
|
|
Time to create page: 0.150 seconds
