Adjusting the Header Borders

See those two thin lines around our header? That's the header border, and it can be edited to look however you like. It can also be removed. Here's how to do it.

Adjusting the Border

If you want to keep the border but want to edit it, follow these instructions.
From your dashboard, click Design. In the Edit HTML section, find this part of the code in the "Edit Template" box.

#header {
margin: 18px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;

**The number will not be bold in your code -- that's simply to show that the 18 is a variable. The number that appears there will depend on what template you're using, so don't panic if it's not 18, it's still right.**

If your border is too big, you'll need to replace the 18 with a smaller number. I'd recommend subtracting 4-5 pixels and then previewing it to see how it looks. That way, if you need to make changes, you can do so very easily without having to go back time after time.
If your border is too small (meaning it cuts off your header), you'll need to replace the 18 with a larger number. Again, increase the number by 4-5 pixels and preview, changing it if needed until you're happy with it.

Removing the Border

To remove the border completely, you'll need to find this section of code in your template.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

All you need to do to remove the border is change the bold numbers to zero. Remember to click Save Template!