Build Your Own Business Website header image

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.

Avatar
Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Header Images
Avatar
Zach
Akron, OH
Member
Members
Forum Posts: 9
Member Since:
February 12, 2015
sp_UserOfflineSmall Offline
1
August 15, 2015 - 7:57 am
sp_Permalink sp_Print

I watched the video tutorial from "how to create a professional website using genesis," but it seems that my child theme has a widgetized header area that I want to make bigger. 

https://www.byobwebsite.com/support/ask-your-question-via-screenr/?screencastid=c5b03da0b1594688a80cf9ec0cbb821a

Thanks!

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
2
August 16, 2015 - 10:56 am
sp_Permalink sp_Print

Zach, welcome to the forum.  What child theme are you using?

Avatar
Zach
Akron, OH
Member
Members
Forum Posts: 9
Member Since:
February 12, 2015
sp_UserOfflineSmall Offline
3
August 17, 2015 - 6:39 am
sp_Permalink sp_Print

Thanks!  I am using the focus pro theme from Studiopress.

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
4
August 19, 2015 - 8:48 am
sp_Permalink sp_Print sp_EditHistory

Zach - there is an easy way and a "right" way.  The easy way will be over written when you upgrade the child theme - the right way won't.

Here is the easy way - open up the theme's functions.php file and edit lines 45 & 46 to show the size of the desired image - I suggest something like 224 x 500 (you don't need a ton of white space on the right for your image)

8-19-2015-8-40-56-AM.pngImage Enlarger

The hard way is to learn how to use the BYOB Genesis Child Theme Customizer plugin and then insert the following into custom_functions.php

//* Add support for custom header
add_theme_support( 'custom-header', array(
'header_image' => '',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 100,
'width' => 320,
) );

sp_PlupAttachments Attachments
Avatar
Zach
Akron, OH
Member
Members
Forum Posts: 9
Member Since:
February 12, 2015
sp_UserOfflineSmall Offline
5
August 20, 2015 - 4:58 am
sp_Permalink sp_Print

Ok, so I did the "bad" way just to see the effect it would have real quick, and it did allow me to insert the right sized image, but it didn't achieve the result I was looking for.  The new 224x500 image just sits in that same 100x320 space on my header area.  I have a 225x1130 banner that I want to insert into the overall header area.  I want this image to occupy the entire space above the menus rather than just occupying that tiny 100x320 space.

 

Thanks!

Avatar
Zach
Akron, OH
Member
Members
Forum Posts: 9
Member Since:
February 12, 2015
sp_UserOfflineSmall Offline
6
August 20, 2015 - 5:05 am
sp_Permalink sp_Print

I thought it might have something to do with this css?

.title-area {
float: left;
padding-bottom: 8px;
width: 320px;

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
7
August 20, 2015 - 9:46 am
sp_Permalink sp_Print

Yes - 2 ways to fix that - 

First the wrong way - change the 320px to 500px and then find the .site-header .widget-area on line 989 and change the 680px to 500px

8-20-2015-9-41-30-AM.pngImage Enlarger

Second - the right way - Again use the plugin and add the following code to the CSS editor

.title-area {
     width: 500px;
}
.site-header .widget-area {
     width: 500px;
}

sp_PlupAttachments Attachments
Avatar
Zach
Akron, OH
Member
Members
Forum Posts: 9
Member Since:
February 12, 2015
sp_UserOfflineSmall Offline
8
August 24, 2015 - 9:17 am
sp_Permalink sp_Print

I'm sorry, but I just can't seem to get this!  I've attached another screencast that hopefully will allow you to see where I'm struggling. Sorry for the confusion and thanks for the help!

https://www.byobwebsite.com/support/ask-your-question-via-screenr/?screencastid=f32b553be071478c9a613573f5abc41a

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
9
August 27, 2015 - 2:51 pm
sp_Permalink sp_Print

I will give you the solution to this tomorrow.

Avatar
Zach
Akron, OH
Member
Members
Forum Posts: 9
Member Since:
February 12, 2015
sp_UserOfflineSmall Offline
10
September 2, 2015 - 8:47 pm
sp_Permalink sp_Print

Any solution?

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
11
September 3, 2015 - 9:27 am
sp_Permalink sp_Print sp_EditHistory

Yes - finally - here is my solution.  You can see it actually working here - https://www.byobgenesis.com/

Using the BYOB Genesis Child Theme Editor plugin add the following to your byob_custom_functions.php file

//* Change the custom header image size
add_theme_support( 'custom-header', array(
'header_image' => '',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 220,
'width' => 550,
) );

Add the following to the custom CSS editor

.site-header .widget-area{
width:45%;
}
.title-area{
width:55%;
}
.header-image .site-title a{
min-height:220px;
}
@media only screen and (max-width: 1160px) {

.site-container {
max-width: 960px;
}
.site-header .widget-area{
width:43%;
}
.title-area{
width:57%;
}

.site-header .wrap {
padding: 30px;
}

}

@media only screen and (max-width: 1023px) {

.site-container {
max-width: 768px;
}

.site-header .wrap {
padding: 20px 0;
}

.header-image .site-title a {
background-position: center !important;
margin: 0 0 6px;
}
.site-header .widget-area{
width:100%;
}
.title-area{
width:100%;
}

 

}

@media only screen and (max-width: 415px) {
.header-image .site-title a{
min-height:120px;
}

}

Avatar
Zach
Akron, OH
Member
Members
Forum Posts: 9
Member Since:
February 12, 2015
sp_UserOfflineSmall Offline
12
September 9, 2015 - 3:45 pm
sp_Permalink sp_Print

thanks so much!

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
13
September 9, 2015 - 4:52 pm
sp_Permalink sp_Print

You bet - I'm sorry it took so long to come up with a satisfactory solution

Forum Timezone: America/Los_Angeles

Most Users Ever Online: 228

Currently Online:
18 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1425

Brian Tozer: 1004

Carolin: 982

Heidi Hafner: 507

John Cunningham: 423

Reece Morrel: 353

Newest Members:

emma62755

sharonmarks

emma80233

Tijs de Jong

Daniel Frey

mutek

Forum Stats:

Groups: 8

Forums: 46

Topics: 6991

Posts: 34778

 

Member Stats:

Guest Posters: 6

Members: 6761

Moderators: 2

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Pierre Cote, Laura Nugent