phpBB • Free and Open Source Forum Software

Anonymous · 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

Mannix_ · 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.

Anonymous · 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?

Mannix_ · 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.

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

I just send you the link of my board.

Mannix_ · 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;

Anonymous · 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!!!

phpBB • Free and Open Source Forum Software

MyInvision

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

Header background (logo) image - How to change

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

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

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

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

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

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

advertisements