Turn off gradient on main page only

  • Hi all,

    I’m used to building sites from scratch and new to wordpress and I’ve had to make a few concessions to save myself time in the long run.

    I like the image i’m using for the large main page banner but on the other pages it is smaller and the text becomes harder to read.

    The best solution i found was to use this css to make the gradient into a solid grey bar and it looked good enough on the desktop site:

    

.custom-header-media:before,
.panel-image:before {
background: none;
}

.custom-header-media:before {
background: linear-gradient(to top, rgba(35, 35, 35, 1) 90%, rgba(35, 35, 35, 1) 50%, rgba(35, 35, 35, 0) 50%) !important;
}

    However on going mobile the grey box fills the entire image space making it far less attractive.

    Options are removing the gradient entirely from the front page only which would be ideal, or being able to bring the height of the gradient down on just the mobilve version of the front page without affecting anything else.

    Suggestions very welcome!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • The image of the front page is something for design rather than an image for information or a ‘fixed’ image, both of which do not work the way it is implemented. The image is just for “decoration”, as it were, both on the front page and “inner” pages.

    If you consider the default image for the theme, it is a piece of art, nothing like a logo or an information type of photo. The upshot is that you need to use “art” for that front page image which yields a pleasing segment.

    My suggestion is not to use the header image on the front page. Everything tightens up and looks good. Then you can use a “featured image” if you want to get an image on each page.

    I was unable to see your page.

    Thread Starter danhillmanmusic

    (@danhillmanmusic)

    Thank you, sure I get that in theory. I’m using a shot of me and no graphics or logos on it and i think it suits the flow of the site quite well. It’s a shame there’s no simple way to edit css parameters on a page by page basis easily but the whole WordPress architecture seems to be a compromise of simple editing meaning you’re kinda railroaded a bit.

    I think I’m going to have to suck up the impact it has on the mobile site or the sake of legibility. There’s some other issues like adblockers killing the social links as well so this is small potatoes in comparison to that issue.

    I’ve also had issues with the site loading times and I’m not entirely sure what the problem is. Seems others have had the issue too. It’s working fine on mobile.

    I imagine a shot of yourself does not do well via the theme’s transofrmation of the header image. In my opinion these images have to be abstract so that any part of the image can be used as a pattern rather than a picture of anything (or anyone) in particular.

    There has never been an explanation of how the header image transforms or what sort of image should be used. So I would say there was a problem with the Theme’s documentation about the header image.

    As to loading times and adblockers, I don’t know anything, maybe someone else could help there.

    I still haven’t been able to see your site.

    Thread Starter danhillmanmusic

    (@danhillmanmusic)

    Thanks, I’ve been able to access the site with no problem this afternoon so I’m still concerned as to what’s not working! I’ve tried the above link to https://www.danhillman.co.uk a couple of times now and it’s loaded for me.

    I agree about the header image documentation. The way it transitions from a large image on the landing page into the banner seems a bit silly. I’m getting used the workaround though. Darkening the gradient into a solid semi-transparent grey block and dealing with the mobile site having the block cover the whole image is a price I’m willing to pay.

    Just tried to look again, but no luck.

    I would like to ask a question whether you have a cache on your site (or on your browser), this may explain some problems. (Especially if you see no change at all when you are making changes.) It may make some sense of my not seeing things and you are. Try looking at the site with another “clean” browser (i.e. one you have never looked at the site with).

    Thread Starter danhillmanmusic

    (@danhillmanmusic)

    It’s now not loading for me again either. It’s been down about 20 minutes straight now in Chrome including the dashboard.

    I’ve just tried with Tor Browser on the desktop and it’s loaded fine. Also as usual Safari on my phone is loading it too. Are you using Chrome as well?

    I installed a plugin to get an SSL certificate and I’m wondering if perhaps that has caused some issues however I’m not sure how to revert back to not having one.

    Using FireFox. Just tried Chrome, again no luck.

    You might want to speak with your ISP about your DNS settings. I don’t know about this but it has been a problem with seeing some of my sites in the past. Another shot in the dark, I am afraid.

    Thread Starter danhillmanmusic

    (@danhillmanmusic)

    Interesting. Thank you for persevering. It’s been up and now down again since then. I’ve contacted my Host about the DNS and also reset them to defaults in case something strange was happening.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Turn off gradient on main page only’ is closed to new replies.