Mini Profile Chaos

[pika1995]

Forum URL: oceansavenue.proboards.com/

I'm trying to edit my mini-profiles and they're coming along nicely, but I've hit a wall.

1. I'd like to increase the space between the mini-profile and the box above each post.
Visual example: i.imgur.com/mUMsWtR.png

2. There is a border around the personal text boxes that I made and I'm trying to get rid of that border, but I don't know how. I changed the profile background to purple so you can see it.
Visual example:  i.imgur.com/16FKrvH.png

3. That same personal text box is not centered. It's slightly off and I don't know how to center it.
Visual example: i.imgur.com/wbWJWsx.png

4. I'm trying to increase the space between the avatars and the actual post. I know there's a way to do it in the CSS, but for the life of me I can't find it.
Visual example: i.imgur.com/9QABwon.png

5. There is a border around all the icons, but the border only shows up on the left and upper side. The size area of the icons needs to be fixed is what I'm thinking but I don't know how to do that.
Visual example: i.imgur.com/zIZZ1JC.png

6. Is there a way to increase the size of the post box? Currently, the mini profiles (since I added a shadow to their box) are overlapping and going outside of their boxes. It looks rather odd.
Visual example: i.imgur.com/mDMZFVd.png

Thank you for any help given. I've searched other threads to see if these questiosns already existed and was having trouble.

[Brian]

1. I would suggest adding the left-panel class back into the template for this so that you can target the cell holding the mini-profile.

<td class="cell left-panel" align="center" width="160" valign="top">

Add this to your style sheet, substituting the number in green with your preferred space between the top of the post and the mini-profile:

.posts .post .left-panel { padding-top: 20px; }

2/3. You seem to have already fixed these.

4. With the left-panel change from #1 you can add a width property to alter the space between the mini-profile and the post. You'll also need a text-align property if you want the mini-profile to remain on the left.

.posts .post .left-panel {
    padding-top: 20px;
    width: 220px;
    text-align: left;
}

5. In between lines 1704 and 1710 you have a border property that's being added to the avatar image.

6. Shadows aren't bound by the height and width of their parent elements. You can add padding to the bottom of the left-panel element to make up for this.

.posts .post .left-panel {
    padding-top: 20px;
    padding-bottom: 5px;
    width: 220px;
    text-align: left;
}

[pika1995]

Brian

You fixed my problems perfectly for 1, 4, and 6 (also you were right, I did end up figuring out how to do 2/3).

What I meant for 5 was that I would like the border to be displayed.

Here is what the full profile should look like: i.imgur.com/TVWmicx.png

But the profile cuts off half of the border on the right, I'm not sure how to expand it so that it shows it all.

[Brian]

You should be adding the border to the .avatar div rather than the image within it as the elements inside that div will be cut off if their dimensions exceed that of their parent (due to the fact that it has an explicitly set width and height).

.mini-profile .avatar { border: 4px solid #ffffff; }

[pika1995]

Dec 19, 2016 13:11:29 GMT -8 Brian said:

You should be adding the border to the .avatar div rather than the image within it as the elements inside that div will be cut off if their dimensions exceed that of their parent (due to the fact that it has an explicitly set width and height).

.mini-profile .avatar { border: 4px solid #ffffff; }

You are too good at this Brian, I swear.  That fixed it.

As you can see, the avatars are circular/oval now. I know that was my fault because while I was trying to self teach myself a few functions, I messed with the avatar radius (and I forgot where I changed it). Would you know what line I'm supposed to be looking at to revert it back to normal?

I also had some other questions about the pagnition and quote bar. Should I open a new thread for those or ask them in here?

[Brian]

Remove the border radius property from line 1156 of your style sheet.

.avatar-wrapper * { border-radius: 100%; vertical-align: middle; }

I would suggest creating a new thread in this same board for questions about a different element on the page.

[pika1995]

Thank you, that fixed it. I'm all done here.   And okay, I'll open a new thread.

EDIT: Brian Sorry   This is me being a perfectionist. The border doesn't seem to perfectly rap around the icons. The background of the mini-profiles is seen by about 1-2 pixels on the left and top. I'm not sure if you can see it clearly, so I changed the background of the profiles to something noticable.

[Brian]

As mentioned earlier the avatar div has an explicitly set width and height. Changing the height property found between lines 1703 and 1708 of your style sheet to auto will remove any excess space above and below smaller avatars.

height: auto;

[pika1995]

I must be doing something wrong, because I changed that to auto and it's still showing that pixel space on the left and top.

[Brian]

I'm not seeing what you're describing. Could you create another screenshot clarifying what I'm not seeing?

[pika1995]

Sure, no problem. Right here: XXXXXX

A little bit of pink from the mini-profile background is appearing within the avatar's area.

EDIT: Linked the wrong picture, just a second.

EDIT2: Here i.imgur.com/YpxC8LZ.png

[Brian]

I can't figure out for the life of me why that's happening because I can't get it to happen anywhere else I perform the same customization on.

However, since the avatar heights aren't universally the same now this is the easiest fix:

.mini-profile .avatar-wrapper { display: block; }

[pika1995]

Yeah, that was strange.  But it looks great now. Thanks Brian (i'll leave you alone now).