MyBB Community Forums

Full Version: Gaps between CP buttons
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I made these buttons for ACP, MCP, UCP, LogOut but they're all joined together. I want there to be gaps in between each one of them: 

[Image: piHNjcJ.png]

My forum is http://chillerr.com/index.php
Hi,

What is the markup you are using for the buttons? A simple fix should be to add a right margin to each button.
(2015-04-14, 07:50 PM)Euan T Wrote: [ -> ]Hi,

What is the markup you are using for the buttons? A simple fix should be to add a right margin to each button.

These are the codes I've used for header_welcomeblcok_member:

<!-- Continuation of div(class="upper") as opened in the header template -->

</div>
</div>
<div class="lower">
<div class="wrapper">
<ul class="menu panel_links">
{$lang->welcome_back}
</ul>
<ul class="menu user_links">
<div id="logout"><li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">Log Out</a></li></div>
</ul>
<ul class="menu user_links">
<div id="ucp"><li><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp">{$lang->welcome_usercp}</a></li>
</ul>
<ul class="menu user_links">
<div id="mcp">{$modcplink}</div>
</ul>
<ul class="menu user_links">
<div id="acp">{$admincplink}</div>
</ul>
</div>
<br class="clear" />
</div>
Hi,

The code you're using at the minute is actually invalid HTML. Can you try the following template code:

</div>
</div>
<div class="lower">
	<div class="wrapper">
		<ul class="menu panel_links">
			{$lang->welcome_back}
		</ul>
		<ul class="menu user_links">
			<li id="logout"><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">Log Out</a></li>
			<li id="ucp"><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp">{$lang->welcome_usercp}</a></li>
			{$modcplink}
			{$admincplink}
		</ul>
	</div>
	<br class="clear" />
</div>

Then try the following CSS:

ul.user_links li {
	display: inline-block;
	margin-right: 5px;
}

ul.user_links li:last-child {
	margin-right: 0;
}

That should work, but you may have to change a few other CSS rules and the templates for the header_welcomeblock_admin and moderator templates to include the "mcp" and "acp" IDs.
I've done it but the right hand end of the log out is cut off:

[Image: 65eWe4P.png]
Hi,

Could I possibly get details of a temporary account to look at the issue? That way I can inspect the HTML and CSS in use more easily.