Thanks!

We actually have page templates for just this purpose! Any page you create, you can go to the Page Templates section and select from one of the following Blank templates:

• Blank – Container | Header, Footer
• Blank – Container | Header, No Footer
• Blank – Container | No Header, No Footer
• Blank – No Container | Header, Footer
• Blank – No Container | Header, No Footer
• Blank – No Container | No Header, No Footer

This will allow you to easily accomplish what you’re looking to achieve without any need for coding or updating template files. Let us know if you happen to need anything else, or a further explanation on this matter.

Thanks!

Thanks for your help. I am enjoying the capabilities of the theme so far and will have more questions as I get further in to it.

Thanks!

We will certainly add the ability to remove headers but keep the footers in a future release. Just out of curiosity, would you mind sharing your use-case for this type of setup? Before launch we debated the need for this template but couldn’t find one internally, which is why we left it out.

If you’re merely looking to disable the header site wide, this is a very easy fix. Enter the following code in the Custom section of the Customizer in the CSS field, or into your style.css file of your child theme. Do not include this into the style.css file of the main theme, as it will get overwritten when upgrading to a newer version.

.masthead { display: none; }

Let us know if you need anything else!

I am getting a little more padding than I want at the top when using the Icon stack with a page type of: blank container, header and footer, with the above CSS applied. Also, the footer padding is much more than I want. On both computers and mobile devices it’s a lot of white space in the footer. When I use a blank page without a container it takes care of the top space but then my sides become too wide, and the footer padding is still more than I want.

Any help in adjusting this would be greatly appreciated. I may be buying a lot of copies of this theme if I can make it do what I want. It’s the closest so far to give me the control I need. For a brand new theme you all are off to a fantastic start. I can’t wait to see what you add next.

Thanks!

Depending on what browser you’re using, it’s very easy to inspect these elements and figure out where the extra spacing is coming from. I use Chrome, and to do so, simply right-click on the element you’re wanting to adjust and select Inspect Element. This will bring up the markup for the site in a popup box, which you can explore and see the dimensions of all elements. Padding is highlighted in green, and margin is highlighted in a kind of orange/red color. When you’re found the element you want to adjust, look for it’s class name. If the class is x-colophon, you would use something like this to adjust the dimensions:

.x-colophon {
...CSS here...
}

If it has two class names (or more) separated by a space, and you need further specificity, you can do something like this:

.x-colophon.top {
...CSS here...
}

This is helpful as it will allow you to see what elements you need to adjust and you won’t have to wait on us to provide you with an answer every time, which is helpful especially in time-crunch situations with client work.

If you find that you’re still having a tough time locating what you need to adjust, try taking a screenshot and making some notations of the areas you want fixed. Then you can use a service like Dropbox to get a public link for the image and paste it here for us to see. This assists us greatly in helping you out.

Thanks!

I would like to adjust the footer padding.

In the element: footer.x-colophon.bottom

I see:

<footer class=”x-colophon bottom” role=”contentinfo”>

Then on the right window:

padding: 4% 0;
padding-top: 4%;
padding-right: 0px;
padding-bottom: 4%;
padding-left: 0px;

I want to change the padding to 1% for the top and the bottom.

Based on that information can you tell me what I should specify the code for the custom CSS? I think once I know how to adjust one I can do any others.

Thanks so much!

No problem at all. You can do the adjustment in a couple ways. You can just use the padding property, or you can be more specific and set one side using something like padding-top. With padding, you can set all sides, top/sides, top/sides/bottom, or top/left/bottom/right. So if you wanted to set all sides of the container to have a 1% padding, you could use this:

.x-colophon.bottom {
  padding: 1%;
}

If you wanted to set your top and bottom to 1% and sides to 0, you could use this:

.x-colophon.bottom {
  padding: 1% 0;
}

Setting top to 1%, sides to 0, and bottom to 4% would look something like this:

.x-colophon.bottom {
  padding: 1% 0 4%;
}

And then finally, we can set the top to 1%, right to 0, bottom to 4%, and left to 5% like so:

.x-colophon.bottom {
  padding: 1% 0 4% 5%;
}

Again, these are all just examples to demonstrate how to set the CSS yourself. Finally, you could only specify one side if you wanted, like the left side like so:

.x-colophon.bottom {
  padding-left: 5%;
}

Hopefully this clears things up for you and gives you a little more freedom in making edits to everything yourself. Let us know if you need anything else! 🙂