[Template] Change Mini Profile Width

[tunescool]

works

[Maiden]

Hi Paul,

Instructions work perfectly thank you.

I'm using the microprofile instead of the miniprofile in my PM threads. Do you know how I can restrict the width of that?

Thanks

[pawl]

Dec 12, 2012 13:25:13 GMT -8 Maiden said:

Hi Paul,

Instructions work perfectly thank you.

I'm using the microprofile instead of the miniprofile in my PM threads. Do you know how I can restrict the width of that?

Thanks

Without having a proper look Maiden, I would imagine that following the thread I linked to in the opening post (and then the opening post itself), only changing the values for .micro-profile .avatar instead of .mini-profile .avatar, .micro-profile instead of .mini-profile etc should probably do the trick.
Have a wee play, see if you have any luck (just remember to back up the original settings!) - if not, I'll take a proper look at this at some point tomorrow. =]

[Maiden]

*dances happily* Thanks pawl I did it! (I feel so proud at such small coding achievements lol



I changed




.messages .item .left-panel { width: 172px; }


Back to what it was before I followed the instructions yesterday
(so that above)


and then




micro-profile { color: @micro_text_color; font: @micro_text_font; position: relative; height: 50px; width: 150px; display: inline-block; padding: 5px; margin-bottom: 3px; border: @micro_border; background: @micro_background; .rounded-corners(@micro_border_radius); overflow: hidden; }
to width 150px rather than 200px it started at

Which seems to have worked perfectly!

Thank youuuuu

[pawl]

Happy days =]

And the 'Microjunk' thing is a known bug - it's the @ tagging a user in the code box. You can make it display properly by adding [noubbc] tags in around the code. =]

[tunescool]

im trying this again paul. im starting with an avatar thats 185px x 185px, its 150px x 150px and centered

the mini profile width is 210px, which is where i want it



heres what everything is at when it looks like the above pic

.posts .post .left-panel { width: 210px; vertical-align: top; }

.mini-profile { color: @mini_text_color; font: @mini_text_font; background: @mini_background; border: @mini_border; .rounded-corners(@mini_border_radius); text-align: @mini_text_align; overflow: hidden; padding: 13px 10px; width: 185px; }

this is set to 185 but the actual mini profile is 210px, as you can see in pic

this is how big i want my miniprofile, where it is in the pic is how i want it

it says width: 185px; but i want it where it is, 210

this hasnt been changed yet

.posts .post .content { padding-left: 10px; vertical-align: top; }

---

then when i change this to 45, 35 more than 150, 185px

.posts .post .content { padding-left: 45px; vertical-align: top; }



it just changes the line under yesterday

---

back to 10, everythings fine

.posts .post .content { padding-left: 10px; vertical-align: top; }

---

then when i go to change my max avatar width to 185 x 185 it moves to the left

the setting was at 150px for width and height, im not sure if i adjusted at some other time

.mini-profile .avatar { max-width: 185px; max-height: 185px; overflow-x: hidden; overflow-y: hidden; margin: auto; border-width: 0px; vertical-align: middle; }

my miniprofile is 210px, if i set my avatar width and height to 185

it moves the avatar but doesnt change the size

[pawl]

Don't forget that the .mini-profile bits should be SMALLER than the .left-panel bits.
The left-panel is the entire mini-profile box (the bit with a dark grey background).
The mini-profile sets the width of the box containing your text and avatar. Therefore, you probably want yours to stay at 185, not 210.
Increasing the padding on your posts will just move the post to the right to accommodate for a bigger mini-profile, which you don't want.

The only bit you want to change is the max avatar size (which currently shouldn't go above 185px). Any chance you can change just that, and leave the changes up for us to have a look at? =]

(apologies for late reply - working long hours, and internet's been intermittent lately)

[tunescool]

i changed all the miniprofile widths and heights to 185 and now its centered but my avatar wont change to 185


.mini-profile .avatar { max-width: 185px; max-height: 185px; overflow-x: hidden; overflow-y: hidden; margin: auto; border-width: 0px; vertical-align: middle; }
.avatar-wrapper { display: table-cell; text-align: @mini_avatar_align; vertical-align: middle; }
.avatar-wrapper > div, #avatar-preview.flash_present.image_present > div { position: relative; }
.avatar-wrapper div object, .flash-avatar object, #avatar-preview.flash_present.image_present div object, .avatar-wrapper > div > img { position: absolute; top: 0; left: 0; }
.avatar-wrapper * { vertical-align: middle; }
.avatar_size_default, .avatar_size_default embed, .avatar_size_default object, .avatar_size_default > div, .avatar-wrapper.avatar_size_default > div > div { height: 185px; width: 185px; }
.avatar-wrapper > div > div { display: table-cell; vertical-align: middle; }
.avatar_size_default img, .avatar_size_default default { max-height: 185px; max-width: 185px; }
.avatar_size_medium, .avatar_size_medium embed, .avatar_size_medium object, .avatar_size_medium > div, .avatar-wrapper.avatar_size_medium > div > div { height: 75px; width: 75px; }
.avatar_size_medium img, .avatar_size_medium default { max-height: 75px; max-width: 75px; }
.avatar_size_small, .avatar_size_small embed, .avatar_size_small object, .avatar_size_small > div, .avatar-wrapper.avatar_size_small > div > div { height: 50px; width: 50px; }
.avatar_size_small img, .avatar_size_small default { max-height: 50px; max-width: 50px; }
.avatar_size_quote, .avatar_size_quote embed, .avatar_size_quote object, .avatar_size_quote > div, .avatar-wrapper.avatar_size_quote > div > div { height: 30px; width: 30px; }
.avatar_size_quote img, .avatar_size_quote default { max-height: 30px; max-width: 30px; }
#flash-avatar-preview .flash-avatar object { position: relative; }
#avatar-preview.flash_present div object { position: inherit; }
#avatar-preview.flash_present > div { position: inherit; }
.mini-profile .avatar .avatar-wrapper, .micro-profile .avatar .avatar-wrapper { height: auto; }
.avatar_size_placeholder { height: 185px; width: 185px; }
.mini-profile .badges img { height: 16px; width: 16px; }
.mini-profile abbr.time { font-size: 100%; /* So it is the same size text as the rest of the mini-profile */ font-style: normal; /* So it is not italic */ }

[pawl]

Might sound a silly question, but I assume the avatar you're using is actually 185x185? =P

[mookman13]

Question...

I followed all the steps to increase my avatar size to 205x205.. Worked perfectly.... But now the actual messages are in the mini-profile box with the avatar.. Seems I have to move the message itself over to the right to get it in the correct location. What did I do wrong? or what do I need to change?

Thanks...

[pawl]

Jan 26, 2013 10:48:32 GMT -8 mookman13 said:

Question...

I followed all the steps to increase my avatar size to 205x205.. Worked perfectly.... But now the actual messages are in the mini-profile box with the avatar.. Seems I have to move the message itself over to the right to get it in the correct location. What did I do wrong? or what do I need to change?

Thanks...

Did you follow the guide all the way to the end, including the bit after the bold text? =]

[mookman13]

Jan 26, 2013 14:37:07 GMT -8 pawl said:

Jan 26, 2013 10:48:32 GMT -8 mookman13 said:

Question...

I followed all the steps to increase my avatar size to 205x205.. Worked perfectly.... But now the actual messages are in the mini-profile box with the avatar.. Seems I have to move the message itself over to the right to get it in the correct location. What did I do wrong? or what do I need to change?

Thanks...

Did you follow the guide all the way to the end, including the bit after the bold text? =]

Here is my line of code...

.posts .post .content { padding-left: 65px; vertical-align: top; }

So, yes I did.... avatars are 205x205..... so I added 55 to the 10 that was there, correct?

[pawl]

Any chance of a link, so that I can take a quick look? =]

[mookman13]

primetimedynasty.proboards.com/

[pawl]

Jan 27, 2013 10:49:57 GMT -8 mookman13 said:

primetimedynasty.proboards.com/

Perhaps I'm missing something, but this is what I see; click.
Any chance you could take a screenshot to show me how it's displaying for you, and which browser you're using? =]