CSS Tweaks for Your Child Theme
The Twenty Fourteen theme is a great theme in my opinion. Not everyone agrees of course, but I love how versatile it is.
Like most WordPress default themes, making “tweaks” to the theme CSS code (watch the video below) allows you to change the look of your site quite a bit.
I made a video using the Twenty Fourteen, but made the mistake of using the Fourteen Extended plugin.
That plugin is gone, so this post will help you replace it, so that you can span the featured images full-width, remove the “indenting” of the content into the featured images, and more, without relying on that plugin (which wasn’t a good idea).
If you are a beginner, and all my talking about CSS and child themes has you ready to click away, wait a minute!
There’s no need to be a coding “ninja” because it’s a simple process…really. 🙂
I’ve made it easy for you–there are 2 child themes that are done for you below the video, along with more CSS code to customize your 2014 site.
First, watch the video, then read the rest of the post.
Hint: This is HD, so click on the icon on bottom right to watch it full-screen. 🙂
You absolutely have to use a child theme, otherwise all your hard work can be lost when your theme updates, and the Twenty Fourteen theme updates on a regular basis.
To use the child themes below, you simply download the zip file(s) to your computer, then go to Appearance—>Themes in your WP admin dashboard, click “Add New”, then “Upload Theme”, find the zip file on your computer, install and activate. (you’ll need to have the parent Twenty Fourteen theme installed, which will usually be there already unless you have removed it).
Both child themes will center the site on the screen (instead of being aligned to the left), make featured images full-width, along with code that you can adjust the indenting of the your content into the featured image.
You can install both child themes (watch video) so that you have the option to have the left sidebar or not.
Note: You will probably have to resave your custom menu, header, & background after activating a child theme.
Remove left sidebar:
https://wphow2s.com/twentyfourteen-child-RL.zip
Keeps sidebar:
https://wphow2s.com/twentyfourteen-child.zip
Here’s are the 15 CSS snippets to add to your child theme, to tweak your Twenty Fourteen website further. Some of the code snippets are already included in the 2 DFY child themes, so double check.
I would suggest adding one snippet at a time and making sure it works (in case you didn’t copy the code right, or it just doesn’t work period–things happen 🙂
Make sure that you get all of the code, including the /* */ opening & closing tags for the comments.
Hover your mouse on the icon on the top right of the code box to highlight code.
1.This center aligns 2014:
/*this center aligns site */
.site {
margin: 0 auto;
}
/*end center align code */
2. This will make featured images span full-width:
/* span featured images full-width of content */
.post-thumbnail img {
width: 100%;
}
/* end span featured image code */
3. Use this to adjust the indenting of content into featured image:
/* remove/adjust featured image indent (default -48px) change to 0 (zero) for no indent */
.site-content .has-post-thumbnail .entry-header {
margin-top: -48px;
}
/* end indent code */
4. Adjust padding between top of content and header:
/* adjust padding between top of content and header 72px default */
.content-area, .content-sidebar {
padding-top: 72px;
}
/* end adjust padding between top of content & header */
5. Adjust maximum width of content (don’t use this if you used the remove left sidebar code or child theme–the code to adjust is included):
/* Content max-width adjust 630px as needed (default 474px) */
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 630px;}
/* End of max-width code */
6. Align navigation menu:
/* align nav menu (adjust header-main text-align value) */
.header-main {
text-align: right;
}
.primary-navigation {
float: none;
}
.primary-navigation li {
text-align: left;
}
/*end align nav menu*/
7. Adjust current & link hover color, decoration:
/* link color - current & hover change text-decoration to none if link underline not wanted*/
a:active, a:hover {
color: #41a62a;
text-decoration: underline;
}
/* end current & hover link code */
8. Adjust link color – content sidebar widget links:
/* link color - content sidebar widget links */
.content-sidebar .widget a {
color: #224488;
}
/* end content-sidebar widget link code */
9. Adjust link color, decoration:
/* link color -can underline links by changing text-decoration to underline */
a {
color: #24890D;
text-decoration: none;
}
/* end link color */
10. Adjust featured content (in grid header) padding:
/*controls height of featured content padding*/
.grid .featured-content .entry-header {
height: 70px;
}
/*end code height of featured content padding*/
11. Remove meta data in featured content (grid header)::
/*removes meta data of categories by display: none*/
.featured-content .entry-meta {
color: #FFFFFF;
display: none;
font-size: 11px;
font-weight: 700;
line-height: 1.09091;
margin-bottom: 12px;
}
/* end meta data categories */
12. Adjust page & post title font size:
/*Page titles*/
.entry-title {
font-size: 15px;
font-weight: 600;
line-height: 1.09091;
margin: 0 0 12px;
text-transform: uppercase;
}
/* end page titles*/
13. Adjust site title font size & color:
/*site title font size & color, etc*/
.site-title a, .site-title a:hover {
color: #FFFFFF;
font-size: 26px;
}
/* end site title */
14. Remove auto text hyphenation:
/*No auto text hyphenation*/
.entry-content,
.entry-summary,
.page-content {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
word-wrap: normal;
}
.nav-links {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
border-top: 1px solid rgba(0, 0, 0, 0.1);
hyphens: none;
word-wrap: normal;
}
.comment-content {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
word-wrap: normal;
}
.widget {
font-size: 14px;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
line-height: 1.2857142857;
margin-bottom: 48px;
width: 100%;
word-wrap: normal;
}
/* end no auto text hyphenation*/
15. Use so sub-menu navigation item in left sidebar isn’t covered by slider image:
/*This is so a sub-navigation menu item in the left sidebar menu is not
covered by a slider image*/
#secondary {
z-index: 9999;
}
/* end sub-menu code */
