Theme Change

I spent this evening mak­ing over my blog. I switched to Twen­ty Six­teen from Hem­ing­way Rewrit­ten theme. I hope you like this blog’s new design.

[code language=“css”]
/*
Wel­come to Cus­tom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
.site-brand­ing-wrap­per,
.site-head­er-image,
.page h1.entry-title,
a.grofile-full-link,
.page-id-1225 .con­tent-area {
dis­play: none;
}

/* Search page style
Post-1225 is search page */
article#post-1225 {
bor­der: none;
}

.page-id-1225 #con­tent {
mar­gin-top: 50px;
}

.page-id-1225 .wid­get-areas .wid­get-title {
col­or: black;
}

/* End of search page styles */
.main-nav­i­ga­tion {
posi­tion: fixed;
top: 0;
}

.type-post,
.type-page {
padding-bot­tom: 0;
}

.logged-in .main-nav­i­ga­tion {
top: 32px;
}

/*Blockquotes style lift­ed from https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
and mod­i­fied */
block­quote {
back­ground: #f9f9f9;
bor­der-left: 10px sol­id #ccc;
mar­gin: 1.5em 10px;
padding: .5em 10px;
}

blockquote:before {
col­or: #ccc;
con­tent: "\201C";
font-size: 4em;
line-height: .1em;
mar­gin-right: .25em;
ver­ti­cal-align: -.4em;
}

block­quote p {
dis­play: inline;
}

/* Col­ors */
/* Menu back­ground col­or */
.main-nav­i­ga­tion,
.main-nav­i­ga­tion ul ul li {
back­ground: orange;
}

/*Menu items col­or */
.main-nav­i­ga­tion a,
.main-nav­i­ga­tion a:visited {
col­or: black;
}

/* Menu sep­a­ra­tor col­or */
.main-nav­i­ga­tion li:before {
col­or: black;
}

/* foot­er back­ground col­or */
.site-foot­er {
back­ground: white;
}

/*Menu items col­or on mobile devices*/
@media all and (max-width:800px) {
.main-nav­i­ga­tion a,
.main-nav­i­ga­tion a:visited,
#header-search.toggled {
back­ground: orange;
col­or: black;
}

/* Added on 1/Nov/2015 to add top mar­gin on mobile site */
.site-con­tent {
mar­gin-top: 100px;
}
}

/* This style is added on 1/Nov/2015 because set­ting Font Size to Small in Cus­tomiz­er > Font menu is caus­ing probloem with mobile menu.*/
.type-post h1.entry-title {
font-size: 31.5px;
}

/* Current/selected menu item col­or */
.main-nav­i­ga­tion .current_page_item a, .main-nav­i­ga­tion .cur­rent-menu-item a {
col­or: white;
}

footer#colophon {
padding-top: 0;
}

/* Foot­er attri­bu­tion col­or */
.site-foot­er a, .site-foot­er a:visited, .site-foot­er a:hover, .site-foot­er a:focus, .site-foot­er a:active {
col­or: black;
}

/* Hide byline on sin­gle posts */
.sin­gle-post span.byline {
dis­play: none;
}

/* square bul­lets */
ul {
list-style: square;
}

[/code]


Comments

4 responses to “Theme Change”

  1. Very nice Chait. I like it 🙂

    1. Thank you Rachel. I want­ed a min­i­mal theme with a small­er and lighter font. Set­tled for cus­tomized Twen­ty Six­teen.

  2. Love the min­i­mal look! (And the peek at the CSS!)

    1. Thank you Sarah. The CSS is min­i­mal 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