Bill Kochman

If there is one thing I have never liked -- including on Facebook -- it is the gray-to-white gradient which overlays all cover images from bottom to top. It looks ugly, and it makes colors -- particularly light colors such as white, yellow, light blue, etc. -- look dirty. So, where in the AdminCP settings -- or perhaps in a physical file on my hard drive -- can I find the CSS code to remove it? I want all of my colors clean and bright looking, and not dull and dingy. Thanks!

Be the first person to like this.
JohnJr

Do you mean the terrible white-wash over our cover image like in this forum?

The top image is our current cover image and the bottom image is what it could look like.

 

Here is the CSS for this forums cover image.  Didn't include change both text to black.

.profiles_banner .cover::after {     content: '';     display: block;     background: linear-gradient(0deg, #fff 0, rgba(149, 149, 149, 0.9), rgba(255, 255, 255, 0) 35%);     position: absolute;     top: 0;     left: 0;     right: 0;     bottom: 0; }

Be the first person to like this.
JohnJr

If so then send me a PM with the link to your profile page you want fixed and tell me what you want.  I can certainly try to improve it. :)

Be the first person to like this.
Bill Kochman

Yes, I am talking about that gradient code. It needs to be totally stripped out, because it is ugly. I think Facebook began that business. I don't know why they like it so much.

This should NOT need to be done on an account by account basis. This is probably hard-coded into each theme. I just need to know where in each theme's CSS code, the gradient code is actually located.

And actually, at least on the cover images I have made to date -- which is quite a few of them -- the gradient goes from gray to transparent as you move up the screen. For example, if you create a new account, where there is no cover image yet, you will plainly see the gradient overlay.

Be the first person to like this.
JohnJr

Sorry, I don't know what theme you are using that is why I needed a link to anyone's public profile, even a fake one.  You can use Firefox inspector to locate the CSS to change.

Be the first person to like this.
Bill Kochman

Hi John. I am using the Facebook Clone theme. My point was that there should just be one CSS block to change in the active theme, unless phpFox has something in their code somewhere which overrides deleting the gradient in individual themes. I hope not. I will look into it and let you know if I meet with success.

On a related note, do you know why it is that when you attempt to change HTML code or CSS code, the editor window only slides out a small ways, instead of revealing the full page? That makes it very difficult to edit a page.

I looked for a handle on the border to see if the page could be pulled out further, but I found none.

Be the first person to like this.
Bill Kochman

Well, I looked in both the inspector in Firefox, as well as in the HTML and CSS code for the Facebook Clone theme. I only found ONE place where a gradient paramenter is even mentioned, and that is at line 46 in the code:

        background: linear-gradient(to right, rgba(red(@nav-bg), green(@nav-bg), blue(@nav-bg), 0) 0%, rgba(red(@nav-bg), green(@nav-bg), blue(@nav-bg), 0.7) 25%, @nav-bg 100%);

I already knew that it was not related to the cover image code, but I removed it just to make sure. Removing it, and rebuilding the core theme and clearing the cache in phpFox, as well as in Firefox, did not help. the gradient overlay still remains over cover images.

You know, a few weeks ago, I had an experienced developer and fellow phpFox script owner -- experienced in PHP, Java and CSS -- tell me that it was not possible to remove the gradient. I am not sure why he said that, but he did.

I hope that my earlier suspicion is not true. That is, that the gradient is hard-coded into phpFox, so that it even overrides individual theme CSS code in some instances.

Be the first person to like this.
JohnJr

So, don't remove it from the code.  What you do is overide it by adding it to the CSS Editor.  This way when you upgrade, it doesn't get wrote over in the code.  Everything in the CSS Editor remains the same during updates and upgrades.  TIP:  In my CSS Editor, I put a

/*---------------------------- added CSS -------------------------*/

between the original phpfox CSS and my overides so I know what to remove if I am having issues.

Last update on November 11, 2020 by JohnJr.
Be the first person to like this.
JohnJr

So are you using Phpfox Facebook theme, Foxexpert Facebook theme or YouNet Facebook theme.  This is why I asked for a PM (private message to the page you want the gradiant removed as it would have taken me like 2 minutes to send you the code to paste in your CSS Editor :)

Be the first person to like this.
Bill Kochman

Ha! I didn't even know that there are three different Facebook themes. I assumed that there is just the one from YouNetCo, which is the one I am using.

Are you inferring that the code has to be removed from each individual user's profile page?

That doesn't seem to make sense. I mean, that gradient code is implemented globally across the site on all profile pages. So I would think that just making one change in the theme's CSS section would eliminate it on all users' profile pages. as well as on group pages, and wherever else that ugly thing is located.

Anyway, I am all ears. :)

Be the first person to like this.
Bill Kochman

Also, I paid $100 for the YouNetCo version of the theme. Are either of the other two any better, and are they also commercial products? Which, in your opinion, has the best support from its developers?

Be the first person to like this.
JohnJr

Try this.  Go to your theme and click edit.  Then on the left side you will see the menu CSS.  Click on CSS then put your cursor at the bottom of the current CSS Code and add two carriage returns and paste the following.  This worked on YouNet Site so I hope it works.

/*---------------------------- added CSS -------------------------*/

._is_profile_view .profiles_banner::after {     background-image: none; }

I just removed it since you said you didn't want any transition.  So having no background color give you the best cover image but if someone post a white cover image, they won't be able to see any of their info like their name and location.

 

Last update on November 12, 2020 by JohnJr.
Be the first person to like this.
JohnJr

In regards to which theme has better support.  Well since I am not very happy with YouNet at the moment (see other thread in regards to their Getting Started App) it would not be fair to judge their support at this time.

But I will say having around 125 third party Apps as I try to support our developers (most I don't use but like to see how they work and send some money their way to keep them going) I can honestly say (listing in alphabetical order) that Cespiritual and Scheinwelt-Media have the least amount of bugs and not only do they fix issue quickly when one is found, but also add features when asked as well as just add new feature out of the blue.  They are very dedicated coders and I applaud them.  There are a couple more that have good apps but when I pointed out ways to improve their product it was brushed off.

Be the first person to like this.
Hannah

Hi Bill Kochman,

I agree with the way JohnJr suggested in the previous comment by adding the below scripts at the end of the CSS file of your current theme:

._is_profile_view .profiles_banner::after {     background-image: none;}

Please do not forget to clear the cache and rebuild the core theme to apply this change. By the way, we would like to notice that the purpose of this gradient layer is to help user can see the text on the white cover photo. So please consider when you want to apply this change.

Regards,

 

Be the first person to like this.
Bill Kochman

Well, I did exactly as you said, John, but that code is not working with the YouNetCo Facebook Clone theme. I added the CSS code at the very bottom of the CSS file for the theme. Then I rebuilt the core theme. Then I cleared the cache. In fact, I did everything twice, including clearing my history in Firefox as well. But as I said, it was to no avail. :(

Be the first person to like this.
JohnJr

Sorry, I was assuming you were talking about the profile page but I could be wrong.  Not sure exactly what page/area you are talking about since you decline to PM me a link to the actual page the issue is on.  What should have taken a 3 post thread has turned into a 15 post thread.

Be the first person to like this.