MyInvision

Changing banner color - MyInvision

Changing banner color

by Yggdr » Thu Oct 25, 2018 2:56 pm

Hi everyone,

I've just succesfully installed the MyInvision style. Basically, I dont want to do anything fancy, I just want to change the existing blue banner to make it yellow, that's all. Any advice on how I can do this? I have zero coding experience I'm affraid.
Yggdr
Registered User
Posts: 3
Joined: Thu Oct 25, 2018 2:27 pm
Contact:

Re: Changing banner color

by Mannix_ » Thu Oct 25, 2018 5:45 pm

You need to open the myinvision.css file then find

Code: Select all

.backhead {
    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: 120px;
    border-bottom: 1px solid #005189;
    min-height: 64px;
    -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 colors you can delete all the extra background rules and leave only the first one then change the colors of the border and box shadow so it looks like this:

Code: Select all

.backhead {
    background: #ffff00;
    height: 120px;
    border-bottom: 1px solid#ffff00;
    min-height: 64px;
    -webkit-box-shadow: inset 0px -1px 0 #ffff00;
    -moz-box-shadow: inset 0px -1px 0 #ffff00;
    box-shadow: inset 0px -1px 0 #ffff00;
    padding-top: 12px;
}

Then find

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;
    border-bottom: 1px solid #3399FF;
    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 just change the border color to yellow like this:

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;
    border-bottom: 1px solid #ffff00;
    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;
}
Save Upload the file and clear the cache.
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.2.x etc. contact me here or here.
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: 676
Joined: Sun Oct 25, 2015 2:56 pm
Contact: