Absolute Centered Title Bar Text

[Retread]

ACTBT is a Plain Vanilla Proboards theme with modifications at the bottom of the Style Sheet and modifications in the Board and Thread layout templates.

Purpose: I occasionally see requests for help aligning the title bar text to 'true' center on the page, not affected by the presence or absence of a button on the title bar. Also, since the headings for the Legend, Information & Statistics, and Shoutbox on the stock theme are display are inline elements, I've changed those to display as block element so text-align can have the desired effect.

One of the 'tricks' I employed is to duplicate the button (if present), place it on the left, and use display:hidden; so the additional button will not be visible. While purists might object, I find this to be an effective way to occupy an equal amount of real-estate on the opposite side from the button. Regardless of any changes in button text or styling, the title bar text will automatically remain centered on the page.

Style Sheet addition:

/* Absolute Centered Title Bar Text */
/* note: additions have been made to Board List and Thread List layout templates */

/* Force Text Centering regardless of settings in Visual Editor */
.container > .title-bar h1,
.container > .title-bar h2,
.container > .title-bar h3 {
   text-align:center;        
}
.container > .title-bar.bbcode h2 {
   width:100%;
}
/* Change title bar headings in Info and Shoutbox to block elements */
.container > .title-bar h1,
.container > .title-bar h2 {
   display:block;
}
/* Move the added title bar buttons to the left and hide them */
/* (Occupies an equal amount of real estate on the left side of the title bar,
  as the existing buttons, on the right side) */
.container > .title-bar .hideme {
   float:left;
   visibility:hidden;
}
/* /Absolute Centered Title Bar Text */



Board layout template (modification in red):

SPOILER: Click to show

{if $[board.sub_board_list]}
<div class="container boards">
<div class="title-bar"><h2>Sub-Boards</h2></div>
<div class="content cap-bottom">
$[board.sub_board_list]
</div>
</div>
{/if}
{if $[display_thread_list]}
<div{if $[viewing_bookmarks]} id="bookmarks"{/if} class="container threads">
<div class="title-bar">
{if $[create_thread_button]}
<ul class="controls"><li>$[create_thread_button]</li></ul>
<ul class="controls hideme"><li>$[create_thread_button]</li></ul>
{/if}
<h1>$[board.display_name]</h1>
</div>
<div class="control-bar ui-helper-clearfix $[scroll_class]">
$[search]
<div class="controls">
$[selection_menu]
$[action_menu]
</div>
$[pagination]
</div>
<div class="content cap-bottom">
<table class="list">
<thead>
<tr class="head">
<th class="icon"><span class="aria-hidden">Status</span> </th>
<th class="checkbox"> </th>
<th class="main">Subject</th>
<th class="created-by">Created By</th>
<th class="replies">Replies</th>
<th class="views">Views</th>
<th class="latest last">Last Post</th>
</tr>
</thead>
<tbody class="$[list_class]">
$[thread_list]
</tbody>
</table>
</div>
</div>
{/if}

{if $[thread_count] > 0}
{if $[legend]}
<div class="container legend">
<div class="title-bar"><h2>Legend</h2></div>
<div class="content">
<table>
<tr>
{foreach $[legend]}
<td>$[legend.icon] <span>$[legend.name]</span></td>
{/foreach}
</tr>
</table>
</div>
</div>
{/if}
{/if}

{if $[board.id]}{if $[show_stats]}
<div class="container stats">
<div class="title-bar"><h2>Board Information & Statistics</h2></div>
<div class="content">
<table>
<tbody>
{if $[board.description]}
<tr>
<td colspan="2">
<table>
<tr>
<td class="icon">$[image.description]</td>
<td class="info last">
<div class="board-name">$[board.name]</div>
<div class="board-description">$[board.description]</div>
</td>
</tr>
</table>
</td>
</tr>
{/if}
<tr{if !$[show_users_viewing]} class="last"{/if}>
<td>
<table>
<tr>
<td class="icon">$[image.stats]</td>
<td class="info">
<table>
<tbody>
<tr><th colspan="2">Threads and Posts</th></tr>
<tr><td>Total Threads:</td><td>{if $[total_threads] == -1}N/A{else}$[total_threads]{/if}</td></tr>
<tr><td>Total Posts:</td><td>{if $[total_posts] == -1}N/A{else}$[total_posts]{/if}</td></tr>
{if $[board.moderators_link]}<tr><td colspan="2">This board has $[board.moderators_link]</td></tr>{/if}
</tbody>
</table>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td class="icon">$[image.members]</td>
<td class="info last">
<table>
<tbody>
<tr><th colspan="1">On This Board</th></tr>
<tr><td>You <strong>can{if !$[can.create_threads]}not{/if}</strong> create threads.</td></tr>
<tr><td>You <strong>can{if !$[can.reply_to_threads]}not{/if}</strong> reply to threads.</td></tr>
<tr><td>You <strong>can{if !$[can.create_polls]}not{/if}</strong> create polls.</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
{if $[show_users_viewing]}
<tr class="last">
<td colspan="2">
<table>
<tr>
<td class="icon">$[image.online]</td>
<td class="info last">
<table>
<tbody>
<tr><th>Users Viewing</th></tr>
<tr><td>$[total_board_staff] Staff, $[total_board_members] Member{if $[total_board_members] != 1}s{/if}, {if $[view_guests_online_link]}<a href="#" class="$[view_guests_online_link.class]">{/if}$[total_board_guests] Guest{if $[total_board_guests] != 1}s{/if}{if $[view_guests_online_link]}</a>{/if}.</td></tr>
<tr><td><tr><td>
{foreach $[board_user]}
$[board_user]{if $[board_user.invisible]} <span class="small">(invisible)</span>{/if}$[board_user.comma]
{/foreach}
{if $[total_online_not_shown] > 0}
, and <a href="$[view_active_members_link.href]" class="$[view_active_members_link.class]">$[total_online_not_shown] more...</a>
{/if}
</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
{/if}
</tbody>
</table>
</div>
</div>
{/if}{/if}

Thread layout template (modification in red):

SPOILER: Click to show

<div class="container posts">
<div class="title-bar">
{if $[reply_button]}
<ul class="controls"><li>$[reply_button]</li></ul>
<ul class="controls hideme"><li>$[reply_button]</li></ul>
{/if}
<h1>$[thread.subject]</h1>
</div>
<div class="control-bar ui-helper-clearfix $[scroll_class]">
$[search]
<div class="controls">
$[action_menu]
</div>
<div class="float-left">$[thread.icons]</div>
$[pagination]
</div>
<div class="content cap-bottom">
$[thread.labels]
$[poll]
<table class="list" role="presentation">
<tbody class="$[list_class]">
$[post_list]
</tbody>
</table>
{if !$[quick_reply]}{if $[bottom_reply_button]}
<div class="reply_button pad-all-double">$[bottom_reply_button]<br class="clear" /></div>
{/if}{/if}
</div>
</div>
$[quick_reply]

---

Download: ACTBT.pbt (33.46 KB)

Preview: actbt.boards.net/

---

You may use any or all of this theme as you see fit. However, if you use this as a starting point for building your own theme and then publish that theme, it would be appropriate to acknowledge my work.