{"id":3830,"date":"2014-05-06T22:24:04","date_gmt":"2014-05-06T22:24:04","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=3830"},"modified":"2016-01-21T14:14:17","modified_gmt":"2016-01-21T22:14:17","slug":"twenty-fourteen-theme-customization","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/twenty-fourteen-theme-customization.html","title":{"rendered":"Twenty Fourteen Theme Customization"},"content":{"rendered":"

WordPress 3.9 came out and theme Twenty Fourteen came with it. The theme is great, but it does kill many of the mootools and older jqueries scripts that I’ve been using like Mediabox Advance and FancyBox 1.3.4. Anyhow, this is how I modified a Twenty Fourteen Theme. My goal is to have 3 colors on the page gradually lightened – I called my twenty fourteen – black<\/a> because I like dark themes. I read many fixes and posts on the websites and I try to give credit to the original writers, but some I really forgot where I got my information from, I’m really sorry.<\/i><\/p>\n

[title]Add Excerpts and Thumbnails To Index Front Page[\/title][body]<\/i><\/p>\n

The first thing I want to do is to add excerpts and thumbnails to the index – front page. For the thumbnails, I get the “get_the_image.php”<\/a> and place it in the original Twenty Fourteen theme. Add the scripts to the function.php<\/em><\/p>\n

 <\/p>\n

\n

if (!function_exists(‘get_the_image’)) {
\nrequire_once “get-the-image.php”;
\n}
\nfunction custom_excerpt_length( $length ) {
\nreturn 50;
\n}
\nadd_filter( ‘excerpt_length’, ‘custom_excerpt_length’, 999 );<\/p>\n<\/blockquote>\n

 <\/p>\n

I also need to edit the content.php of the original theme to display thumbnails size and excerpts<\/i><\/p>\n

 <\/p>\n

\n

<?php if ( is_search()||is_author()||is_tag()||is_archive()||is_home() ) : \/\/ Only display Excerpts for Search ?>
\n<div class=”entry-summary”>
\n<?php
\nget_the_image( array( ‘size’ => ‘main’, ‘width’ => 200, ‘height’ => 114, ‘before’ => ‘<div class=”cover”>’, ‘after’ => ‘<\/div>’ ) );
\n?>
\n<?php the_excerpt(); ?>
\n<\/div><!– .entry-summary –>
\n<?php else : ?><\/p>\n<\/blockquote>\n

 <\/p>\n

Now the index – front page should look like this. I can change the excerpts from 50 to any size of words I want.<\/em><\/p>\n

\"\"<\/a>\u00a0 \u00a0 \u00a0\"thumbnails<\/a><\/p>\n

[\/body]<\/em><\/p>\n

[title1]Create Child Theme For Twenty Fourteen[\/title1][body1]<\/em><\/p>\n

If you have many blogs like I do, and you want many different color themes for each blog, the best is to use child theme. To create a child theme, I create a folder for the theme and inside the folder, I should have a modified style.css and a css folder with modified ie.css in it.<\/em><\/p>\n

\"child<\/a><\/p>\n

\"child<\/a><\/p>\n

At the beginning of the child theme style.css, I replaced everything on the top with my information – important thing is the @import command<\/em><\/p>\n

 <\/p>\n

\n

\/*
\nTheme Name: Twenty Fourteen black1600
\nTheme URI: \/\/example.com\/twenty-fourteen-child\/
\nDescription: Twenty Fourteen Child Theme
\nAuthor: idog
\nAuthor URI: \/\/www.dognmonkey.com\/techs
\nTemplate: twentyfourteen
\nVersion: 1.0.0
\nTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
\nText Domain: twenty-fourteen-child
\n*\/
\n@import url(“..\/twentyfourteen\/style.css”);<\/p>\n<\/blockquote>\n

 <\/p>\n

Next, to fix the color of the internet explorer 8\/9, I had to add some codes in the function.php, the original codes are here<\/a>\u00a0by fatpat76.<\/em><\/p>\n

 <\/p>\n

\n

function mytheme_dequeue_styles() {
\nwp_dequeue_style( ‘twentyfourteen-ie’ );
\n}
\nadd_action( ‘wp_enqueue_scripts’, ‘mytheme_dequeue_styles’, 11 );
\n\/\/add new from child theme
\nwp_enqueue_style( ‘mytheme-ie’, get_stylesheet_directory_uri() . ‘\/css\/ie.css’, array( ‘twentyfourteen-style’ ), ‘1.0’ );
\n$wp_styles->add_data( ‘mytheme-ie’, ‘conditional’, ‘lt IE 9’ );<\/p>\n<\/blockquote>\n

 <\/p>\n

Now, I’m ready to change colors and format of the style.css that I like to have for my theme.<\/em><\/p>\n

[\/body1]<\/em><\/p>\n

[title2]Modify Child Theme style.css[\/title2][body2]<\/em><\/p>\n

 <\/p>\n

\n

3 Shades of color will be used : content = #111111 (darkest), primary-sidebar-header-footer = #191919 (lighter) , background = #1d1d1d (lightest).<\/em><\/p>\n<\/blockquote>\n

 <\/p>\n

Center the page on larger screen : I need to add these codes in the style.css.<\/em><\/p>\n

 <\/p>\n

\n

#page {
\nmargin-left: auto;
\nmargin-right: auto;
\n}<\/p>\n<\/blockquote>\n

 <\/p>\n

Change the site background color and size from 1260px to 1366px:<\/em><\/p>\n

 <\/p>\n

\n

.site {
\nbackground-color: #111111;
\nmax-width: 1366px;
\nposition: relative;
\n}<\/p>\n

body,
\nbutton,
\ninput,
\nselect,
\ntextarea {
\ncolor: #aaa;\/*#2b2b2b;idog*\/
\nfont-family: Comic Sans MS,Lucida Sans Unicode,Arial,Helvetica,sans-serif, Lato;
\nfont-size: 16px;
\nfont-weight: 400;
\nline-height: 1.5;
\nfont-style:italic;
\n}<\/p>\n

body {
\nbackground-color: #191919;\/*backgroundidog*\/
\n}<\/p>\n

a {
\ncolor: #cf3822;\/*#24890d;idog*\/
\ntext-decoration: none;
\n}<\/p>\n

.site-header {
\nbackground-color: #191919;\/*#000;*\/
\nmax-width: 1366px;
\nposition: relative;
\nwidth: 100%;
\nz-index: 4;
\n}<\/p>\n

.site-footer {
\n\/*border-top: 4px solid #666;\/*borderidog *\/
\nbackground-color: #191919;\/*#000;idog*\/
\nfont-size: 12px;
\nposition: relative;
\nz-index: 3;
\n}<\/p>\n

.site:before {
\nbackground-color: #191919;\/*primary-sidebar idog*\/<\/p>\n

@media screen and (min-width: 1366px) {
\n.site-content blockquote.alignleft,
\n.site-content blockquote.alignright {
\nwidth: -webkit-calc(50% + 18px);
\nwidth: calc(50% + 18px);
\n}<\/p>\n

blockquote {
\nbackground: #191919;
\npadding: 2%;
\ncolor: #eee;\/*#767676;*\/
\nfont-size: 16px;
\nfont-style: italic;
\nfont-weight: 300;
\nline-height: 1.2631578947;
\nmargin-bottom: 24px;
\n}
\n\/* Input fields *\/<\/p>\n

input,
\ntextarea {
\nborder: 1px solid #666;\/*rgba(0, 0, 0, 0.1);idog*\/
\n\/* border-radius: 2px;*\/
\ncolor: #aaa;\/*#2b2b2b;*\/
\npadding: 8px 10px 7px;
\nbackground:#191919;\/*comment area backgroundidog*\/
\n}<\/p>\n

input[type=”button[\/title][body],
\ninput[type=”reset[\/title][body],
\ninput[type=”submit[\/title][body] {
\nbackground-color: #191919;<\/p>\n

.site-content .entry-meta {
\nbackground-color: #111111;\/*#fff;\/*content text*\/
\nmargin-bottom: 8px;
\n}<\/p>\n

.entry-meta .tag-links a {
\nbackground-color: #191919;\/*backgroundidog#767676; idog*\/
\nborder-radius: 0 2px 2px 0;
\ncolor: #cf3822;\/*coloridog*\/<\/p>\n

.paging-navigation a:hover {
\nborder-top: 5px solid #666;\/*;idog*\/
\ncolor: #ff6611;\/*coloridog #2b2b2b;*\/
\nbackground:#191919;\/*idog add*\/
\n}<\/p>\n

.comment-content {
\n-webkit-hyphens: auto;
\n-moz-hyphens: auto;
\n-ms-hyphens: auto;
\nhyphens: auto;
\nword-wrap: break-word;
\nbackground: #191919;\/*idog*\/
\npadding:10px;\/*idog*\/
\n}<\/p>\n

#secondary {
\nbackground-color: #191919;\/*backgroundidog*\/
\nborder-top: 1px solid #000;
\nborder-bottom: 1px solid rgba(255, 255, 255, 0.2);
\nclear: both;
\ncolor: rgba(255, 255, 255, 0.7);
\nmargin-top: -1px;
\npadding: 0 10px;
\nposition: relative;
\nz-index: 2;
\n}<\/p>\n

.widget textarea {
\nbackground-color: #191919;\/*rgba(255, 255, 255, 0.1); searchbox left column*\/
\nborder-color: rgba(255, 255, 255, 0.2);
\ncolor: #fff;
\nfont-size: 16px;
\npadding: 1px 2px 2px 4px;
\n}<\/p>\n

.content-sidebar .widget textarea {
\nbackground-color: #191919;\/*#fff;searchbox right column*\/
\nborder-color: rgba(0, 0, 0, 0.1);
\ncolor: #bbb;\/*#2b2b2b;idog*\/
\n}<\/p><\/blockquote>\n

[\/body2]<\/em><\/p>\n