Aspire Theme Issues

The header image should be 300×60 in the Aspire theme. And it refers to the area where “WORKING TITLE” is in your top left hand corner. It is essentially a logo which will display there.

You may be confusing it with the Front-Page Background images, which should be 1600×1050. If you insert a giant image into the small logo area then it may not resize.

Try resizing your front page image 1 to this size 1600×1050, then adding it to the theme again and seeing if that works.

For what you’re trying to do, I think it would be better for you to add your image inside the widget area itself, and then add a background color to the Front Page 1 background area.

Example, add this to your Text widget –

<img src="http://69.195.124.169/~claranar/wp-content/uploads/2016/09/Widget-Area-1_Resized2_Lo.jpg">

And then remove the Background image and add a background color through CSS. This is the hex code that your background is currently set at – #3CBCBD. If you don’t want to add it through CSS, then you could also create a 1800 by 1200 background image of the color all by itself so it shows the blue color through out the entire background.

Full width background images can be tricky especially when viewing them on a mobile device. Certain images work well, but some don’t since it really depends on the position and the focus of the image itself.

If you had an image that showed your face directly in the center, then it would work a lot better (just like the demo). But once you have your face on one side, and text on the other side it won’t look right on some browsers as both ends of the image will exceed beyond the width of the main content area of theme (which is 1200px). So if you’re viewing your current image as a background from a large browser/screen, the text in your image and your face will show up beyond the main width of the theme.

This is the reason why I use large landscape background images that will scale regardless of the size of the browser like here – demo.appfinite.net/guru/ here – demo.appfinite.net/ambition or here – demo.appfinite.net/imagery Notice they all look right on every browser. If I were to use a face in the background I would have it in the center so it will always show up in the center on every browser…..or I would just add it directly into a Text widget so it stays within the width of the content.

Sorry for writing so much, I just wanted to make sure I explained it the best I could 🙂

Let me know if this helps.

To add the background color, add this in your CSS –

.front-page-1 {
	background-color: #b7e5f8;
}

Also, I noticed that your title/logo area is set at the default 360px width, but the actual size of your title is around only 190px width. The size of the header and the rest of the theme is 1200px wide. Since your menu is around 973px wide and the logo area is 360px (which = 1333px) that would make them both too wide to fit within the 1200px width. That’s the reason the menu is dropped off to the next line since they both can’t fit in the space.

If you change the title/logo area to 190px, both the title and the menu will be able to fit a little bit better on certain browsers. Here’s what it would look like (with the background color added as well) – http://i.imgur.com/aNsEshy.png

Here is how it looked before – http://i.imgur.com/3PcYPnS.png

So changing that code I mentioned above should fix it.

Let me know if you get it working.

The background is looking great!

To change the size of the Title/Logo area, take a look around line 1203 in your style.css file –

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

.title-area {
	float: left;
	padding: 25px 0;
	width: 360px;
}

You can also search for it directly using ctrl + F (PC) or Command + F (Mac)

Let me know if that works

Do you want the nav itself to be a different color, or the entire header area (including the title/logo)?

.

Did you add this? –

.genesis-nav-menu > .menu-item > a {
    color: #000;
}

Also what do you plan to do with the header when you scroll down? Currently the background changes to Black, did you want to keep the background Black and have the text change to White? Or did you want the entire header background to stay White at all times (including when scrolling down)?

“I don’t think I had added that line. I just did but didn’t see any difference.”

Can you add it again and let me know so I can see it with the code active? It should work as I’ve tested it myself –

You may need to hit your Reload button on your browser in order to see the changes (this clears your Browser Cache).

“My question is could an image be used for the background of the header instead of a solid color”

Yep, I’ll use the image from that site as an example –

Here’s the code I added to your .site-header

	background: url("http://www.claranartey.com/images/header.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

I don’t see the code added in your CSS, but I do see some other changes that were made.

If you’re still trying to add the Black font/code I can do it for you if you want. All I would need is a temporary login and I can add it in.

If a white screen showed (with PHP error messages) that means you may have added a PHP error in your code somewhere. This is why I recommend making PHP Code edits using FTP so you have the option to undo any mistakes that are made. You can’t undo PHP code errors using the WordPress Admin, this can ONLY be done through FTP.

Can you let me know what you tried to edit recently? I can help you get it edited the proper way. And if you have an FTP login, that would make it much easier.

What were you trying to edit exactly?

Also, do you have an FTP login?

It’s 2AM on my end, so I’ll get back in touch tomorrow morning when you’re available. I’ve been at the computer all day 🙂

I tried logging in through FTP but the login doesn’t seem to work. I’m using Filezilla. Here are the error messages –

Response: 	530 Login authentication failed
Error:        	Critical error: Could not connect to server

That was it! It kept telling me to use http://ftp.claranartey.com for the host instead of your IP. I would have never known.

After going through all that I forgot what we’re supposed to fix lol. I’ll need to go back and re-read the previous posts.

I’m just now getting back home, so give me a sec and I’ll get right back on this tonight.

“Well, what started this discussion in the first place was, I’d messed up my themes.php file by copying the footer info from my current website to the new one.”

Since there isn’t a “themes.php” file with the Aspire theme, I assume you meant “functions.php” file? I checked the functions file and compared the code from the original code and noticed a small error which may be causing your site not to work.

On line 20 in your functions.php file, you added this – */ which is what is used to close out a comment. The problem is you have to at least have an opening before adding a close, and if either one of them are missing, it will throw a PHP error and your site may not show up properly. This is pretty much how all PHP based sites work when it comes to errors.

So you would have to be very careful when making PHP edits since the smallest error can cause a big result. This is why I always recommend making your edits to your theme files through an editing program using FTP. If this had happened while you were using a php editor, you would have been able to undo the mistake immediately. If this happens through the WordPress admin editor, then you won’t have access to your site since the PHP error takes over the entire site and prevents you from making any adjustments.

This rule applies to any WordPress Theme since WordPress is built on PHP.

Here’s what it looked like before (look at the last line) –

//* Child theme (do not remove)
define( 'CHILD_THEME_NAME', 'Aspire Pro' );
define( 'CHILD_THEME_URL', 'http://my.studiopress.com/themes/aspire/' );
define( 'CHILD_THEME_VERSION', '1.1.3' );     */

The code that you added for the footer worked fine. You may need to adjust the line-height /CSS a bit, but it’s working.

I’d recommend finding an HTML/CSS/PHP editor and hooking that up with a FTP program to prevent this from happening in the future.

If you had Homepage widgets setup, it looks like you’ll need to drag those widgets back in to their proper place since there seems to be nothing on the front page.

Let me know if this helps.