[TUTORIAL] Bigger Profile Header

Mazzoni · 17-04-2022, 12:56 AM

It's pretty simple, just go to your AdminCP > Themes > Edit HTML & CSS > CSS Tab > Profile.css
[Image: 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:

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
[Image: 02j6X6n.png]

Profile Picture at bottom and bigger header
[Image: Dx26CvV.png]

[TUTORIAL] Bigger Profile Header

Submitted by Mazzoni, 17-04-2022, 12:56 AM, Thread ID: 240648