White text boxes disappear on individual news posts

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

White text boxes disappear on individual news posts

Postby Lutztoons » May 19th, 2018, 1:51 pm

Hi, help desk.

I'm having trouble with the CSS for my site's news. On my news/welcome page, it displays the white text box so that you can read the print, but when you actually click on the individual news posts to read/post comments, the text box disappears and the black text is impossible to read against the dark background. I'm not sure how to fix it.

It looks like this:

Image

Here's the HTML for my news archive, if that's the correct section to edit. Thanks!
Spoiler! :
CODE: SELECT ALL
<!-- Begin .post -->
<a name="{POST_ID}"></a>

<h2>{POST_DATE}</h2>
<h3>{POST_TITLE}</h3>
<p>{POST_CONTENT}</p>
<p><em>posted by <a href="{AUTHOR_PROFILE_URL}" target="_profile">{POST_AUTHOR}</a> @ {POST_DATE}</em> &nbsp; <a href="#">{COMMENT_COUNT} comments</a></p>

<!-- End .post -->
<table>
<tr><td>
<!-- BEGIN switch_comments -->
<h1>Comments:</h1>
<!-- END switch_comments -->

<!-- BEGIN loop_comments -->
<h1>
<!-- BEGIN switch_user_can_edit -->
<a href="{loop_comments.EDIT_LINK}" onClick="var new_window = window.open('{loop_comments.EDIT_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">Edit</a>
<!-- END switch_user_can_edit -->
<!-- BEGIN switch_user_can_delete -->
<a href="{loop_comments.DELETE_LINK}" onClick="var new_window = window.open('{loop_comments.DELETE_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">Delete</a>
<!-- END switch_user_can_delete -->
<a href="{loop_comments.POSTER_PROFILE_URL}" target="_profile">{loop_comments.NAME}</a>, {loop_comments.DATE_POSTED}</h1>
<p>
<!-- BEGIN switch_poster_avatar -->
<img src="{loop_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_comments.POSTER_AVATAR_IMG_WIDTH}" />
<!-- END switch_poster_avatar -->
<b>{loop_comments.POST_TITLE}</b>
{loop_comments.MESSAGE}
</p>
<!-- END loop_comments -->

<h1><a href="/newscomment.php?cid={POST_ID}" onClick="var new_window = window.open('/newscomment.php?cid={POST_ID}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">Post A Comment</a></h1>

</td></tr></table>
User avatar
Lutztoons
 
Posts: 47
Joined: March 6th, 2018, 7:44 pm
Location: Central Illinois

Re: White text boxes disappear on individual news posts

Postby eishiya » May 19th, 2018, 3:42 pm

Please use the "code" BBCode instead of the "spoiler" BBCode to post code snippets, it formats it better.

Looks like your news archive code is completely different from the welcome page code D8
Also, what is that "CODE: SELECT ALL" but? Looks like you copy+pasted the code from some forum post, incorrectly xP Get rid of that.

Wrap the whole thing with
Code: Select all
<div class="comment">
....
</div>

to give it the same background it has on the welcome page. However, this isn't enough to get it looking the same as on the welcome page, because none of the other news styles are being applied due to the codes being so mismatched.

Here's my crappy attempt at making the stuff match (no promises):

Code: Select all
<div class="comment">
<!-- Begin .post -->
<div class="news commentheader">
<a name="{POST_ID}"></a>
<h4>{POST_DATE}</h4>
<h2>{POST_TITLE}</h2>
</div>
<div class="commentcontent">
<p>{POST_CONTENT}</p>
</div>
<div class="commentheader"><em>posted by <a href="{AUTHOR_PROFILE_URL}" target="_profile">{POST_AUTHOR}</a> @ {POST_DATE}</em> &nbsp; <a href="#">{COMMENT_COUNT} comments</a></div>

<!-- End .post -->
<table>
<tr><td>
<!-- BEGIN switch_comments -->
<h1>Comments:</h1>
<!-- END switch_comments -->

<!-- BEGIN loop_comments -->
<h1>
<!-- BEGIN switch_user_can_edit -->
<a href="{loop_comments.EDIT_LINK}" onClick="var new_window = window.open('{loop_comments.EDIT_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">Edit</a>
<!-- END switch_user_can_edit -->
<!-- BEGIN switch_user_can_delete -->
<a href="{loop_comments.DELETE_LINK}" onClick="var new_window = window.open('{loop_comments.DELETE_LINK}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">Delete</a>
<!-- END switch_user_can_delete -->
<a href="{loop_comments.POSTER_PROFILE_URL}" target="_profile">{loop_comments.NAME}</a>, {loop_comments.DATE_POSTED}</h1>
<p>
<!-- BEGIN switch_poster_avatar -->
<img src="{loop_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_comments.POSTER_AVATAR_IMG_WIDTH}" />
<!-- END switch_poster_avatar -->
<b>{loop_comments.POST_TITLE}</b>
{loop_comments.MESSAGE}
</p>
<!-- END loop_comments -->

<h1><a href="/newscomment.php?cid={POST_ID}" onClick="var new_window = window.open('/newscomment.php?cid={POST_ID}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">Post A Comment</a></h1>

</td></tr></table>
</div>


I haven't touched the comments, but I think they need redoing, as they currently have no structure to style. They're also in a table for some unknown reason, all contained in a single cell. Did you grab this code from some unrelated template? You could use the same structure that you have for comic page comments. If you post your Comic Page code, I could help you adapt them to work on the news page.
Image
User avatar
eishiya
 
Posts: 9454
Joined: December 5th, 2009, 11:17 am

Re: White text boxes disappear on individual news posts

Postby Lutztoons » May 19th, 2018, 4:00 pm

Thank you for your help! I copypasted your code into the news archive editing page and it did make the white text boxes appear, but it still shows up as one long page with weirdly huge edit/delete links and no option to reply to comments.

Image

You might be surprised, but that was the original code that came with the template! I did nothing to it. I didn't even notice that anything was wrong until one of my readers kindly pointed it out. I mean, unless I copypasted it from some weird forum and forgot I did it. Seems like something I'd do. :mrgreen:

Here is my comic page code:

Code: Select all
<div id="title"><h2>{COMIC_TITLE}</h2>
<h4>posted {COMIC_POST_DATE}</h4></div>
</div>

<!-- BEGIN comic_image -->

{comic_image.FORMATTED}

<!-- END comic_image -->

<div id="wrap">
<div id="contentwrap">

   <div id="comicnavigation">
      <ul class="comicnav">
      <li><a href="{NAV_FIRST}" title="first page">&lt;&lt; first</a></li>
      <li><a href="{NAV_PREV}" title="previous page">&lt; previous</a></li>   
      <li><a href="{NAV_NEXT}" title="next page">next &gt;</a></li>
      <li><a href="{NAV_LAST}" title="latest page">last &gt;&gt;</a></li>
      </ul>
   </div>
   
   {JUMPBOX_FORMATTED}
   
   <div id="rating">
   <script language="JavaScript" type="text/javascript">build_vote();</script>
   <br />average rating: <em>{AVERAGE_RATING}</em>
   </div>
   
   <div class="post">
   <a href="/postcomment.php?cid={COMIC_ID}" onclick="var new_window = window.open('/postcomment.php?cid={COMIC_ID}', 'sj_comment', 'height=350, width=420'); new_window.focus(); return false;" title="post a comment">post a comment</a>
   </div>

<style>
.rating, .post, .permalinks {
margin-top: 10px;
background: #ffffff;
opacity: 0.95;
-moz-opacity: 0.95;
filter: alpha(opacity=95);
font: 1.8em lucida grande, lucida sans unicode, verdana, sans-serif;
}

.comment:hover, .rating:hover, .post:hover, .permalinks:hover {
opacity: 1.0;
-moz-opacity: 1.0;
filter: alpha(opacity=100);
}

</style>   
   <style type="text/css">
      .comment_wrapper.reply {
         margin-left: 10px;
      }
   
   </style>

   <!-- BEGIN switch_author_comments -->
   <div class="commentheadings"><h5>author comments</h5></div>
   <!-- END switch_author_comments -->

   <!-- BEGIN loop_author_comments -->
   <div class="comment_wrapper {loop_author_comments.REPLY_CLASS}">
   
      <div class="comment">
   
         <!-- BEGIN switch_poster_no_avatar -->
         <!-- END switch_poster_no_avatar -->
      
         <!-- BEGIN switch_poster_avatar -->
         <a href="{loop_author_comments.POSTER_PROFILE_URL}" title="{loop_author_comments.NAME}"><img class="avatar" src="{loop_author_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_author_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_author_comments.POSTER_AVATAR_IMG_WIDTH}" alt="view {loop_author_comments.NAME}'s profile" /></a>
         <!-- END switch_poster_avatar -->
      
         <div class="commentheader">
            <h4>{loop_author_comments.DATE_POSTED}</h4>
            <h2><a href="{loop_author_comments.POSTER_PROFILE_URL}" title="{loop_author_comments.NAME}">{loop_author_comments.NAME}</a></h2>
         </div>
         
         <div class="commentcontent">
      
            <h3>{loop_author_comments.POST_TITLE}</h3>
      
            <a href="{loop_author_comments.REPLY_LINK}" onclick="var new_window = window.open('{loop_author_comments.REPLY_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">reply</span></a>
            <!-- BEGIN switch_user_can_edit -->
            | <a href="{loop_author_comments.EDIT_LINK}" onclick="var new_window = window.open('{loop_author_comments.EDIT_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">edit comment</span></a>
            <!-- END switch_user_can_edit -->
            <!-- BEGIN switch_user_can_delete -->
            | <a href="{loop_author_comments.DELETE_LINK}" onclick="var new_window = window.open('{loop_author_comments.DELETE_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">delete comment</span></a>
            <!-- END switch_user_can_delete -->
      
            <p>{loop_author_comments.MESSAGE}</p>
         
         </div>
         
         <div class="commentheader">end transmission</div>
      
      </div>
   
      {loop_author_comments.COMMENT_REPLIES}
      
   </div>
   <!-- END loop_author_comments -->
   
   <!-- BEGIN switch_user_comments -->
   <div class="commentheadings"><h5>user comments</h5></div>
   <!-- END switch_user_comments -->
   
   <!-- BEGIN loop_user_comments -->
   <div class="comment_wrapper {loop_user_comments.REPLY_CLASS}">
   
      <div class="comment">
   
         <!-- BEGIN switch_poster_no_avatar -->
         <!-- END switch_poster_no_avatar -->
      
         <!-- BEGIN switch_poster_avatar -->
         <a href="{loop_user_comments.POSTER_PROFILE_URL}" title="{loop_user_comments.NAME}"><img class="avatar" src="{loop_user_comments.POSTER_AVATAR_IMG_SRC}" height="{loop_user_comments.POSTER_AVATAR_IMG_HEIGHT}" width="{loop_user_comments.POSTER_AVATAR_IMG_WIDTH}" alt="view {loop_user_comments.NAME}'s profile" /></a>
         <!-- END switch_poster_avatar -->
      
         <div class="commentheader">
            <h4>{loop_user_comments.DATE_POSTED}</h4>
            <h2><a href="{loop_user_comments.POSTER_PROFILE_URL}" title="{loop_user_comments.NAME}">{loop_user_comments.NAME}</a></h2>
         </div>
         
         <div class="commentcontent">
      
            <h3>{loop_user_comments.POST_TITLE}</h3>
            
            <a href="{loop_user_comments.REPLY_LINK}" onclick="var new_window = window.open('{loop_user_comments.REPLY_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">reply</span></a>
            
            <!-- BEGIN switch_user_can_edit -->
            | <a href="{loop_user_comments.EDIT_LINK}" onclick="var new_window = window.open('{loop_user_comments.EDIT_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">edit comment</span></a>
            <!-- END switch_user_can_edit -->
            
            <!-- BEGIN switch_user_can_delete -->
            | <a href="{loop_user_comments.DELETE_LINK}" onclick="var new_window = window.open('{loop_user_comments.DELETE_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">delete comment</span></a>
            <!-- END switch_user_can_delete -->
      
            <p>{loop_user_comments.MESSAGE}</p>
         
         </div>
         
         <div class="commentheader">end transmission</div>
      
      </div>
         
      {loop_user_comments.COMMENT_REPLIES}
         
   </div>
   <!-- END loop_user_comments -->
   
   <div class="post">
   <a href="/postcomment.php?cid={COMIC_ID}" onclick="var new_window = window.open('/postcomment.php?cid={COMIC_ID}', 'sj_comment', 'height=350, width=420'); new_window.focus(); return false;" title="post a comment">post a comment</a>
   </div>
</div>


Once again, thank you!
User avatar
Lutztoons
 
Posts: 47
Joined: March 6th, 2018, 7:44 pm
Location: Central Illinois

Re: White text boxes disappear on individual news posts

Postby eishiya » May 19th, 2018, 4:28 pm

I just noticed this thread's in New Questions. After your next reply, I'll move it to Template Development & Support, which is the place for all template-related questions.

The single long page plus awful comments are what was there, I didn't break anything xP What template is/was this originally? I'm not terribly surprised that their News page was a crappy afterthought though, hardly anyone uses the News feature.

Here's the adjusted code. Looks like the page and news comment code is identical, except on the news page, the loop it called "loop_comments", no "user" or "author" in the name.
Code: Select all
<div class="comment">
<!-- Begin .post -->
<div class="news commentheader">
<a name="{POST_ID}"></a>
<h4>{POST_DATE}</h4>
<h2>{POST_TITLE}</h2>
</div>
<div class="commentcontent">
<p>{POST_CONTENT}</p>
</div>
<div class="commentheader"><em>posted by <a href="{AUTHOR_PROFILE_URL}" target="_profile">{POST_AUTHOR}</a> @ {POST_DATE}</em> &nbsp; <a href="#">{COMMENT_COUNT} comments</a></div>
<!-- End .post -->
</div>

<!-- BEGIN switch_comments -->
<div class="commentheadings"><h5>comments</h5></div>
<!-- END switch_comments -->

<!-- BEGIN loop_comments -->
<div class="comment_wrapper {loop_comments.REPLY_CLASS}">

  <div class="comment">     
    <!-- BEGIN switch_poster_avatar -->
    <a href="{loop_comments.POSTER_PROFILE_URL}" title="{loop_comments.NAME}"><img class="avatar" src="{loop_comments.POSTER_AVATAR_IMG_SRC}" /></a>
    <!-- END switch_poster_avatar -->
    <div class="commentheader">
      <h4>{loop_comments.DATE_POSTED}</h4>
      <h2><a href="{loop_comments.POSTER_PROFILE_URL}" title="{loop_comments.NAME}">{loop_comments.NAME}</a></h2>
    </div>
   
    <div class="commentcontent">
      <h3>{loop_comments.POST_TITLE}</h3>
      <a href="{loop_comments.REPLY_LINK}" onclick="var new_window = window.open('{loop_comments.REPLY_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">reply</span></a>
      <!-- BEGIN switch_user_can_edit -->
      | <a href="{loop_comments.EDIT_LINK}" onclick="var new_window = window.open('{loop_comments.EDIT_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">edit comment</span></a>
      <!-- END switch_user_can_edit -->

      <!-- BEGIN switch_user_can_delete -->
      | <a href="{loop_comments.DELETE_LINK}" onclick="var new_window = window.open('{loop_comments.DELETE_LINK}', 'sj_comment', 'height=340, width=420'); new_window.focus(); return false;"><span class="editdelete">delete comment</span></a>
      <!-- END switch_user_can_delete -->

      <p>{loop_comments.MESSAGE}</p>
    </div>
    <div class="commentheader">end transmission</div>
  </div>
  {loop_comments.COMMENT_REPLIES}
</div>
<!-- END loop_comments -->

<div class="post"><a href="/newscomment.php?cid={POST_ID}" onClick="var new_window = window.open('/newscomment.php?cid={POST_ID}', 'sj_comment', 'height=320, width=420'); new_window.focus(); return false;">Post A Comment</a></div>

I can't test this code since I don't have your template, so please tell me if anything's wrong!

There's some CSS in your Comic Page that affects the styling of the comment replies and other things. This styling will need to be moved off the Comic Page template and into your overall CSS in Overall Layout if you want it to also affect the news archive. This is the Comic Page CSS in question:
Code: Select all
<style>
.rating, .post, .permalinks {
margin-top: 10px;
background: #ffffff;
opacity: 0.95;
-moz-opacity: 0.95;
filter: alpha(opacity=95);
font: 1.8em lucida grande, lucida sans unicode, verdana, sans-serif;
}

.comment:hover, .rating:hover, .post:hover, .permalinks:hover {
opacity: 1.0;
-moz-opacity: 1.0;
filter: alpha(opacity=100);
}

</style>   
   <style type="text/css">
      .comment_wrapper.reply {
         margin-left: 10px;
      }
   
   </style>
Image
User avatar
eishiya
 
Posts: 9454
Joined: December 5th, 2009, 11:17 am

Re: White text boxes disappear on individual news posts

Postby Lutztoons » May 19th, 2018, 5:20 pm

It worked!! Thanks so much for your help! I moved the CSS to "overall" and everything is shipshape now.

I used the template "In Silence." And yeah, the "news" code is stunningly awful. It was such a slapdash job. I am planning on using the news feature to notify people of update schedules, convention appearances and whatnot, so thank you for your help! It's nice that people can actually READ my blog posts now! :mrgreen:

Edit to avoid doubleposting:

I just now noticed that the replies to comments on the "news" page don't indent underneath the parent reply.
User avatar
Lutztoons
 
Posts: 47
Joined: March 6th, 2018, 7:44 pm
Location: Central Illinois

Re: White text boxes disappear on individual news posts

Postby eishiya » May 19th, 2018, 5:40 pm

As I recall, the news comment code never got updated with REPLY_CLASS, so there's no way to make news comments indent. However, the code I gave you does include REPLY_CLASS, so when the system is updated, your layout will be ready for it and comments will indent :D


In Silence has a pretty decent news page. I'm not sure, but I think I might've been the person who wrote the current version a while back. Are you perhaps using a version of the layout that's older than a couple of years?
Image
User avatar
eishiya
 
Posts: 9454
Joined: December 5th, 2009, 11:17 am

Re: White text boxes disappear on individual news posts

Postby Lutztoons » May 19th, 2018, 5:43 pm

Thank you! :mrgreen:
User avatar
Lutztoons
 
Posts: 47
Joined: March 6th, 2018, 7:44 pm
Location: Central Illinois


Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 4 guests