IP.Board Tutorials
[TUTORIAL] Bigger Profile Header
Submitted by Mazzoni, 17-04-2022, 12:56 AM, Thread ID: 240648
Thread Closed
It's pretty simple, just go to your AdminCP > Themes > Edit HTML & CSS > CSS Tab > Profile.css
![[Image: V0NNgJ4.png]](https://i.imgur.com/V0NNgJ4.png)
Now in #elProfileHeader, just change these values for:
height: 550px; (For big header.)
padding-top: 10px; (for profile picture at top)
or padding-top: 475px; (at the bottom)
Save it and you're done!
Example:
Preview below!
Profile Picture at top and bigger header
![[Image: 02j6X6n.png]](https://i.imgur.com/02j6X6n.png)
![[Image: guFjJ2n.png]](https://i.imgur.com/guFjJ2n.png)
Profile Picture at bottom and bigger header
![[Image: Dx26CvV.png]](https://i.imgur.com/Dx26CvV.png)
![[Image: 8ZcU5Ma.png]](https://i.imgur.com/8ZcU5Ma.png)
Now in #elProfileHeader, just change these values for:
height: 550px; (For big header.)
padding-top: 10px; (for profile picture at top)
or padding-top: 475px; (at the bottom)
Save it and you're done!
Example:
Code:
#elProfileHeader {
padding-bottom: 0;
padding-top: 475px; <- Profile Picture at bottom
position: relative;
height: 550px; <- Big header
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
text-shadow: 0px 0px 4px rgba(0,0,0,0.5);
font-size: {fontsize="base"};
transition: all 0.3s ease-in-out;
}Preview below!
Profile Picture at top and bigger header
Profile Picture at bottom and bigger header
Users browsing this thread: 2 Guest(s)