Cannot re-size header

Hi kristinhere. You probably don’t need all that code in your child theme. You’d only need to target the specific elements you want to change. What exactly is it you’re trying to do?

Hi bdbrown,

If you look at my website I have added a custom logo / header. The only problem is that it only takes up about 1/4 of the header space.

Try adding this to your child theme css:

/* make header image full size */
.site-title a img {
  max-height: 300px;
}
/* remove header padding and align image left */
#header .group.pad {
  padding: 0;
}

Just outside of Portland? Nice city. Used to live there. About 90 miles south now.

Still small ??

Yes, we have lived her 5 years. I love it!

I don’t see a child theme active. Where did you add that css code?

Under the child-menu.php. Have I been doing this in the wrong location?

OK, let’s back up for a minute. Before creating the child theme, what customizations did you make to the parent theme?

This is what I get for being a beginner ?? Thankfully, I haven’t made any changes to the parent theme that can’t be reversed (just adding google analytics, etc), I found the a page describing the wp-content/themes page, but I do not see how to add a child theme to this page?

No need to apologize; we all started at the beginning. So, just for reference, you shouldn’t ever have to do anything with files in the core WP folders. Those are used as the foundation for everything else, including the theme. The theme, in a very broad, general sense, essentially sits on top of the core WP functionality and creates what the user sees and interacts with on your site. You can use plugins and other customizations to change the way your site is structured and functions, but the basic underlying WP functionality doesn’t change (unless wp.org decides to push out an update).

Given that, if you wanted to customize your site, you could make changes to the theme files, in the /wp-content/themes/hueman folder. Normally you would do this using the Admin Editor. However, the downside to this is that all those changes will be lost if you upgrade the theme. Hence the Child Theme.

The child theme (how did you create your child theme?) starts out as nothing more than an empty style.css file (except for the line that brings in the main theme css) and, if created by downloading it from Hueman, an empty functions.php file. That’s why it initially should have no affect on your site. Now, to make changes to your site, you can add css to the child theme style.css file (again, using the Admin Editor), add functions to the child theme functions.php file, or copy php files from the parent theme to your child theme, and make the changes there. This way all your customizations are in the child theme and are unaffected by a parent theme upgrade.

What I would recommend, at this point, is to undo whatever changes you’ve made to any php files and make sure your site runs on the parent Hueman theme. Then, when that is stable, activate the child theme. You shouldn’t notice any difference in your site. When you get to this point, make a backup of your site. Then you’ll be in a position to start making additional modifications.

Hope that all makes sense.

Half-way there…

It won’t let me upload my child theme because it says that my template is missing. Here is what I have in the style.css for the child theme:

/*
Theme Name: Hueman Child Theme
Theme URI: https://alxmedia.se/themes/hueman/
Description: Child theme to Hueman
Author: Kristin
Author URI: https://www.findingthehealthyroad.com/
Template: hueman
Version: 1.5.4
*/
@import url(“../hueman/style.css”);

From what I have been reading this should import the template – correct?

I figured out the child theme (and now I know I am entering it in the child theme – thank you!!!), entered in the code that you recommended and still a small logo. Any other suggestions?

Congratulations! I see the child theme is up and running. However, this is what I see in the child theme style.css file which shouldn’t be there:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-62234827-1', 'auto');
  ga('send', 'pageview');
</script>

That code needs to get into your site header. See this article for more information. The easiest way to do this is with a plugin, either an SEO plugin or one like GA Google Analytics.

This is what should be in your child theme style.css file:

/* make header image full size */
.site-title a img {
  max-height: 300px !important;
}
/* remove header padding and align image left */
#header .group.pad {
  padding: 0;
}

We are 75% of the way there! Thanks for the google analytics tip. The logo increased in size, but still not full screen. Any way to stretch it out further or should I center it?

You can try centering what you have with this css to see how it looks:

/* center header image */
.site-title {
  float: none;
}

To get it to fill the screen you’d have to either (a) create a new image that’s the same width as the site (1380px), or (b) stretch the existing image using this css (which I see you already have in there):

/* expand header image to full site width */
.site-title a img {
  width: 1380px;
}