I spent this evening making over my blog. I switched to Twenty Sixteen from Hemingway Rewritten theme. I hope you like this blog’s new design.

[code language=”css”]
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
.page h1.entry-title,
.page-id-1225 .content-area {
display: none;

/* Search page style
Post-1225 is search page */
article#post-1225 {
border: none;

.page-id-1225 #content {
margin-top: 50px;

.page-id-1225 .widget-areas .widget-title {
color: black;

/* End of search page styles */
.main-navigation {
position: fixed;
top: 0;

.type-page {
padding-bottom: 0;

.logged-in .main-navigation {
top: 32px;

/*Blockquotes style lifted from https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
and modified */
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;

blockquote:before {
color: #ccc;
content: "\201C";
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;

blockquote p {
display: inline;

/* Colors */
/* Menu background color */
.main-navigation ul ul li {
background: orange;

/*Menu items color */
.main-navigation a,
.main-navigation a:visited {
color: black;

/* Menu separator color */
.main-navigation li:before {
color: black;

/* footer background color */
.site-footer {
background: white;

/*Menu items color on mobile devices*/
@media all and (max-width:800px) {
.main-navigation a,
.main-navigation a:visited,
#header-search.toggled {
background: orange;
color: black;

/* Added on 1/Nov/2015 to add top margin on mobile site */
.site-content {
margin-top: 100px;

/* This style is added on 1/Nov/2015 because setting Font Size to Small in Customizer > Font menu is causing probloem with mobile menu.*/
.type-post h1.entry-title {
font-size: 31.5px;

/* Current/selected menu item color */
.main-navigation .current_page_item a, .main-navigation .current-menu-item a {
color: white;

footer#colophon {
padding-top: 0;

/* Footer attribution color */
.site-footer a, .site-footer a:visited, .site-footer a:hover, .site-footer a:focus, .site-footer a:active {
color: black;

/* Hide byline on single posts */
.single-post span.byline {
display: none;

/* square bullets */
ul {
list-style: square;


About the Author Chaitanya

I am a family man, perpetual learner, coffee drinker, dessert eater and Happiness Engineer at Automattic. I also read, write, move, and meditate.


    1. Thank you Sarah. The CSS is minimal too 😊

      At some stage I need to add a media query to match the size of post and page titles to that of site title on mobile devices.

Leave a Reply