MyInvision

Header background (logo) image - How to change - MyInvision

Header background (logo) image - How to change

by Anonymous » Sun Nov 19, 2017 3:01 pm

Hi! I loved your skin.
I trying to change my header backgroung image (not the logo).
I think that if I change this, it will work better to my big logo image (its 1349x356)
How to fit it?
And it will resize for another computer if necessary, for sample?

My original topic: viewtopic.php?f=591&t=2446741 (wrong place)

Thankssssss
Anonymous
I am too lazy to register
Posts: 3265
Joined: Thu Mar 15, 2007 6:50 am

Re: Header background (logo) image - How to change

by Mannix_ » Mon Nov 20, 2017 10:44 am

First you need to delete all the colours in the .headbar class in colours.css. It should look like this after:

Code: Select all

.headerbar {  
    height: 120px;
    min-height: 64px;
    padding-top: 0px;
    max-width: 1200px;
    margin: auto;
}
Now you need paste your image to the images folder in theme folder. Then add this to the .backhead class in the myinvision.css

Code: Select all

background-image: url(./images/test.png);
    background-repeat: no-repeat;
    background-position: center;
and remove

Code: Select all

border-bottom: 1px solid #005189;
     -webkit-box-shadow: inset 0px -1px 0 #33a0ed; 
    -moz-box-shadow: inset 0px -1px 0 #33a0ed;
     box-shadow: inset 0px -1px 0 #33a0ed; 
     padding-top: 12px; */
and change the hight from 120px to 356px to match it with your image.
The .backhead class should look like this after

Code: Select all

    background: #0080da;
    background: -moz-linear-gradient(top, #0080da 0, #006db9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0080da), color-stop(100%, #006db9));
    background: -webkit-linear-gradient(top, #0080da 0, #006db9 100%);
    background: -o-linear-gradient(top, #0080da 0, #006db9 100%);
    background: -ms-linear-gradient(top, #0080da 0, #006db9 100%);
    background: linear-gradient(to bottom, #0080da 0, #006db9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0080da', endColorstr='#006db9', GradientType=0);
    height: 356px;
    min-height: 64px;
    background-image: url(./images/test.png);
    background-repeat: no-repeat;
    background-position: center;
at then at the end you need to remove

Code: Select all

border-bottom: 1px solid #3399FF; 
in the .above class in the myinvision.css file
That should be all test it and report back to me if that's what you want.
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Mannix_
Registered User
Posts: 2029
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: Header background (logo) image - How to change

by Anonymous » Tue Nov 21, 2017 8:13 pm

Hi mannix!
Its worked in parts. The size of the header changed, but my logo doesn't appear.

It's "biglogo.jpg" in "/theme/images".

colours.css

Code: Select all

/* Round cornered boxes and backgrounds
---------------------------------------- */
.wrap {
	color: #536482;
    max-width: 1200px;
    margin: 0 auto;
    min-width: 680px;
    padding: 0 20px;
}

.headerbar {
	color: #FFFFFF;
}

.headerbar  {
    height: 120px;
    min-height: 64px;
    padding-top: 0px;
	max-width: 1200px;
    margin: auto;
}

myinvision.css

Code: Select all

.above {
    background: #444547;
    background: -moz-linear-gradient(top, #444547 0, #2f2f31 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444547), color-stop(100%, #2f2f31));
    background: -webkit-linear-gradient(top, #444547 0, #2f2f31 100%);
    background: -o-linear-gradient(top, #444547 0, #2f2f31 100%);
    background: -ms-linear-gradient(top, #444547 0, #2f2f31 100%);
    background: linear-gradient(to bottom, #444547 0, #2f2f31 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444547', endColorstr='#2f2f31', GradientType=0);
    font-size: 13px;
    height: 10px;
    display: block;
    -webkit-box-shadow: inset 0px 1px 0 #757575;
    -moz-box-shadow: inset 0px 1px 0 #757575;
    box-shadow: inset 0px 1px 0 #757575;
    margin: auto;
}
and

Code: Select all

.backhead {
background-image: url(./images/biglogo.jpg);
    background-repeat: no-repeat;
    background-position: center;
	background: #0080da;
    background: -moz-linear-gradient(top, #0080da 0, #006db9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0080da), color-stop(100%, #006db9));
    background: -webkit-linear-gradient(top, #0080da 0, #006db9 100%);
    background: -o-linear-gradient(top, #0080da 0, #006db9 100%);
    background: -ms-linear-gradient(top, #0080da 0, #006db9 100%);
    background: linear-gradient(to bottom, #0080da 0, #006db9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0080da', endColorstr='#006db9', GradientType=0);
    height: 356px;
    min-height: 64px;
}
The size of the header changed, but my logo doesn't appear. Why?
Anonymous
I am too lazy to register
Posts: 3265
Joined: Thu Mar 15, 2007 6:50 am

Re: Header background (logo) image - How to change

by Mannix_ » Wed Nov 22, 2017 9:31 am

Did you cleared the browser cache ? Can you link me to your board it would be easier to find the issue. If you don't want to do that publicly send me a pm.
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Mannix_
Registered User
Posts: 2029
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: Header background (logo) image - How to change

by Anonymous » Wed Nov 22, 2017 8:18 pm

I just send you the link of my board.
Anonymous
I am too lazy to register
Posts: 3265
Joined: Thu Mar 15, 2007 6:50 am

Re: Header background (logo) image - How to change

by Mannix_ » Thu Nov 23, 2017 9:24 am

Ok all you have to do is to move this

Code: Select all

    background-image: url(./images/biglogo.jpg);
    background-repeat: no-repeat;
    background-position: center;
to the bottom of the .backhead class. You have it at the top right now and that's why it doesn't show or you could just remove the colours settings from that class

Code: Select all

background: #0080da;
    background: -moz-linear-gradient(top, #0080da 0, #006db9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0080da), color-stop(100%, #006db9));
    background: -webkit-linear-gradient(top, #0080da 0, #006db9 100%);
    background: -o-linear-gradient(top, #0080da 0, #006db9 100%);
    background: -ms-linear-gradient(top, #0080da 0, #006db9 100%);
    background: linear-gradient(to bottom, #0080da 0, #006db9 100%);
It should look like this after:

Code: Select all

    background: #0080da;
    background: -moz-linear-gradient(top, #0080da 0, #006db9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0080da), color-stop(100%, #006db9));
    background: -webkit-linear-gradient(top, #0080da 0, #006db9 100%);
    background: -o-linear-gradient(top, #0080da 0, #006db9 100%);
    background: -ms-linear-gradient(top, #0080da 0, #006db9 100%);
    background: linear-gradient(to bottom, #0080da 0, #006db9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0080da', endColorstr='#006db9', GradientType=0);
    height: 356px;
    min-height: 64px;
    background-image: url(./images/biglogo.jpg);
    background-repeat: no-repeat;
    background-position: center;
or like this :

Code: Select all

    height: 356px;
    min-height: 64px;
    background-image: url(./images/biglogo.jpg);
    background-repeat: no-repeat;
    background-position: center;
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Mannix_
Registered User
Posts: 2029
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt

Re: Header background (logo) image - How to change

by Anonymous » Thu Nov 23, 2017 7:44 pm

Wow, it's worked.
Is crazy how only the position of this code made my logo appear/disapper.

Thanks a lot man, have a nice weekend.
Thanksss!!!
Anonymous
I am too lazy to register
Posts: 3265
Joined: Thu Mar 15, 2007 6:50 am