[pgleave]

If it's what I think (header to appear on blog page and single post page only), you can create template files for each in the theme, and add a widget to those templates to hook into the header so that it appears on those pages only (globally).

If you try this - make sure to back up your theme / site first - this works but comes with no guarantee.

Eg: This is how you can do this on the single post view:

1. Add the widget to the theme functions.php (these are at the end), and add this straight after the //* Register widget areas comment:

genesis_register_sidebar( array(
'id' => 'blog-widget',
'name' => __( 'Blog Widget', 'altitude' ),
'description' => __( 'This is a widget to appear on blog pages.', 'altitude' ),
) );

If you go to appearance -> widgets you'll have a new widget called blog widget. You can add the image to that.

2. Now you need to call up that widget to the single post template and hook into Genesis for display.

Theme doesn't have one, as it uses the one from Genesis - so you need to create it. Create a file called single.php.

Add this code:

<?php
/**
* This file adds a single post template to the Altitude Pro Theme.
*
*/

add_action( 'genesis_before_content_sidebar_wrap', 'ttid_blog_widget', 5);

function ttid_blog_widget() {
genesis_widget_area( 'blog-widget', array(
'before' => '<div class="blog-widget">',
'after' => '</div>',
) );

}
//* Run the Genesis loop
genesis();

You then have a widget that appears globally on single post pages of your site - you can style it with css.
NB; The function above has to be unique but can have any name. I chose 'ttid_blog_widget' (ttid prefix to stand for This Track Is Dope). It just needs to have a unique name.

---

I love to design

[pgleave]

It could be an additional container restricting the height. If you know which theme you're using, I can take a look.

---

I love to design

[pgleave]

Good point. Add

background-size: cover;

to your #about declaration to achieve the same effects as Parallax (if that's the case)

I'd still encourage adding smaller sized images to your media queries, just so people on smaller devices get a faster site load.

---

I love to design

[pgleave]

Hi,

There are actually no defined dimensions for the widget area, as the theme is mobile responsive. The About section is a full browser width area, and the height is defined by whatever content is placed.

Here's the css to stop the image repeating, and centre it:

#about {
background: url("yourimagelinkhere") no-repeat;
padding: 60px 0 36px;
background-position: center;
}

You'd then need to size the image to what you think is best: ie: wide enough for people using wide screens if you want it to bleed off, and high enough, say, for your slider (in your case 630px).

Just be aware that if the image is that size, people on mobile devices will be downloading a larger image than they need (ie file size).

That can be solved by adding another css entry in the media queries for smaller screens, referencing an image sized down for that screen width (ie one for iPads, one for mobile).

---

I love to design

[Author]

Posts