IPS theme Increase cover photo height

[ADMIN 317]

Increase cover photo height in ips 4 or 4.7 version.

 

Go to: ACP > Customization > Themes > YourTheme (Edit HTML and CSS) > CSS > core > front > styles > profile.css

FIND:

#elProfileHeader {
    padding-bottom: 0;
    padding-top: 125px;
    position: relative;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    box-shadow: 0px 0px 30px rgba(0,0,0,0.4) inset;
    text-shadow: 0px 0px 4px rgba(0,0,0,0.5);
    font-size: 16px;
    {prefix="transition" value="all 0.3s ease-in-out"}
}

REPLACE WITH:

#elProfileHeader {
    padding-bottom: 0;
    padding-top: 235px;
    position: relative;
    height: 310px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    box-shadow: 0px 0px 30px rgba(0,0,0,0.4) inset;
    text-shadow: 0px 0px 4px rgba(0,0,0,0.5);
    font-size: 16px;
    {prefix="transition" value="all 0.3s ease-in-out"}
}
	

 

NOTE: If you change height: 310px, be aware that you will have to change padding-top as well.

 

[ADMIN 317]

4.7 version theme.

Go to: ACP > Customization > Themes > YourTheme (Edit HTML and CSS) > CSS > core > front >custom>custom.css

 

#elProfileHeader {
    position: relative;
    height: 250px;
    min-height: 250px;

    /* IMPORTANT */
    padding-top: 100px;
    padding-bottom: 20px;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    overflow: hidden;

    box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
    text-shadow: 0 0 4px rgba(0,0,0,0.5);

    font-size: 16px;

    transition: all 0.3s ease-in-out;
}

/* Keep IPS cover reposition feature working */
#elProfileHeader.cProfileHeader {
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Better mobile fit */
@media screen and (max-width: 768px) {
    #elProfileHeader {
        height: 220px;
        min-height: 220px;
        padding-top: 120px;
    }
}