Workstation Pro Banner Logo

[Tree78]

Hi,

I am working with the Workstation Pro theme. Right now I have a logo on the left and just empty space on the right. I don't want to use that right menu option, instead I want to place a banner image logo across the top where the current logo and blue space is.

I have messed around with some of the settings but can't seem to find the right thing to do. What do I need to change and/or delete to be able to put an image banner across that section with the dimensions 960X120?

Thank you in advance everyone.

http://www.hawaiivahomeloans.com/

[Ginger]

Hi there, if you're willing to use that title area where the logo is for your banner, just change the title width to 960 to match.

Look for this section in your style.css file:

.title-area {
	float: center;
	padding: 16px 0;
	width: 400px;
}

and increase the width from 400 to 960.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Tree78]

Hi Ginger. I had originally done that, but the current 400px I extended it to was as far as I could get it. Even if I extend to 960 right now it gets cut off. Is there something I am missing? Do I need to delete the right side menu that is there?

Thank you. Jeremy

[Tree78]

So what is it I am missing? I still can't get it to work. Thank you.

[Ginger]

Hiya, I forgot you're using the custom header image area for this so, the change above does apply, however, you'll need to change your custom header section in your functions.php file. Please use caution, one typo can white screen your site when changing this file so make sure you have access to your site via FTP or file browser access in your hosting account.

In the functions.php file around line 47, you'll see this code:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'flex-height'     => true,
	'width'           => 300,
	'height'          => 60,
	'header-selector' => '.site-title a',
	'header-text'     => false,
) );

Change the width and height to the values you'd like....this will allow you to add your logo via Appearance -> Header in your site's Admin Dashboard. Your image will be centered if it's the full 960px wide. You can remove that Float - center since that's not a valid setting for Float.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Tree78]

Okay Ginger, lol. Getting closer. Here is what I have.... and if you view the site you can see what it is doing and I am not sure how to fix that. I am trying to screen the logo banner across the entire space at the top. My logo banner dimensions are 1630 X 232. Below is what the css file reads right now and after that what the functions.php reads.

I am close, but I am still off. Here is the site link so you can see what it looks like:

http://www.hawaiivahomeloans.com/

Here is what the code reads... but I am still not spaced properly.... Thank you for your help in advance. Current code:

CSS

/* ## Title Area
--------------------------------------------- */

.title-area {
float: center;
padding: 16px 0;
width: 1630px;
}

.header-image .title-area {
padding: 0;
}

.site-title {
font-family: 'Roboto Condensed', sans-serif;
font-size: 24px;
font-size: 2.4rem;
font-weight: 300;
letter-spacing: 2px;
line-height: 1.2;
margin-bottom: 0;
text-transform: uppercase;
}

.site-title a,
.site-title a:focus,
.site-title a:hover {
color: #222;
text-decoration: none;
}

.header-image .site-title > a {
float: left;
min-height: 232px;
width: 100%;
}

.site-header .site-description {
display: none;
}

.header-image .site-title {
display: block;
text-indent: -9999px;
}

PHP

//* Add support for custom header
add_theme_support( 'custom-header', array(
'flex-height' => true,
'width' => 1630,
'height' => 232,
'header-selector' => '.site-title a',
'header-text' => false,
) );

[Ginger]

Hi there,

Well the challenge is you've set your header wider than your actual site so it scrolls off to the right, spilling over. The overall site width is set to 1200px here around line 574 in your style.css file:

.site-inner,
.wrap {
	margin: 0 auto;
	max-width: 1200px;
}

I would recommend changing your title width to 100% and adjusting your logo banner to be 1200px or narrowing. If you widen your entire site you'll need to change the styles in your media queries (those at the bottom of style.css) for mobile.

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[Tree78]

Hi Ginger,

lol sorry about that... I am a mess. Okay, I fixed all of that, I also adjusted the padding to bring the whitespace up so the banner fills.

So... Is there no way for me to take the banner all the way across... if you notice at the width of 1200 there is still blue space on both sides. I can make that white, but I would rather the banner show across. Is there a couple steps for that or would I have to adjust a lot of things including mobile settings?

Again Ginger, thank you for all your help... not sure why I am having so much trouble with the new theme.

Jeremy

[Author]

Posts