Uploaded image for project: 'phpBB'
  1. phpBB
  2. PHPBB-6632

Better viewing of topics for wide screen displays

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Won't Fix
    • Icon: Minor Minor
    • 3.0.11-RC1
    • 3.0.RC8
    • Viewing forums
    • None
    • PHP Environment: 5.2.3
      Database: MySQL 5.0.45

      I came up with what I consider a better version for fixing/improving the dynamic topic name with static width posts, topics, views, posted by width issue fields. This in no way changes the functionality of the site, it only adjusts the template for better with scree support (> 1024px across)

      Update CSS fields

      dd.posts, dd.topics, dd.views {
      /*	width: 8%; */ Removed
      	width: 70px; */ Added
      	text-align: center;
      	line-height: 2.2em;
      	font-size: 1.2em;
      }

      dd.lastpost {
      /*	width: 25%; */ Removed
      	width: 230px; */ Added
      	font-size: 1.1em;
      }

      ul.topiclist dt {
      	display: block;
      	float: left;
      	width: 50%;
      	font-size: 1.1em;
      	padding-left: 5px;
      	padding-right: 5px;
      	margin-right: -425px; */ Added
      }

      li.header dt {
      	font-weight: bold;
      	margin-right: -425px;  */ Added
      }

      Replace/update in viewforum_body.html

      <dt><!-- IF S_DISPLAY_ACTIVE -->{L_ACTIVE_TOPICS}<!-- ELSEIF topicrow.S_TOPIC_TYPE_SWITCH and topicrow.S_TOPIC_TYPE gt 1 -->{L_ANNOUNCEMENTS}<!-- ELSE -->{L_TOPICS}<!-- ENDIF --></dt>
       

      With

      <dt><div id="topictext"><!-- IF S_DISPLAY_ACTIVE -->{L_ACTIVE_TOPICS}<!-- ELSEIF topicrow.S_TOPIC_TYPE_SWITCH and topicrow.S_TOPIC_TYPE gt 1 -->{L_ANNOUNCEMENTS}<!-- ELSE -->{L_TOPICS}<!-- ENDIF --></div></dt>


      And replace

      <dt style="<!-- IF topicrow.TOPIC_ICON_IMG and S_TOPIC_ICONS -->background-image: url({T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{topicrow.TOPIC_FOLDER_IMG_ALT}">
      		<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>
      		<!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED --><a href="{topicrow.U_MCP_QUEUE}">{topicrow.UNAPPROVED_IMG}</a> <!-- ENDIF -->
      		<!-- IF topicrow.S_TOPIC_REPORTED --><a href="{topicrow.U_MCP_REPORT}">{REPORTED_IMG}</a><!-- ENDIF --><br />
      		<!-- IF topicrow.PAGINATION --><strong class="pagination"><span>{topicrow.PAGINATION}</span></strong><!-- ENDIF -->
      		<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} {L_POSTED_ON_DATE} {topicrow.FIRST_POST_TIME} 
      	</dt>

      With

      <dt style="<!-- IF topicrow.TOPIC_ICON_IMG and S_TOPIC_ICONS -->background-image: url({T_ICONS_PATH}{topicrow.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{topicrow.TOPIC_FOLDER_IMG_ALT}"><div id="topictext">
      		<!-- IF topicrow.S_UNREAD_TOPIC --><a href="{topicrow.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><a href="{topicrow.U_VIEW_TOPIC}" class="topictitle">{topicrow.TOPIC_TITLE}</a>
      		<!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED --><a href="{topicrow.U_MCP_QUEUE}">{topicrow.UNAPPROVED_IMG}</a> <!-- ENDIF -->
      		<!-- IF topicrow.S_TOPIC_REPORTED --><a href="{topicrow.U_MCP_REPORT}">{REPORTED_IMG}</a><!-- ENDIF --><br />
      		<!-- IF topicrow.PAGINATION --><strong class="pagination"><span>{topicrow.PAGINATION}</span></strong><!-- ENDIF -->
      		<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} {L_POSTED_ON_DATE} {topicrow.FIRST_POST_TIME} 
      	</div></dt>

      In both cases all that was done was adding <div id="topictext"> and </div> to the beginning at end of the view forum template area.

      Add to the CSS

      #topictext {
      	padding-right: 425px;
      }

      This now makes the right side of the site (Views, Post, etc... ) a static width and make the rest of the area dynamic, effectively making it the same proportions of the original phpbb2 template at any width. In phpbb3 default template.

      Original Thread http://www.phpbb.com/community/viewtopic.php?f=74&t=611309

            nickvergessen Joas Schilling
            mkruer mkruer [X] (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: