Center and re-arrange post profile

[Jamie87100]

Hi,

I'm looking to re-arrange and center the items in the post profile but can't see how to do it.
I have seen that the best way to center the items are to use CSS but can't figure out how to do it and i'm really struggling how to re-arrange the order.

Please see the attached before and after pictures for desired layout (edited in paint).

If it helps i can upload css / template files, which ones would be required?

Cheers,
Jamie

[Steve]

For centering:

http://www.simplemachines.org/community/index.php?topic=525891.0

And for moving things around, this may give you some ideas:

http://www.simplemachines.org/community/index.php?topic=534705.0

[Jamie87100]

Thank you for those links, I have managed to move the avatar, see attached.

I will get to the centering bit in a minute as struggling with that bit at the moment.

How do i make a small gap between the avatar and username?

[Jamie87100]

Also, as a side note, in order to do the above i moved this code

Code Select Expand

if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
echo '
<li class="avatar">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>
</li>';

However i have to remove the li elements so the code now looks like this:

Code Select Expand

if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
echo '
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>

I did that because the avatar had a bullet point/list icon next to the left of it.

Is what i have done ok or do i need to put that code back and change something else to make the bullet point disappear.
See attached for the example with the bullet point.

Cheers,
Jamie

[Jamie87100]

I have managed to get this working by putting center tags around the elements in the display.template file, i couldn't figure it out in CSS.
It doesn't look to be perfectly center aligned though.

Can anyone help with centering it please as i can't work it out from the link above.

-Jamie

[Gwenwyfar]

You did not need to edit the html, you can remove bullet points through css as well (and you probably have invalid html now, since you removed the li but kept the ul). And putting center tags is not a good idea, these are already deprecated and you should only modify the html when structural changes are needed, not to add local styles.

For the css to center those, if the poster area is still close to default, you could try adding this to the bottom of your theme's index.css:

Code Select Expand


.poster {
text-align: center;
}

[suhaneankit]

If still it is not working then try this also:

Code Select Expand

.poster {
   text-align: center!important;
}


[420Connect.co.uk]

I'm a bit OCD when it comes to some things being centered myself and have tweaked a lot of my site..

http://custom.simplemachines.org/mods/index.php?mod=1780

This mod does just the job you're looking for although you'll need to emulate to get it to install.
(emulate to 2.0)

& If you like, you can attach a copy of your Display.template.php I can re-order the items as you would like..


edit: just seen this was marked as solved once replying but if you're still looking to do this, let me know

[Gwenwyfar]

If still it is not working then try this also:

Code Select Expand

.poster {
   text-align: center!important;
}


You should undo the changes you did before for it to work properly, and you probably don't need that !important in there. If there's anything else you edited there, or that is not as default, that might be the cause as well, then only checking your code/forum to tell what's wrong. Also, remember you need to reset your cache for new css files to load.

I have my post info all centered too, and that's all I've used, on base default curve theme. 420's mod does the same thing too, though it adds it directly on the template instead.

[Hj Ahmad Rasyid Hj Ismail]

To re-arrange the order, you will need a lot more efforts to re do the respective template(s). But for the css, you can simply refer to my SPB - Smart PostBit mod. Basically, the relevant code are as follows:

Code Select Expand

.poster h4, .poster ul li
{
text-align: center;
}


Note: SPB mod is for default theme. CSS adjustment is needed for it to be used with other theme. But the basic code above, should center all postbits correctly. SPB mod image is attached for easy comparison.