• Welcome to the all-new Kolakube support, the official place to get help for Marketers Delight, XFtoWP, CryptoWP, and other WordPress products! Please login with your account details to access private support forums.

[Drop-in] Header Cover Full-Size Background Photo

This is a simple drop-in that modifies the behavior of the Header Cover Featured Image setting. By enabling this drop-in, the featured image you set will blend the background photo into both the header and headline block area.

What the default Header Cover setting looks like:

Screen Shot 2018-05-12 at 2.48.09 AM.png

...and this is what the drop-in modifies it to look like:

Screen Shot 2018-05-12 at 2.49.02 AM.png

Pretty big difference! At some point, maybe as soon as MD4.8, this will be a built-in feature and this Drop-in no longer needed. I thought this would be useful for some of you in the meantime.

DROP-IN INSTALLATION INSTRUCTIONS

1) First, make sure your site is running the MD child theme (you can download the MD starter theme from your account)

2) Download the Drop-in file below:

View attachment header-cover.php

3) Upload the file into your child theme folder via FTP, preferably into a /dropins/ folder (for organization reasons), but you can upload it anywhere

4) Assuming you uploaded the file into the /dropins/ folder (create one if you haven't already), add this line anywhere in your functions.php file, then save and upload:

include_once( get_stylesheet_directory() . '/dropins/header-cover.php' );


5) Finally, add the following CSS to your style.css file to make your header logo and menu text and links white:

.has-header-cover .header {
background-color: transparent;
color: #fff;
}

.has-header-cover .header .logo a,
.has-header-cover .header .tagline,
.has-header-cover .header .menu > .menu-item > a > .menu-item-title,
.has-header-cover .featured-image .headline,
.has-header-cover .featured-image .byline {
color: #fff;
}

.has-header-cover .featured-image .byline a {
border-bottom-color: #ddd;
color: #ddd;
}

@media all and (max-width: 900px) {
.has-header-cover .header .sub-menu .menu-item-title {
color: #fff;
}
}


After that, any post or page you have already made a header cover will adapt to the new layout.

Image 2018-05-12 at 2.55.19 AM.png

 
Last edited by a moderator:

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,562
Reaction score
1,851
That's what's throwing me off and making me think that the function I pointed out to you got modified somewhere in your child theme. When I look at your sites source I see the following:

Image 2018-06-17 at 8.17.40 PM.png

There's something modifying the script because that's not the original code in your source. I couldn't think of anywhere else this script would be modified from if not your child theme, or a plugin, are you sure there isn't anything there with that function in it?

 
Comment

camerondare

Active member
Messages
86
Reaction score
30
That's what's throwing me off and making me think that the function I pointed out to you got modified somewhere in your child theme. When I look at your sites source I see the following:

View attachment 1205

There's something modifying the script because that's not the original code in your source. I couldn't think of anywhere else this script would be modified from if not your child theme, or a plugin, are you sure there isn't anything there with that function in it?
I see this in my CHILD THEME functions.php

EDIT: Got it. Works now.  One thing is that it shows menu icon + menu, instead of just the icon menu like on gamequitters.com mobile. Any idea how I can change that? 

Thanks man, really appreciate all of your help.

 
Last edited by a moderator:
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,562
Reaction score
1,851
Awesome. I'm removing the "Menu" text in MD4.8, but you can hide it for now with this CSS:

CSS:
.header-menu-trigger-text { display: none; }
 
Comment
Top