Banner: Change for each page & make responsive

Hi Claudia,

Thanks! I’m glad you like the theme. In answer to your questions…

1. I’m presuming you’re talking about the dark grey banner on the homepage (ie. Where the button and image is on the theme demo)? Currently, the only place where you can add an image in that banner area, is the frontpage template, using the Front Page Banner Widgets. If you want a different image to appear in the banner for every page, then you could change the header.php file to include the Featured Image for the current page.

2. The theme is responsive, straight out of the box. If you view the demo theme (linked above), you’ll see it change sizes on different devices. If you add a fixed height to something however, such as making the banner a fixed height of 420px for example, then that will stop it shrinking/enlarging as the browser width changes.

3. The media queries I’ve added are based on the default design. So, instead of using fixed sizes, such as 768px for example, I’ve added media queries where the design “breaks”. If you change the design significantly then you may have to adjust these media queries accordingly. Looking at your site, the only page that doesn’t appear to work well (when viewed at iPhone size) is your blog/events page.

There’s a couple of reasons for this. The first is the long title you have in one of your posts (‘Vision walk/Augenspaziergang in Hamburg Altona April 10th, 2011’). In particular, the part of the title that says “walk/Augenspaziergang”. Since there’s no spaces in the words, and the title doesn’t hyphenate, it’s treating this as one long word and making the line extra long. I would suggest changing this to “walk / Augenspaziergang” (note the spaces). This will cause “Augenspaziergang” to drop down to the following line.

The other thing you should do is add back in the media query for 320px and below and use this to reduce the font size. In other words, add this to the bottom of your media queries in style.css…

@media only screen and (max-width: 320px) {
   .article h1 {
      font-size: 16px;
      font-size: 2rem;
   }
}

Doing these two things should stop all that extra whitepace appearing on the events page.

4. To make a Post “sticky”, click the edit link in the Publish panel, next to ‘Visibility:’, when editing the post. You’ll then see a check box next to ‘Stick this post to the front page’. Make sure this is ticked and then click ‘Ok’. Then after updating or publishing your post, it will “stick” to the top of your Posts.

Hope all this helps.

Thanks Anthony!

1.+2. Yes, I was talking about the grey banner. You actually created the option of uploading an image in “Advanced Settings” within Theme Options. I uploaded the image of the chestnut tree (from homepage) to that banner but it cropped it to the size specified in the theme. I wanted to show the whole image, therefore I changed the height to 420px in the css. I understand now that that make the image non-responsive. Can you explain how I will have to change the header.php to accomplish this and have a different image for each page? I don’t know how to edit your code ?? Dabbling with the css is one thing I dare to do, but that’s about it.

Alternatively I tried to put text into the grey banner on the home page, but then the banner suddenly became taller. I didn’t want it to change from page to page in height, so I went back to the css and put a fixed height in to fix this temporarily. I do want to keep this bar responsive though (with or without images inside) to make sure it doesn’t use that much height when viewed on a small device. So let me know how I have to change that header.php to keep have it responsive AND variable in content.

Last but not least, I realized only now that my Site Title and Tagline don’t show up. I don’t want the title anyway since I uploaded a logo instead, but how can I see the site title? I went around this by adding the tagline to the front page banner widget using the text widget, but is there another way how it would show up automatically?

Solved 3. and 4. Thanks!

That image you added to your homepage, isn’t in the banner section. You’ve simply added it to your page content. If you want to display the full image, then simply select ‘Full size’ when inserting it into your page.

If you add a fixed height to an element, then the height wont change as the browser changes size. (ie. it wont be responsive). If you want it to be responsive, the height needs to be “auto”. Alternatively, you’ll need to specifically reset that height using one of the media queries.

If you want a different image in the banner section on every page, try adding the following code in header.php

<?php the_post_thumbnail( 'post_feature_full_width' ); ?>

You’ll need to add it in between the div that has the banner class. Remember though, if you replace the existing code then you’ll remove the ability to use the banner widgets on the homepage.

The theme will let you display either a logo or the site name, in the header section. It doesn’t currently display both. If you want to display both, then you’ll need to change the theme to do this.

If you’re not familiar with coding php and modifying templates, then I would suggest getting a web developer to make your necessary changes.

Hi Anthony,

How to insert the category menu in the gray bar under the header or, if it is not possible, to remove this section and replace it with a border?

@franckcqfd, You can discuss that in your own thread.

Thanks so much for your fabulous support, Anthony!

I will experiment with the different options i got now and go from there. ??

You’re welcome ??

How do I remove the banner image from all pages other than the front page. The front page has a full sized image where as the following pages have an image that is partial.

@corryk2001: As per the Forum Welcome, please post your own topic.