IP.Board Tutorials

[TUTORIAL] Bigger Profile Header

Submitted by Mazzoni, , Thread ID: 240648

Thread Closed
Mazzoni
Junior Member
Level:
7
Reputation:
2
Posts:
83
Likes:
106
Credits:
653
17-04-2022, 12:56 AM
This post was last modified: 17-04-2022, 02:58 PM by Mazzoni
Working Not Working Link Down
#1
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]
[Image: guFjJ2n.png]

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

RE: [TUTORIAL] Bigger Profile Header

Junior Member
Level:
6
Reputation:
0
Posts:
69
Likes:
2
Credits:
5
24-04-2022, 05:25 AM
#2
y would you want that big of header it makes the community ugly

RE: [TUTORIAL] Bigger Profile Header

fckery
Lurker
Level:
0
Reputation:
0
Posts:
2
Likes:
0
Credits:
0
25-04-2022, 02:36 PM
#3
It doesn't work, is there any other way to solve the problem? thx in advance

RE: [TUTORIAL] Bigger Profile Header

Mazzoni
Junior Member
Level:
7
Reputation:
2
Posts:
83
Likes:
106
Credits:
653
OP
26-04-2022, 01:48 PM
#4
25-04-2022, 02:36 PM
fckery Wrote: It doesn't work, is there any other way to solve the problem? thx in advance

It does work. This tutorial was made using the IPS Default version.

Users browsing this thread: 1 Guest(s)