[REQ] Better Social Groups Layout

With this very easy template mod i feel it gives the view of the social groups a better look and feel.

layoutwn0.jpg


To make this edit just replace the socialgroups_group template with the below html:

HTML:
$stylevar[htmldoctype]
<html xmlns="http://www.w3.org/1999/xhtml" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
	$headinclude
	<title>$vboptions[bbtitle] - $custompagetitle</title>
	$socialgroups_css
</head>
<body>
$header
$navbar

<table width="100%" border="0" cellspacing="0" cellpadding="6">
  <tr>
    <td colspan="2"><div class="tborder content_block" id="social_group"><div class="tcat block_title">
		<if condition="$groupoptions['join'] OR $groupoptions['leave']">
		<span class="smallfont" style="float:$stylevar[align=right]">
			<if condition="$groupoptions['join']">
					<a href="group.php?$session[sessionurl]do=join&groupid=$group[groupid]">$vbphrase[join_group]</a>
			<else />
				<if condition="!$group['membertype'] AND $group['type'] == 'inviteonly'">
						$vbphrase[group_type_inviteonly]				</if>
			</if>
			<if condition="$groupoptions['join'] AND $groupoptions['leave']">
				&nbsp;|&nbsp;			</if>
			<if condition="$groupoptions['leave']"><a href="group.php?$session[sessionurl]do=leave&groupid=$group[groupid]">$leavephrase</a></if>
		</span>		</if>
		$vbphrase[social_group]
	</div>

	<!-- group info -->
	<div class="alt1 block_row">
		<span class="smallfont" style="float: $stylevar[align=right];">$grouptypephrase</span>
		<h1 id="group_name">$group[name]</h1>
		<div id="group_creator" class="smallfont"><phrase 1="$ownerlink" 2="$group[creatorusername]">$vbphrase[group_created_by_x]</phrase></div>
		<if condition="$group['description']">
			<p id="group_description">$group[description]</p>
		</if>
	</div></div></td>
  </tr>
  <tr>
    <td valign="top"><!-- messages -->
<if condition="$show['groupmessages']">
	<if condition="$show['quickcomment']">
		$vBeditTemplate[clientscript]

		<div class="tborder content_block" id="social_group"><div class="thead block_row">$vbphrase[social_group_messages]</div>

		<form action="group.php?$session[sessionurl]do=message" method="post" name="vbform" id="message_form" class="alt1 smallfont block_row">
			<div align="center">
				<div style="max-width:$stylevar[formwidth]; width:auto !important; width:$stylevar[formwidth_usercp]">

					<div style="display:none" id="qc_error_div" class="tborder">
						<div class="alt1 block_title">
							<div id="qc_error_header">$vbphrase[errors_occured_when_submitted]</div>
							<div id="qc_error_list">&nbsp;</div>
							<div id="qc_error_okay"><input type="button" class="button" value="$vbphrase[okay]" id="qc_hide_errors" /></div>
						</div>
					</div>

					<div class="smallfont messagetext">$vbphrase[message]: <if condition="$show['auto_moderation']"><span class="shade">$vbphrase[this_post_will_be_automatically_moderated]</span></if></div>
					<div id="$editorid" class="vBulletin_editor">$messagearea</div>
					<if condition="$allowed_bbcode"><div class="allowed_bbcode">$allowed_bbcode</div></if>
					<div class="submit_button">
						<input type="hidden" name="fromquickcomment" value="1" />
						<input type="hidden" name="s" value="$session[sessionhash]" />
						<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
						<input type="hidden" name="do" value="message" />
						<input type="hidden" name="groupid" value="$group[groupid]" />
						<input type="hidden" name="loggedinuser" value="$bbuserinfo[userid]" />
						<input type="hidden" name="parseurl" value="1" />
						<input type="hidden" name="lastcomment" value="$lastcomment" />
						<input type="hidden" name="allow_ajax_qc" value="$show[allow_ajax_qc]" />

						<input type="submit" id="qr_submit" value="$vbphrase[post_message]" name="sbutton" class="button" accesskey="s" onclick="clickedelm = this.value" />
						<input type="submit" id="qr_preview" value="$vbphrase[go_advanced]" name="preview" class="button" accesskey="x" onclick="clickedelm = this.value" />
					</div>
				</div>
			</div>

			<div align="center" id="qc_posting_msg" style="display:none; margin-top:$stylevar[cellpadding]px">
				<img class="inlineimg" src="$stylevar[imgdir_misc]/progress.gif" alt="$vbphrase[posting_comment] - $vbphrase[please_wait]" />
				<strong>$vbphrase[posting_message_please_wait]</strong>			</div>
		</form>
	</if>

	<if condition="$messagebits">
		<div class="thead block_row" id="group_message_header">
			<if condition="$show['inlinemod']"><a id="inlinemodsel">&nbsp;</a></if>
			<if condition="$messagetotal"><phrase 1="$messagestart" 2="$messageend" 3="$messagetotal">$vbphrase[showing_gms_x_to_y_of_z]</phrase><else />&nbsp;</if>
		</div>

		<!-- inline moderation form -->
		<form action="group_inlinemod.php?groupid=$group[groupid]" method="post" id="group_message_inlinemod_form">
			<ol class="alt1 list_no_decoration block_row" id="message_list">
				$messagebits
			</ol>

			<if condition="$show['inlinemod'] OR $pagenav">
				<div class="alt2 block_row" id="group_message_tab_footer">
					<table cellpadding="0" cellspacing="0" border="0" width="100%">
					<tr valign="bottom">
					<if condition="$show['inlinemod']">
						<td class="smallfont" id="inlinemod_comment_controls">
							<div><label for="moderation_select_comments">$vbphrase[moderation]</label></div>
							<select id="moderation_select_comments" name="do">
								<if condition="$show['delete'] OR $show['undelete'] OR $show['approve']">
								<optgroup label="$vbphrase[option]" id="moderation_select_comments_optgroup">
									<if condition="$show['delete']">
										<option value="inlinedelete" id="inlinemod_comment_controls_delete">$vbphrase[delete_messages]</option>
									</if>
									<if condition="$show['undelete']">
										<option value="inlineundelete" id="inlinemod_comment_controls_undelete">$vbphrase[undelete_messages]</option>
									</if>
									<if condition="$show['approve']">
										<option value="inlineapprove" id="inlinemod_comment_controls_approve">$vbphrase[approve_messages]</option>
										<option value="inlineunapprove" id="inlinemod_comment_controls_unapprove">$vbphrase[unapprove_messages]</option>
									</if>
								</optgroup>
								</if>
								<optgroup label="____________________">
									<option value="clearmessage">$vbphrase[deselect_all_messages]</option>
								</optgroup>
							</select>
							<input type="submit" value="$vbphrase[go]" id="gmessage_inlinego" class="button" />
							<input type="hidden" name="s" value="$session[sessionhash]" />
							<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />						</td>
					</if>
					<if condition="$pagenav">
						<td class="smallfont" align="$stylevar[align=right]">
							$pagenav						</td>
					</if>
					</tr>
					</table>
				</div>
			</if>
	</if>

	<if condition="$show['quickcomment']">
		<script type="text/javascript" src="clientscript/vbulletin_quick_comment.js?v=$vboptions[simpleversion]"></script>
		<script type="text/javascript">
		<!--
		var quick_comment = new vB_QuickComment("message_form", $vboptions[postminchars]);
		//-->
		</script>
	</if>
	<if condition="$messagebits">
		<if condition="$show['inlinemod']">
			<script type="text/javascript" src="clientscript/vbulletin_inlinemod.js?v=$vboptions[simpleversion]"></script>
			<script type="text/javascript">
			<!--
			inlineMod_comment = new vB_Inline_Mod('inlineMod_comment', 'gmessage', 'group_message_inlinemod_form', '$vbphrase[go_x]', 'vbulletin_inline', 'message');
			vBmenu.register("inlinemodsel");
			//-->
			</script>

			<!-- inline mod selection popup -->
			<ul id="inlinemodsel_menu" class="vbmenu_popup list_no_decoration" style="display:none">
				<li class="thead first">$vbphrase[from_this_page]</li>
				<li class="vbmenu_option" onclick="inlineMod_comment.check_all(true)">$vbphrase[select_all]</li>
				<li class="vbmenu_option" onclick="inlineMod_comment.check_all(false)">$vbphrase[deselect_all]</li>
				<li class="vbmenu_option" onclick="inlineMod_comment.check_all('invert')">$vbphrase[invert_selection]</li>
				<li class="thead"><img src="$vboptions[cleargifurl]" alt="" width="1" height="1" /></li>
				<li class="vbmenu_option" onclick="inlineMod_comment.check_all(true, 1)">$vbphrase[select_unapproved_posts]</li>
				<li class="vbmenu_option" onclick="inlineMod_comment.check_all(true, 2)">$vbphrase[select_deleted_posts]</li>
			</ul>
			<!-- / inline mod selection popup -->
		</if>
		</form>
		<!-- / inline moderation form -->

	<else /><if condition="$show['quickcomment']">
		<div class="alt2 block_row">$vbphrase[group_has_no_messages]</div>
	</if></if>
</if>
<if condition="!$group['canviewcontent']">
	<div class="alt2 block_row">$vbphrase[must_join_to_view]</div>
</if></div></td>
    <td width="250" valign="top"><!-- members -->
	<div class="tborder content_block" id="social_group"><div class="thead block_row">
		<phrase 1="$members_shown" 2="$group[members]">$vbphrase[showing_x_of_y_members]</phrase>
	</div>

	<div class="alt1 block_row">
		<ul id="group_member_list">
		  <div align="center">$short_member_list_bits</div>
		</ul>
		</div>
	<div class="alt2 block_row"><a id="view_all_members_link" class="smallfont" href="group.php?$session[sessionurl]do=viewmembers&groupid=$group[groupid]">$vbphrase[view_all_members]</a>
		      </div>
</div>
	<!-- pictures -->
	<div class="tborder content_block" id="social_group"><if condition="$show['pictures_block']">
	<div class="thead block_row">
	
		<if condition="$pictures_shown">
			<phrase 1="$pictures_shown" 2="$group[picturecount]">$vbphrase[showing_x_of_y_pictures]</phrase>
		<else />
			$vbphrase[group_pictures]		</if>
	</div>
	<div class="alt1 block_row">
		<if condition="$picturebits">
			$picturebits
			  
			<else />
			$vbphrase[no_pictures_added_group_yet]
			<if condition="$show['add_pictures_link']"><a href="group.php?$session[sessionurl]do=addpictures&groupid=$group[groupid]">$vbphrase[add_pictures_to_this_group]</a></if>
		</if>
	</div>
	</if>
	<div class="alt2 block_row"><div id="picture_links" class="smallfont">
			<a href="group.php?$session[sessionurl]do=grouppictures&groupid=$group[groupid]">$vbphrase[view_pictures]</a>
			<if condition="$show['add_pictures_link']">| <a href="group.php?$session[sessionurl]do=addpictures&groupid=$group[groupid]">$vbphrase[add_pictures]</a></if>
		</div></div>
	</div></td>
  </tr>
  <tr>
    <td colspan="2" valign="top"><div class="tborder content_block" id="social_group"><div align="center"><if condition="$show['groupoptions']">
	<div class="tfoot block_row">
		<ul id="group_footer_links">
			<if condition="$groupoptions['join']">
				<li class="smallfont">
					<a href="group.php?$session[sessionurl]do=join&groupid=$group[groupid]">$vbphrase[join_group]</a>
				</li>
			<else />
				<if condition="$group['membertype'] != 'member' AND $group['type'] == 'inviteonly'">
					<li class="smallfont">
						$vbphrase[group_type_inviteonly]
					</li>
				</if>
			</if>
			<if condition="$groupoptions['leave']"><li class="smallfont"><a href="group.php?$session[sessionurl]do=leave&groupid=$group[groupid]">$leavephrase</a></li></if>
			<if condition="$groupoptions['edit']"><li class="smallfont"><a href="group.php?$session[sessionurl]do=edit&groupid=$group[groupid]">$vbphrase[edit_group]</a></li></if>
			<if condition="$groupoptions['delete']"><li class="smallfont"><a href="group.php?$session[sessionurl]do=delete&groupid=$group[groupid]">$vbphrase[delete_group]</a></li></if>
			<if condition="$groupoptions['manage']">
				<li class="smallfont">
					<a href="group.php?$session[sessionurl]do=manage&groupid=$group[groupid]">$vbphrase[pending_and_invited_members]</a>
				</li>
			</if>
			<if condition="$groupoptions['managemembers']">
				<li class="smallfont">
					<a href="group.php?$session[sessionurl]do=managemembers&groupid=$group[groupid]">$vbphrase[manage_members]</a>
				</li>
			</if>
		</ul>
	</div>
	<div></div>
	</if>
</div></div></td>
  </tr>
</table>

$footer
</body>
</html>
 
cinneke said:
thx but where to find ?
To make this edit just replace the socialgroups_group template
thx
admincp>>Styles & Templates>>Search in Templates
type in socialgroups_group, tick the "Search Titles Only" box and press find
 
Back
Top