Make header image area less high

Deb Chabot
March 14, 2011 at 5:29 am #686

I would like to keep the header image as it is on the home page, but reduce its height to 120 or 140 pixels on all other pages. If this is difficult then I’d be okay with 120 or 140 on all pages, including the home page.

I’ve tried using the ‘featured image’ on alternate pages. It displays okay, but there are simply black bands above and below it; the overall area remains as if the main image were still showing. It does not allow the page content to shift upwards.

Any guidance, including just pointing me to another thread that provides the solution will be greatly appreciated. (I have searched, but I’m not finding the answer.)

Thank you in advance,

Andrew

Admin

Syahir Hakim
March 30, 2011 at 9:03 pm #13251

See this thread: https://forum.graphene-theme.com/topic/header-image-size-change

GlamLife
May 6, 2011 at 10:41 pm #13252

Hello Syahir:

I love your graphine theme …. it’s got everything I need and is so perfect for me if I can get it functioning. Earlier today, I tried editing the styles.css making adjustments to the header height which I need to be 260 instead of 198. I was able to get them changed, but was never able to defeat the evil image cropper. Eventually, nothing would load anymore and I had to uninstall & reinstall.

Finally I exhibited some intelligence and came to research your help forum … where I learned about Child Themes … Yeah!!!

Unfortunately, the directions for doing what I need to do seem to be scattered around several posts … plus everyone forgot to mention that to create a new folder to put inside of the themes … a newbie would need to go the file manager inside of the C-Panel!

So after all of these changes, the image uploader for the header still wants to make me crop at 198 height … plus the height of the header area on my site never changed either. So this is what I’ve done … please advise why it doesn’t work.

C-PANEL

FILE MANAGER

/public_html

wp-content

themes

I created a new folder called graphene-child

I created a new file called style.css

I edited that file using us-ascii

/*

Theme Name: Graphene Child

Theme URI: http: //glamlifeguru.com/

Description: Child theme for the Graphene theme

Author: Your name here

Author URI: http: //example.com/about/

Template: graphene

Version: 1.0

*/

@import url(“../graphene/style.css”);

/* #header{

background-color:#000;

background-repeat:no-repeat;

height:260px;

margin-left:16px;

width:960px;

*/

<?php

function graphene_custom_header_width(){

return 960;

}

function graphene_custom_header_height(){

return 260;

}

add_filter(‘graphene_header_image_width’, ‘graphene_custom_header_width’);

add_filter(‘graphene_header_image_height’, ‘graphene_custom_header_height’);

?>

and Nada changes … what did I do wrong Master?

xoxo

Tati
Admin
Syahir Hakim
May 6, 2011 at 11:31 pm #13253
You need to create another file in the graphene-child folder, and name it functions.php. Then remove the following code from the child theme’s style.css file and add it to the new functions.php file:
```
<?php

function graphene_custom_header_width(){

return 960;

}

function graphene_custom_header_height(){

return 260;

}

add_filter('graphene_header_image_width', 'graphene_custom_header_width');

add_filter('graphene_header_image_height', 'graphene_custom_header_height');

?>
```
Kim
May 7, 2011 at 5:09 am #13254

Hi

Then again make sure You have Directory structure correct as shown in this link:

http://codex.wordpress.org/Child_Themes

Try post You new edited Child Theme: style.css

Theres still some wrong lines 🙂

Kim

ftbblog
May 9, 2011 at 1:28 pm #13255

This is the first time I have tried to create a child theme and it keeps saying style sheet missing. This is what I have:

/public_html/wp-content/themes/graphene-child

new file: new style.css

/*

Theme Name: Graphene Child

Theme URI: http://www.foodtravelbliss.com/

Description: Child theme for the Graphene theme

Author: Your name

Author URI: http://www.foodtravelbliss.com

Template: graphene

Version: 0.1.1.4

*/

@import url(“http://www.foodtravelbliss.com/wp-content/themes/graphene/style.css”);

new file: functions.php

/* <?php

function graphene_custom_header_width(){

return 975;

}

function graphene_custom_header_height(){

return 250;

}

add_filter(‘graphene_header_image_width’, ‘graphene_custom_header_width’);

add_filter(‘graphene_header_image_height’, ‘graphene_custom_header_height’);

?> */

what am i doing wrong?

Thanks!
Kim
May 9, 2011 at 4:09 pm #13256
Your Graphene Child theme: style.css
```
/*

Theme Name: Graphene Child

Theme URI: http://www.foodtravelbliss.com/

Description: Child theme for the Graphene theme

Author: Your name

Author URI: http://www.foodtravelbliss.com/about

Template: graphene

Version: 0.1.2.1

*/

@import url("/wp-content/themes/graphene/style.css");

/* My modification goes under this line */
```
Your Graphene Child theme: functions.php
```
<?php

function graphene_custom_header_width(){

return 975;

}

function graphene_custom_header_height(){

return 250;

}

add_filter('graphene_header_image_width', 'graphene_custom_header_width');

add_filter('graphene_header_image_height', 'graphene_custom_header_height');

?>
```
Make sure to make these files in plain text, eg. notepad or maybe Komodo Edit 🙂

http://www.activestate.com/komodo-edit

Kim
ftbblog
May 10, 2011 at 7:30 am #13257

Oooh I now see my error. Fantastic, thank you! 🙂

ftbblog
May 11, 2011 at 11:28 am #13258

I have created the child theme and have uploaded the new picture to the header. The file has uploaded and in dashboard it is showing up as the correct size but on the page it is still cutting of the top of the image. any suggestions?

http://www.foodtravelbliss.com