Can't figure out header color change

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
Aleksandar
Registered User
Posts: 126
Joined: Tue Feb 01, 2005 8:23 pm

Can't figure out header color change

Post by Aleksandar » Sun Aug 11, 2019 3:37 am

I have what I believe is a CSS issue with our current style that I just can't figure out. We purchased this style on ThemeForest and have since modified it to get it looking the way we like however I'm having an issue with the header. Specifically, a portion of the header image is "lighter" than it should be given the color of the image. See below:

www.bearsfansonline.com
Screenshot_2019-08-11.png
By using the inspect tool, I've narrowed it down to the header-bg class however after spending way to much trying to tweak it, I just can't figure out why it's looking this way. I'm guess it has something to do with transparency but can't figure out what.

Anyone happen to have any suggestions?

User avatar
3Di
Former Team Member
Posts: 14355
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Can't figure out header color change

Post by 3Di » Sun Aug 11, 2019 3:40 am

Aleksandar wrote:
Sun Aug 11, 2019 3:37 am
We purchased this style on ThemeForest
That's where you should seek support, usually.
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
👨‍🏫 | Take a tour to | The Studio | 👨‍🏫

Aleksandar
Registered User
Posts: 126
Joined: Tue Feb 01, 2005 8:23 pm

Re: Can't figure out header color change

Post by Aleksandar » Sun Aug 11, 2019 3:49 am

3Di wrote:
Sun Aug 11, 2019 3:40 am
Aleksandar wrote:
Sun Aug 11, 2019 3:37 am
We purchased this style on ThemeForest
That's where you should seek support, usually.
Usually, yes. But the author hasn't responded to any comments in a month now and I'm not sure if he will ever return. Since I barely know any html/CSS, I thought I'd check here with more experienced users in case the issue was something easy.

User avatar
Lumpy Burgertushie
Registered User
Posts: 66824
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Can't figure out header color change

Post by Lumpy Burgertushie » Sun Aug 11, 2019 3:54 am

looks like the color of the background of the banner image and the background color of the page/header are not the same. you could take the banner image and edit it to match the board background color or youcan change all of the background colors of the board to match the image.

robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

Aleksandar
Registered User
Posts: 126
Joined: Tue Feb 01, 2005 8:23 pm

Re: Can't figure out header color change

Post by Aleksandar » Sun Aug 11, 2019 4:21 am

Lumpy Burgertushie wrote:
Sun Aug 11, 2019 3:54 am
looks like the color of the background of the banner image and the background color of the page/header are not the same. you could take the banner image and edit it to match the board background color or youcan change all of the background colors of the board to match the image.

robert
Hi Robert, the background colors of the board are #141B28. The background of the banner image when viewed as a direct link is #141B28. However, when the image is shown on the forum, the background color becomes #1C202C. Similarly, all the other colors are "lighter" as well, which is what leads me to believe it is a transparency issue of some sort.

User avatar
Talk19Zehn
Registered User
Posts: 400
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: Can't figure out header color change

Post by Talk19Zehn » Sun Aug 11, 2019 11:03 am

Hello, first mentioned: Tests were only done with the browser tool for your logo area. Please do not forget the backup before making any changes.

The forum (html, body, #wrap ... ) has the background ==> #141B28

Code: Select all

html, body {
	background-color: #141B28;
}

Code: Select all

#wrap {
	background: #141B28;
}
---> but the logo has this background (!) color ==> #151B29
151B29bgcolor.png
151B29bgcolor.png (48.54 KiB) Viewed 366 times

Your logo will be integrated (inline): Hint => In it the CSS ==> opacity: 1;

Code: Select all

#page-header .header-bg {
	background-image: url('https://i.imgur.com/KCn6fUA.png');
	opacity: 1;
}
overwrites the following CSS statement ==> opacity: .4; in this class

Code: Select all

.header-bg {
	position: absolute;
	background: transparent;
	top: -60px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -2;
	opacity: .4;
	background-size: cover;
	background-position: center;
}

My conclusion (test, test ...) please change the relevant backgrounds if necessary to #151B29

Code: Select all

html, body {
	background-color: #151B29;
}

Code: Select all

#wrap {
	background: #151B29;
}
and change too

Code: Select all

#page-header .header-bg {
	background-image: url('https://i.imgur.com/KCn6fUA.png');
}

Code: Select all

.header-bg {
	position: absolute;
	background: #151B29;
	top: -60px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
}
Please test again. In my opinion, your logo etc. is then correctly and there should be no further conflicts - I hope so.
The color differences between #151B29 and #141B28 are not very big. Nevertheless, no guarantee, because I have not studied other classes or IDs into the browsertool in conjunction with opacity!
So I have found a variety of CSS options, which are also partly integrated into events. A contiguous deeper tuning is not possible. Good luck and best regards.


Edit: bg-color your online realized logo (see image).
World Meteorological Organization (WMO) Weather - Climate - Water
phpBB Advent calendar: sought and found ..
BTW: My own works - phpBB - read more: ongray-design-de or look here: phpBB VT Theme
Style: Star Trek - StarTrekExcerpts - Fan-Board

Post Reply

Return to “[3.2.x] Styles Support & Discussion”