Centered Headers In Contempo...

Years ago, when I installed the Contempo template for the first time, I managed with some brute force tactics and a lot of duct tape, to get the header centered. At the time, It took quite a bit to make it happen and there was a lot of pain involved. The reason for all the pain is that Contempo has multiple headers and the template switches between them depending on if you're scrolling, or are on the main site, or on a post or static page. Years ago, I didn't really document what was involved, I just threw everything at it to see what would stick. Now, years later, I don't feel like messing with my old code.

Recently, I decided to revisit this issue. After some trial and error on one of my non-anime related sites, I have some basic CSS that will work with out-of-the-box Contempo. If you've heavily customized your theme as I have, your mileage will vary. The coding actually wasn't as complicated this time around thanks to advances in CSS support in various browsers. The necessary code is actually fairly short. Add the following CSS code snippet using Theme > Customize > Advanced > Add CSS:

.sticky .blog-name, .item-view .blog-name {
justify-content: center;
}
.item-view #header h1 {
text-align:center !important;
}
.item-view #header {
width:100%;
clear:both;
}
nav:before {
clear:both;
}
.item-view .Header p {
text-align:center;
}

That's all I have for today. Enjoy!