Add featured image support to header

Illdy
1

It has the jumbotron support for the frontpage and header image support for the underlying pages.
However, I’m trying to add support so that I still have the jumbotron feature on the homepage, then check if a page/blog has a featured image and use this.
If no featured image is found, use the general header image.

I’m not all that good with php so I’m struggling with this issue.

This is the current header (style tag that needs to be edited I presume?):

<header id="header" class="<?php if( is_front_page() ): echo 'header-front-page'; else: echo 'header-blog'; endif; ?>" style="background-image: url('<?php if( is_front_page() ): echo ( ( $jumbotron_general_image ) ? esc_url( $jumbotron_general_image ) : '' ); else: echo esc_url( get_header_image() ); endif; ?>');">

I guess I have to add something like this in between

<?php if( has_post_thumbnail() ): ?>
			<?php the_post_thumbnail( 'illdy-blog-list' ); ?>
<?php endif; ?>

But not sure how to write it so it works as IF ELSEIF ELSE

Thanks in advance for pointers

2

Hello Andreas,

What you want to achieve comes short to the free support plan of this theme.
You might want to have a look here to better understand the syntax

Have a great day!

3

Thanks for feedback.

I got it working so the theme is more flexible and has the option to create different headers for all pages and posts.

4

Hello @andreas1,

That’s good news, happy to hear that you already fixed the issue.

Have a great day!

5

How would I remove the header image and header title from all the pages?

6

Hello @nextand,

Can you please clear out exactly what you want to hide?
Screenshots would be very much appreciated.

If you want to hide all the header content, add this code inside Dashboard > Appearances > Editor > Style.css:

#header{
display: none;
}

Looking forward to the clarification.
Regards

7

Thanks for the reply. But when I add that code into the style.css, everything (jumbotron image) disappears from all the pages.

I would like to remove the blank space where the header image usually goes. ex: http://andreain.space/cakes/

I would also like to remove the title in the center of the header section. ex: “test”

Would there be a possibility to change the size of the header section?

8

Hi,

I’m sorry but I’m really having trouble to understand

So, the header is already blank on the page you pointed out, with a white background.
Not sure what do you mean by removing the blank space…

To remove the title in the center of the header section add this code to the same Style.css:

.page .bottom-header{
display: none;
}

Also I’m not sure what is the header section size you want to change.

Please help me help you and include some screenshots.
Thank you!

9

Sorry for not being clear enough but adding the code resolved the issue. Thank you so much!

The only other issue is changing the font color of the menu on the pages from white to black but have the font color (white) remain the same on the homepage.

Could you help me out?

10

Hi @nextand,

Use this CSS code:

#header .top-header .header-navigation ul li a {
    color: #000 !important;
}
.home #header .top-header .header-navigation ul li a {
    color: #fff !important;
}

Should do the trick.

PS: Sorry @andreas1 for hijacking your thread

11

Thanks! It worked.

But the last issue I am having is that the menu icon (3 dashes) on the mobile site is still white. It would be great if you could provide me the code to make it black.

I would really appreciate it.

12

Also, on the dropdown menu on the frontpage, the font is now white as well. So, I am not able to see it. screenshot: http://imgur.com/6dkjp0H

13

Can anyone help me?

14

Hello @nextand,

I tried to visualize the issue, but the theme is no longer installed on your link:
http://andreain.space/

Can you please activate it again before I send you some code to fix the dropdown color?

Regards

15

Sorry, that was a demo website. I moved the site to this url: http://stansweetcakes.com

This issue is that I am not able to see the menu icon (3 dashes) on phones since it’s white. Would it be possible to change it black?

Sorry again for the confusion. I really appreciate your help.

16

To be more clear: I’d like to make the menu icon on phones, black. But keep the homepage menu icon white.

17

Hello @nextand, I will get back to you with a solution by tomorrow, even though this falls good outside the support plan but more in the custom work type.

If you can synthesize everything again it would be great.

You want white menu items on the homepage but black on all the others pages.
Black menu for mobile lines on all pages.
The sub-menu, white background with black text?

Regards

18

I would like Black menu for mobile lines on all pages besides the homepage.

I really appreciate your help. Thank you for assisting me.

19

Hello @nextand,

Use this CSS code:

@media only screen and (max-width: 992px){
.open-responsive-menu .fa {
    color: #000 !important;
}
.home .open-responsive-menu .fa {
    color: #fff !important;
}
}

This should do the trick, let me know otherwise.
Regards

20

Thank you so much! The issue has been fixed. I appreciate all the help. :slight_smile: