Theme Change

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
.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
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;


4 responses to “Theme Change”

  1. Rachel M Avatar

    Very nice Chait. I like it 🙂

    1. Chaitanya Avatar

      Thank you Rachel. I wanted a minimal theme with a smaller and lighter font. Settled for customized Twenty Sixteen.

  2. Sarah Blackstock Avatar

    Love the minimal look! (And the peek at the CSS!)

    1. Chaitanya Avatar

      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

%d bloggers like this: