phpBB • Free and Open Source Forum Software

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

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

phpBB • Free and Open Source Forum Software

MyInvision

Changing banner color - MyInvision

Changing banner color

Re: Changing banner color

advertisements