phpBB • Free and Open Source Forum Software

RSS Facebook Twitter
Menu

MyInvision

Variation in color - MyInvision

Variation in color

by leonhoen » Tue Dec 19, 2017 3:36 pm

I tried to make a variation in color for the top of the style.

I can find a part in colours.css and a part in myinvision.css (searchbox), but the sides of the header remain in old blue colour.

Is there a way to make a variation on colour for the topbar easy?
leonhoen
Registered User
Posts: 23
Joined: Tue Dec 19, 2017 3:33 pm
Top

Re: Variation in color

by Mannix_ » Tue Dec 19, 2017 6:53 pm

Can you link me to your board or post a screenshot of what you have done so far ?
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: 2028
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Top

Re: Variation in color

by leonhoen » Tue Dec 19, 2017 9:08 pm

in colours.css I adjusted the #codes for .headerbar

Code: Select all

.headerbar  {
	background: #6633da;
    background: -moz-linear-gradient(top, #6633da 0, #6633b9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6633da), color-stop(100%, #6633b9));
    background: -webkit-linear-gradient(top, #6633da 0, #6633b9 100%);
    background: -o-linear-gradient(top, #6633da 0, #6633b9 100%);
    background: -ms-linear-gradient(top, #6633da 0, #6633b9 100%);
    background: linear-gradient(to bottom, #6633da 0, #6633b9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6633da', endColorstr='#6633b9', 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: 0px;
	max-width: 1200px;
    margin: auto;
}
in myinvision.css I changed also colour-code

Code: Select all

.searchback {
    background-color: #6633cc;
    padding: 14px;
    -webkit-box-shadow: inset 0px 1px 0 #6633cc, 0 0 1px #c333ed;
    -moz-box-shadow: inset 0px 1px 0 #6633cc, 0 0 1px #c333ed;
    box-shadow: inset 0px 1px 0 #6633cc, 0 1px 0#c333ed;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 0px 1px 0px #6633cc;
}
But on a laptop full screen I get the blue still on the sides.

I cannot show now because it's a live forum, and I don't want to dazzle the people:-)
leonhoen
Registered User
Posts: 23
Joined: Tue Dec 19, 2017 3:33 pm
Top

Re: Variation in color

by Mannix_ » Wed Dec 20, 2017 7:38 am

I think i know the problem I made duplicate when it comes to the headbar and to fix that you need to remove all the colour settings from .headbar in colours.css and apply them in the .backhead in the myinvision.css file also there will be a blue border on top to change that edit .above in the myinvision.css border-bottom: 1px solid #3399FF;
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: 2028
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Top

Re: Variation in color

by leonhoen » Wed Dec 20, 2017 4:10 pm

THX! I will try that. If I have anymore issues I will get back.
leonhoen
Registered User
Posts: 23
Joined: Tue Dec 19, 2017 3:33 pm
Top

Re: Variation in color

by leonhoen » Wed Dec 20, 2017 4:40 pm

leonhoen wrote:THX! I will try that. If I have anymore issues I will get back.
Works like a charm!
leonhoen
Registered User
Posts: 23
Joined: Tue Dec 19, 2017 3:33 pm
Top