Tag Archives: css

Customizing WordPress Twenty Fourteen Theme

Remove left sidebar:

http://wphow2s.com/twentyfourteen-child-RL.zip

Keeps sidebar:

http://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 */

Source: http://wphow2s.com/wordpress/twenty-fourteen-css-tweaks-child-theme/