Top and Bottom image in Mini profile?

[Stinky666]

I tried using this method but to no avail:

@mini_background: url('http://storage.proboards.com/4851760/i/2dCsMDN39zcnroodJciv.png'), url('http://i.imgur.com/reWT77o.png');
@mini_background: #202020, #202020;
@mini_background: repeat-x, repeat-x;
@mini_background: center top, center bottom;
@mini_background: scroll, scroll;


That method works fine and great with a BG image, but not for the mini profile.
Is there a way to achieve this?

[RADesign]

I am using this for my Mini-Profile, which is 160px in width. If yours is a different width you will have to make some adjustments to the padding and margins in the CSS!

Layout Templates > Mini-Profile

Add Top and Bottom images to MP (160px width)
Add this line to the very top:	<div class="mini-profile-top"></div>
Add this line to the very bottom:	<div class="mini-profile-bottom"></div>

Change these lines in your CSS:

/* Mini Profiles */ This sets the background-image for the Mini-Profile.	@ mini_background: #0c0e10   scroll url('http://i28./c236/radesign100/IODv5/IODv5b-MP-Background160.png');
This sets the background-image for the Even-Mini-Profile.	@ mini_even_background: #0c0e10   scroll url('http://i28./c236/radesign100/IODv5/IODv5b-MP-Background160.png');
This sets the padding and margins for the Mini-Profile.	.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: 0px 5px; width: 150px; margin: 0px 5px;}
Add this line to your CSS for the Top-image.	.mini-profile-top {background: url('http://i28./c236/radesign100/IODv5/IODv5b-MP-Top160.png'); background-repeat: no-repeat; padding: 0px 5px; width: 150px; height: 25px; margin: 0px 5px;}
Add this line to your CSS for the Bottom-image.	.mini-profile-bottom {background: url('http://i28./c236/radesign100/IODv5/IODv5b-MP-Bottom160.png'); background-repeat: no-repeat; padding: 0px 5px; width: 150px; height: 6px; margin: 0px 5px 10px;}

You can use my images for reference, but I trust you to change them.

EDIT: You'll have to delete the space between @ and mini_ everywhere. It changes to a link in here.

[Stinky666]

Feb 5, 2013 10:40:09 GMT -8 RADesign said:

I am using this for my Mini-Profile, which is 160px in width. If yours is a different width you will have to make some adjustments to the padding and margins in the CSS!

Layout Templates > Mini-Profile

Add Top and Bottom images to MP (160px width)
Add this line to the very top:	<div class="mini-profile-top"></div>
Add this line to the very bottom:	<div class="mini-profile-bottom"></div>

Change these lines in your CSS:

/* Mini Profiles */ This sets the background-image for the Mini-Profile.	@ mini_background: #0c0e10   scroll url('http://i28./c236/radesign100/IODv5/IODv5b-MP-Background160.png');
This sets the background-image for the Even-Mini-Profile.	@ mini_even_background: #0c0e10   scroll url('http://i28./c236/radesign100/IODv5/IODv5b-MP-Background160.png');
This sets the padding and margins for the Mini-Profile.	.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: 0px 5px; width: 150px; margin: 0px 5px;}
Add this line to your CSS for the Top-image.	.mini-profile-top {background: url('http://i28./c236/radesign100/IODv5/IODv5b-MP-Top160.png'); background-repeat: no-repeat; padding: 0px 5px; width: 150px; height: 25px; margin: 0px 5px;}
Add this line to your CSS for the Bottom-image.	.mini-profile-bottom {background: url('http://i28./c236/radesign100/IODv5/IODv5b-MP-Bottom160.png'); background-repeat: no-repeat; padding: 0px 5px; width: 150px; height: 6px; margin: 0px 5px 10px;}

You can use my images for reference, but I trust you to change them.

EDIT: You'll have to delete the space between @ and mini_ everywhere. It changes to a link in here.

Will give this a go soon. The width of the mini profile is the default. Any idea what that is?

[RADesign]

The default of the MP is 150px.

[Stinky666]

Feb 6, 2013 9:38:32 GMT -8 RADesign said:

The default of the MP is 150px.

Are you sure? I say because my avatar is 150px x 150px, and it doesn't touch the borders at all. There's a 5-10px each side.

[RADesign]

Sorry, 172px (including the border).

[Stinky666]

No worries
I will maybe use 152px. Maybe a little more. I just haven't designed my MP yet. It all depends on what I go for - I have a little something in mind.