Header appearance like Sparkling demo

Sparkling
1

Hi,

How do I make my site have the same header layout as the Sparkling demo? Specifically I want the large image across the top, but when I upload a header image onto my site I encounter the following problems:

  1. The image does not extend across the whole width of the browser window like the one on the demo does
  2. The title (“Sparkling” on the demo) disappears
  3. The menu bar (at the top on the demo, to the right of “Sparkling”) moves down to beneath the picture instead of above it.

Example here: http://s162195449.websitehome.co.uk/CoPA/

Thanks for any help.

2

I see that you haven’t looked into theme documentation. Please do so.

  1. Custom header image is used as logo and slider is completely unrelated from Custom Header image therefore you should remove it or use it properly.
  2. You should use featured images for your post that you want to display in slider. Here you can read more about featured images.
3

I can’t say whether or not the OP looked into the theme documentation, but I can assure that I have read it end to end and am left with the same problem as the OP: for the life of me, I cannot figure out how to add images to the main page’s slider.

You say, “you should use featured images for your post that you want to display in slider”; can you elaborate? I have also read the “about featured images” link you posted, and found it not useful.

On Theme Options > Main, I have the option to select a category for the featured post slider, as per the instructions. However, the only option is “Uncategorized” and I am unable to figure out how/where to add other categories or to add images into the categories. Can you provide further explanation on how to achieve this?

I really like the look and feel of the Dazzling theme, and I hope to keep using it, though right now this seeming inability to figure out how to add slider images to the main page is interfering with that plan.

Please help!

4

Slider is based on Posts which means that posts with their excerpts, titles and featured images are displayed in front page.

You should create Post like you would do for a blog and select featured images for them. To limit what posts are visible in slider you can use Post category for that.

There are no other options for this slider. Just Posts from specific Category.

Let me know if this helps.

5

In my case I’m looking for a static image at the top of the site at all times (very few of my posts will have associated images, so the slider would be largely redundant). It therefore seems as though I need the ‘Custom Header’ option, so I have disabled the slider by unchecking the “Check if you want to enable slider” box under Theme Options > Main tab. On with the header image then…

I have looked at the documentation, specifically Section 4 (Custom Header Image) and even watched the instructional video there. I uploaded an image at exactly the recommended size (300 x 76) and sure enough that appears at the top of my page. However, it has moved my menus down below the image (this looks OK and I can live with it) but the title text is nowhere to be seen. I realise that I can just overlay text onto the ‘logo’ image file, but I quite like the idea of having the image clear of text and having the site title text separate (like the demo). I have the “Show header text with your image” checkbox ticked, which I presume means that the text should show up, but it doesn’t, so what is the purpose of the “Show header text with your image” checkbox? This isn’t mentioned in the documentation at all.

6
  1. Image you have uploaded on your website you mentioned above is 1500px by 379px and nowhere near your mentioned 300px by 76px.
  2. If there is too many menu items that there is no longer space for logo the menu will be moved down but it shouldn’t happen in your case where you have only 4 menu items. Of course if the logo size wouldn’t be so big.
  3. This theme doesn’t support Title & Logo or Title & Descriptions. The only options are Title OR Logo and that’s how it will remain in foreseeable future for this theme to keep nav bar as small as possible.
7

Apologies - you’re absolutely right - I’d uploaded the wrong sized image. I’ve uploaded a 300 x 76 one but the title still doesn’t show. Fair enough then if the theme doesn’t support this, but the “Show header text with your image” checkbox is rather misleading.

I guess I can fall back to my original idea of placing text as part of the image/logo.

Thanks.

8

That option is part of WordPress itself when custom header is set for theme and I have no control over it really is misleading.

It is possible to add it via HTML as well but it will be much easier to create logo+text as image instead of trying to modify theme files.

It would look something like this:

<?php if( get_header_image() != '' ) : ?>

	<div id="logo">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>"  height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo( 'name' ); ?>"/></a>
		<span class="site-name"><a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
	</div><!-- end of #logo -->

<?php endif; // header image was removed ?>

But this might take a lot of time trying to tweak CSS afterwards to align everything perfectly.