How to change member column width

[mysticrystal]

So basically I'm trying to add new columns for the member list (I know how to do that) however, I don't know how to change the width of them. So I want Posts to be larger and MP to be smaller (same size as AP) but I can't seem to get it to work. 

[Retread]

mysticrystal , when you create additional columns for the Members Page layout template, you should include a unique class name for each of those additional columns. By doing so, you can specify the desired width for each of the columns in your Style Sheet.

Since you haven't included a URL to your forum and made the theme you're working on the default, I can't see what you've done in-situ. So I'll explain how the plain-vanilla Layout Templates for the Members Page and the related section of the Style Sheet are inter-related. Then you can take it from there.

The Members tab of the Layout template looks like this:

SPOILER: Click to show

<div class="container members">
	<div class="title-bar">
		<h1>Member List</h1>
	</div>
	<div class="control-bar $[scroll_class] ui-helper-clearfix">
		$[search]
		<div class="controls">
			$[view_menu]
			$[selection_menu]
			$[action_menu]
		</div>
		$[pagination]
	</div>
	<div class="content cap-bottom">
		<table class="list">
			<thead>
				<tr class="head">
					<th class="checkbox"> </th>
					<th class="name $[sortable_class.name]">Name</th>
					<th class="username $[sortable_class.username]">Username</th>
					<th class="rank $[sortable_class.group_and_rank]">Group / Rank</th>
					<th class="posts $[sortable_class.posts]">Posts</th>
					<th class="date-registered $[sortable_class.registered_on]">Date Registered</th>
					<th class="last-online last $[sortable_class.last_online]">Last Online</th>
				</tr>
			</thead>
			<tbody class="list-content $[list_class]">
				$[user_list]
			</tbody>
		</table>
	</div>
</div>

The parent element (div) has one of it's class names as: members. I've highlighted that in lime. That will be used in the style sheet as part of the targeting for the descendant elements (th).

You'll notice each of the seven th elements have a unique class name which I've highlighted in yellow.

The Members List tab of that layout template looks like this:

SPOILER: Click to show

{foreach $[user]}
	<tr id="$[user.content_id]" class="$[user.content_class] clickable" {if $[user.ip]}data-ip="$[user.ip]"{/if}>
		<td class="checkbox clickable">$[user.checkbox]</td>
		<td class="name target">$[user]</td>
		<td class="username">$[user.username]</td>
		<td class="rank">{if $[user.group]}$[user.group.name]{else}$[user.rank.name]{/if}</td>
		<td class="posts">$[user.posts]</td>
		<td class="date-registered">$[user.registered_on]</td>
		<td class="last-online last">{if $[user.is_online]}Member is Online{else}$[user.last_online]{/if}</td>
	</tr>
{/foreach}
{if !$[user]}
	<tr><td colspan="7" class="last center">No members were found.</td></tr>
{/if}

Again, we see those same seven unique class names in use for each of the seven td elements.

The section of the Style Sheet pertaining to the Members Page looks like this:

SPOILER: Click to show

/* Members Page */
@members_background: @empty;
@members_text_color: @empty;
@members_text_font: @empty;
@members_text_align: left;
@members_align_name: left;
@members_align_username: left;
@members_align_rank: left;
@members_align_group: left;
@members_align_posts: left;
@members_align_date_registered: left;
@members_align_last_online: right;
.member { cursor: pointer; }
.members table.list { table-layout: fixed; }
.members thead { color: @members_text_color; font: @members_text_font; background: @members_background; }
.members th.sortable { cursor: pointer; overflow: hidden; text-align: @members_text_align; }
.members .name { width: 19%; text-align: @members_align_name; }
.members .username { width: 17%; text-align: @members_align_username; }
.members .rank { width: 16%; text-align: @members_align_rank; }
.members .group { width: 16%; text-align: @members_align_group; }
.members .posts { width: 8%; text-align: @members_align_posts; }
.members .date-registered { width: 18%; text-align: @members_align_date_registered; }
.members .last-online { width: 18%; text-align: @members_align_last_online; }
.members .last-online abbr.timestamp { font-size: 100%; }
.members .list-content td { word-wrap: break-word; overflow: hidden; padding: 3px 10px; .box-sizing(content-box); }
.members .list-content .checkbox { padding: 3px 0px 3px 7px; }

If we look at the first line which has some yellow highlighting, any element where the parent element has the class name members and the element has the class name name will have its width defined as 18% of the total available width, and it's text-align will be defined by @members_align_name (which the Visual Editor defined as left)

Six of the seven unique class names for the columns have a width defined as a percentage. Those percentages add up to 96%. checkbox doesn't have its width define so it gets whatever is left over.

You'll want to create additional lines in the Members Page section of the Style Sheet so you can define the width of the additional columns. Then divvy up the 96% or so of the width between the the columns which have their width being defined. From your screenshot it would appear you'll have a total eight columns which have their width being defined.

For instance, if you gave one of your additional columns the class name species the line for that might look like:
.members .species { width: 15%; text-align: @members_align_rank; }
Here we're defining the width and also using the same text alignment as the Rank column.

[mysticrystal]

That worked perfectly! Thank you!