Forum appearance problems

Good morning all,

I have a couple of problems I hope you can help me with.

In the first screenshot my forum Homepage looks normal, but in the second one it doesn't if the browser is narrowed - the name goes out of alignment and makes the forum Homepage look messy. Is there a way to keep everything uniform please?

Also, how do I get the avatars to appear in a double circle like SLGray as opposed to in a single circle like 'Michael99'?






Thank you in advance.

@jkh

Can you give a forum link please?

Hi

It's this http://jillhavern.forumotion.net/

As I say, when you narrow the forum width the members names go out of alignment.
Very annoying!
It must be look awful on a mobile phone/iPad.

Two questions.

1. What browser are you using when the alignment gets out of whack?

2. For the circle, do you want that in the Last Posts section only? Or also within the topics?

Ace 1 wrote:Two questions.

1. What browser are you using when the alignment gets out of whack?

2. For the circle, do you want that in the Last Posts section only? Or also within the topics?

It goes out of alignment with all my browsers - Firefox, Chrome, I.E., Opera
Mind you, this forum does too.

Yes, I'd like the double circle for the Last Posts and within topics if you know how to do it please.



This one looks normal



But this one goes out of alignment if I narrow my browser. People's names go on to the line below the date. It's not uniform. Does that happen to everyone, or is it just me?

Yeah, that's how it is for all forums, as well as all sites. Unless you have an advanced JavaScript that changes the font-size on browser resize

As for the circles, go to AP > Display > Colors > CSS Stylesheet and add this code:

Code:

#fa_popup_content > div.post .postprofile dt > a, #main-content > div.post .postprofile dt > a, #userAvatar, .avatar, .lastpost-avatar, .mod-login-avatar dt, .postprofile dt > img, td.avatar-mini img {
    background: #FFF;
    border-radius: 100px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3), 0 -1px 1px rgba(0,0,0,0.3);
    display: inline-block;
    height: 100px;
    margin: 10px 0;
    overflow: hidden;
    padding: 3px;
    width: 100px;
}
.avatar, .lastpost-avatar, td.avatar-mini img { box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 -0 1px rgba(0,0,0,0.3); }

.lastpost-avatar, .lastpost-avatar img, td.avatar-mini img {
    height: 34px;
    width: 34px;
}

.lastpost-avatar {
    margin: 0 5px 0 0;
    padding: 2px !important;
}

This is directly from Forumotion.

Great stuff! Thank you, that works a treat!

Although, not in the avatars for some reason.....?

Change the CSS to this:

Code:

#fa_popup_content > div.post .postprofile dt > a, #main-content > div.post .postprofile dt, #userAvatar, .avatar, .lastpost-avatar, .mod-login-avatar dt, .postprofile dt > img, td.avatar-mini img {
    background: #FFF;
    border-radius: 100px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3), 0 -1px 1px rgba(0,0,0,0.3);
    display: inline-block;
    height: 100px;
    margin: -3px;
    overflow: hidden;
    padding: 3px;
    width: 100px;
}
.avatar, .lastpost-avatar, td.avatar-mini img { box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 -0 1px rgba(0,0,0,0.3); }
 
.lastpost-avatar, .lastpost-avatar img, td.avatar-mini img {
    border-radius: 100px;
    height: 34px;
    width: 34px;
}
 
.lastpost-avatar {
    margin: 0 5px 0 0;
    padding: 2px !important;
}

Hmmmm....that's changed it to a circle within a square.....

@jkh, Sorry I was kind of rushing and forgot about that. I edited my post. It should work now.

Nope, it's now gone back to the circle in the avatar not being central!

Can you screenshot it for me? It looks fine on your forum.

Also, everyone's usernames have disappeared.

Hmm... Can you link me to that topic?

Ace 1 wrote:Hmm... Can you link me to that topic?

It happens in all the topics.

If you look at this thread, for instance, no one's name appears in their avatars anymore
http://jillhavern.forumotion.net/t13116p75-tapas-9-russel-o-brien#351330

Ohh, I made an account and it's completely different.

This should work:

Code:

#fa_popup_content > div.post .postprofile dt > a, #main-content > div.post .postprofile dt > a, #userAvatar, .avatar, .lastpost-avatar, .mod-login-avatar dt, .postprofile dt > a > img, td.avatar-mini img {
    background: #FFF;
    border-radius: 100px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3), 0 -1px 1px rgba(0,0,0,0.3);
    display: inline-block;
    height: 100px;
    margin: 10px 0;
    overflow: hidden;
    padding: 5px;
    width: 100px;
}

.postprofile dt > a > img { padding: 0; margin: 0; box-shadow: none; }

.avatar, .lastpost-avatar, td.avatar-mini img { box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 -0 1px rgba(0,0,0,0.3); }
 
.lastpost-avatar, .lastpost-avatar img, td.avatar-mini img {
    border-radius: 100px;
    height: 34px;
    width: 34px;
}
 
.lastpost-avatar {
    margin: 0 5px 0 0;
    padding: 2px !important;
}

Sorry for the confusion @jkh

We're getting there!
The names have reappeared but the circle in the avatar isn't central again.

@jkh

Code:

fa_popup_content > div.post .postprofile dt > a, #main-content > div.post .postprofile dt > a, #userAvatar, .avatar, .lastpost-avatar, .mod-login-avatar dt, .postprofile dt > a > img, td.avatar-mini img {
    background: #FFF;
    border-radius: 100px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3), 0 -1px 1px rgba(0,0,0,0.3);
    display: inline-block;
    height: 100px;
    margin: 10px 0;
    overflow: hidden;
    padding: 5px;
    width: 100px;
}
 
.postprofile dt > a > img { padding: 0 !important; margin: 0; box-shadow: none; }
 
.avatar, .lastpost-avatar, td.avatar-mini img { box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 -0 1px rgba(0,0,0,0.3); }
 
.lastpost-avatar, .lastpost-avatar img, td.avatar-mini img {
    border-radius: 100px;
    height: 34px;
    width: 34px;
}
 
.lastpost-avatar {
    margin: 0 5px 0 0;
    padding: 2px !important;
}

This should be good.

Yay!!!!! You've sorted it! Well done and thank you!

Sorry it took so long @jkh. I need to get back into the swing of helping people the first time.

No problem though.

I'm very grateful to you. I can see it's not a simple task doing this CSS Stylesheet stuff!