• 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.
  • Support reminder: Please do not use private messaging for product support. Post questions to the respective forums to get help.

Header Image Problems

Richard Brown

Active member
Md
Messages
84
Reaction score
11
I created in Canva an image for the header. This is the link - https://www.lilienbrown.net/wp-content/uploads/2021/08/Brownlove.png

I uploaded it in site design, featured image, full header cover. It did not fit. What is the size that would work.

I realize Canva may or may not be the best option but I want a header image for the site. I am open to all suggestions.

It also inserted the image the the headings for this post. When I removed the featured image the title became inside of a gray box. Is there a way to change this?
 

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,489
Reaction score
1,820
Hey Richard, the "Full header cover" option is designed to place a full-width background image across the entire header and headline area of your site. This also reflects in the headline on single posts to keep the images consistent.

You may want to try just "above/below headline" to display the image banner across the content area.
 
Comment

Richard Brown

Active member
Md
Messages
84
Reaction score
11
I tried above headline and nothing appears. I also reduced the file size to equal the full content width.

I am trying to get a new header that once it is on the site and I canals use on social media. Am I doing this the correct way or am I missing a step?
 
Comment

Richard Brown

Active member
Md
Messages
84
Reaction score
11
Is there code that would allow me to add the header.php to change the header?

I found this online but have no idea what it means or how to make it work.

This is the link to the file I want to use:


#header {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg")
no-repeat bottom center; }
#headerimg {
margin: 7px 9px 0;
height: 192px;
width: 740px; }
 

Attachments

  • Brownlove-e1628879963300.png
    Brownlove-e1628879963300.png
    343.4 KB · Views: 4
Comment

Richard Brown

Active member
Md
Messages
84
Reaction score
11
I tried the following in additional CSS.

.header {
background-image: url("https://www.lilienbrown.net/wp-content/uploads/2021/08/Brownlove-e1628879963300.png"); /* Replace with the url of the image you want to use */
height: 499px; /* Only use this line if you want a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}

It works but obviously it is too large. What size do you believe would work better. It also does not adjust on IOS. I may need to find a different image. Any suggestions?
 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,489
Reaction score
1,820
Hey Richard, thanks for your patience with my reply!

Have you tried setting the banner image to the "Full width above headline" position? That looks like a better setup for this style of image than using it as a background image in the header.

I see you have the wedding photo currently set as your featured image, you may want to use the large banner as the featured image instead and place the wedding photo inline your content.
 
Comment

Richard Brown

Active member
Md
Messages
84
Reaction score
11
I set it "Full width above headline" position" and nothing at all appears. I deleted the code prior to doing that.

I now have a version of the header image as the featured image. It still does not appear.

Very frustrating. Any suggestions on how to get something besides the basic header. I want to start sharing this with family and friends but would like the header to work prior to that.
 
Comment

Richard Brown

Active member
Md
Messages
84
Reaction score
11
This is the screen shot showing that I set one of the banner images (I have edited it to make it smaller) as the featured image above headline.
 

Attachments

  • Screen Shot 2021-08-16 at 3.15.01 PM.png
    Screen Shot 2021-08-16 at 3.15.01 PM.png
    517.5 KB · Views: 3
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,489
Reaction score
1,820
This is the screen shot showing that I set one of the banner images (I have edited it to make it smaller) as the featured image above headline.
Ah, set the Featured image settings in the post editor itself. The MD > Site design > content are the global default settings, and you most likely have a manual configuration set on the post itself. Sorry for the confusion!
 
Comment

Richard Brown

Active member
Md
Messages
84
Reaction score
11
OK. If that is the best you can do I may have to live with it or find another theme. My goal was to replace the header and make it work universally so I do not have to make this change on every post. Pus, your option is not visible on the Bookshelf or the Stream.

What I wanted to do was to replace the header, which now seems redundant and useless.

I know in a previous job we worked with you and were able to replace the header with an image. I presume that is not possible anymore and this is the best I can do.
 

Attachments

  • Screen Shot 2021-08-17 at 9.59.33 AM.png
    Screen Shot 2021-08-17 at 9.59.33 AM.png
    1.6 MB · Views: 2
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,489
Reaction score
1,820
It's possible, but an image like this doesn't really work with the Header cover settings. Those settings are meant for photos of landscapes, scenery, textured backgrounds, and other decorative types of photos to complement the headline and byline text that sits on top of it. The image you've made has its own text on it and will always clash as a header background, which is why I suggested the "Full width above headline" option as it sits on its own.

I went ahead and removed the featured image you set to the post and added the banner to show on every page of your site. You can still use different featured images on individual posts and this banner will still show everywhere else.

I added the banner with just some simple markup in your child theme functions.php file which you can swap out later if you'd like. Hopefully this is a good start to how you wanted this banner to display.
 
Comment

Richard Brown

Active member
Md
Messages
84
Reaction score
11
Thanks. It will have to work as it is the only option that works. I presume there is no way to remove the blank, redundant header that still appears? It makes it look very weird.

Would this image work better as a header? https://www.lilienbrown.net/wp-content/uploads/2021/08/Loveheader.png

I do not like it very much. The other one I use as my header on LinkedIn and will do so on Facebook. Was hoping to have consistency across platforms. If this one might work I could remove the writing and work on fixing it with better images. I am not a graphic artist but if I knew what size and steppe was needed I might hire one.
 

Attachments

  • Loveheader.png
    Loveheader.png
    486 KB · Views: 0
Comment

Richard Brown

Active member
Md
Messages
84
Reaction score
11
When I check the other pages and posts I do not see the banner.
 

Attachments

  • Screen Shot 2021-08-17 at 3.28.06 PM.png
    Screen Shot 2021-08-17 at 3.28.06 PM.png
    804.2 KB · Views: 2
Comment

Richard Brown

Active member
Md
Messages
84
Reaction score
11
Alex, if the header image is for photos of landscapes, scenery, textured backgrounds, and other decorative types of photos to complement the headline and byline text that sits on top of it.

Would this one work? If not, can you make suggestions on how I could do a collage that might work? If it could work, how do I make it the banner image.

I also made it 1000 by 288 as a smaller size might work better.


I apologize for being a pain, but this matters as my wife died fourteen weeks ago and I have a lot to write about and have a good header will help.

Thanks.
 

Attachments

  • CollageJan.png
    CollageJan.png
    410 KB · Views: 2
Last edited:
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,489
Reaction score
1,820
Not a pain whatsoever, I want to get the best solution here so I appreciate the extra information here. I'll have an update later this evening.
 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,489
Reaction score
1,820
Hey Richard, I understand much clearer what you're looking for. I took the banner you made and set it as your site logo in MD > Site Design > Header > Logo. I also changed the header background color to the same color as the image in MD > Site Design > Colors > Header.

I think we can still make it better. Do you know the name of the font in the banner image you made? We can match the nav menu links, or remove them altogether, and make the header even nicer with a matching font.

I'll document how I do it for your own knowledge, and I'd like to design it well as a small tribute to your wife and writings. :)
 
Comment

Richard Brown

Active member
Md
Messages
84
Reaction score
11
Alex, thank you so very much.

The font I used for the title in Canva was Playlist. It think it was size 80. For Love Never Dies it was Lato 20 pt. I can remove both from the document if that would help.

It is not the best photo I have of her but it is a very nice one. I presume more than one is not a good idea.

I am open to any and all suggestions on how to improve it. Your offer is both generous and very much appreciated. It made me weep as I wrote this response.
 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,489
Reaction score
1,820
Alex, thank you so very much.

The font I used for the title in Canva was Playlist. It think it was size 80. For Love Never Dies it was Lato 20 pt. I can remove both from the document if that would help.

It is not the best photo I have of her but it is a very nice one. I presume more than one is not a good idea.

I am open to any and all suggestions on how to improve it. Your offer is both generous and very much appreciated. It made me weep as I wrote this response.
Got it, I'd actually like to include at least two photos in the header if you have two large images you can send me or attach here.
 
Comment

Richard Brown

Active member
Md
Messages
84
Reaction score
11
Got it, I'd actually like to include at least two photos in the header if you have two large images you can send me or attach here.
Thanks Alex, I am never good at selecting photos so I added in a few more. Let me know how I can be of help.
 

Attachments

  • Jan and rich Forever.jpg
    Jan and rich Forever.jpg
    119.9 KB · Views: 3
  • Jan Lilien after being introduced by her husband.jpg
    Jan Lilien after being introduced by her husband.jpg
    91 KB · Views: 2
  • JanatPeace.jpg
    JanatPeace.jpg
    258.7 KB · Views: 2
  • JanLilien.png
    JanLilien.png
    256.3 KB · Views: 2
  • JanRich.jpeg
    JanRich.jpeg
    968.5 KB · Views: 1
Comment
Top