MyInvision

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

Header background (logo) image - How to change

by kukayasko » 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
kukayasko
Registered User
Posts: 7
Joined: Sun Nov 19, 2017 1:59 pm
Contact:

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.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.
User avatar
Mannix_
Registered User
Posts: 151
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

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

by kukayasko » 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?
kukayasko
Registered User
Posts: 7
Joined: Sun Nov 19, 2017 1:59 pm
Contact:

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.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.
User avatar
Mannix_
Registered User
Posts: 151
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

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

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

I just send you the link of my board.
kukayasko
Registered User
Posts: 7
Joined: Sun Nov 19, 2017 1:59 pm
Contact:

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;
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.
User avatar
Mannix_
Registered User
Posts: 151
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

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

by kukayasko » 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!!!
kukayasko
Registered User
Posts: 7
Joined: Sun Nov 19, 2017 1:59 pm
Contact:


cron