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.

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 thoughts on “Theme Change

    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.


What do you think?

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s