Moving the Welcome Guest (Login/Register)

[goose]

How do I move the "Welcome Guest (Login/Register)" icon over to the right a space or two? I figured out how to move it to the left side, by changing the code below, but now it sits all the way over on the left edge of the screen (above the left side column in V4). I want to move it over to the right just a space or two (maybe center it above the left colum).

                    <p id="top_info"> 
				{if $smarty.session.username<>'' || $smarty.cookies.username<>""}
				Welcome {$smarty.session.username}
				{if $pmon=="Y"}
				<br />
				<a href="private.php">{$smarty.const.LANG_PRIVATE_MESSAGES}:</a> {$smarty.const.LANG_UNREAD} {$unreadpms}, {$smarty.const.LANG_TOTAL} {$totalpms}.
				{/if}
				{else}
				{$smarty.const.LANG_WELCOME_GUEST} <br />[<a href="login.php">{$smarty.const.LANG_USER_LOGIN}</a>, <a href="userjoin.php">{$smarty.const.LANG_USER_REGISTER}</a>]
				{/if}

Changed to this-

                  <p id="left_info"> 
				{if $smarty.session.username<>'' || $smarty.cookies.username<>""}
				Welcome {$smarty.session.username}
				{if $pmon=="Y"}
				<br />
				<a href="private.php">{$smarty.const.LANG_PRIVATE_MESSAGES}:</a> {$smarty.const.LANG_UNREAD} {$unreadpms}, {$smarty.const.LANG_TOTAL} {$totalpms}.
				{/if}
				{else}
				{$smarty.const.LANG_WELCOME_GUEST} <br />[<a href="login.php">{$smarty.const.LANG_USER_LOGIN}</a>, <a href="userjoin.php">{$smarty.const.LANG_USER_REGISTER}</a>]
				{/if}

[civ]

Add some padding to your new CSS id.

[goose]

If I knew how to add the padding I wouldn't be asking here.....

What should the code look like? I've been looking on w3schools.com, and can't figure it out.

[civ]

padding-left:10px;

http://www.w3schools.com/css/pr_padding-left.asp

[Lhotch]

Originally Posted by goose

If I knew how to add the padding I wouldn't be asking here.....

What should the code look like? I've been looking on w3schools.com, and can't figure it out.

One of the best things you can do to help yourself is use firefox with the firebug and web developer plugin. As you move the mouse over the code it will highlight areas of the page that are effected by it and you can play with style sheets at the browser level and see live how it affects the site (any site not just your own) without having to make changes to the live files themselves.

[juven14]

You should change that back to top_info. Then open your templates/default/css/style.css and find:

.top_left{
...something here
}

And add in:

.top_left{
..leave everything else alone
padding-left:10px;
}

[goose]

Thanks, I'll give that a try.