Twenty Fourteen color questions

• 

  gfbg14 · Member · Aug 28, 2014 at 12:42 am

  • Copy link
  • Add topic to favorites

  Hi to all,

  On Twenty Fourteen, what is the CSS code to change color in :

  1. The inner background of front posts (the white part on the site) ?
  2. The font links

  Thanks !

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Aug 28, 2014 at 2:13 am

  • Copy link

  Hi there, there are a number of selectors that have a white background color in the post area. The following will allow you to edit and change the white in the content area.

  .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .page-content, .site-content .entry-meta {
      background-color: #CC0000;
  }

  For links, there are a good number of places they need to be changed. I think these will cover them all. I’ve used some rather “colorful” demo colors in the above. You can edit the color codes as desired.

  Links (non-hovered)

  a, .content-sidebar .widget a, .content-sidebar .widget_flickr #flickr_badge_uber_wrapper a:link, .content-sidebar .widget_flickr #flickr_badge_uber_wrapper a:active, .content-sidebar .widget_flickr #flickr_badge_uber_wrapper a:visited {
      color: #00cc01;
  }

  Post title (link non-hovered)

  .entry-title a {
      color: #2b2b2b;
  }

  Post metadata (under post title)

  .entry-meta a {
      color: #767676;
  }

  Links (when hovered)

  a:active, a:hover, .entry-title a:hover, .entry-meta a:hover, .cat-links a:hover, .entry-content .edit-link a:hover, .post-navigation a:hover, .image-navigation a:hover, .comment-author a:hover, .comment-list .pingback a:hover, .comment-list .trackback a:hover, .comment-metadata a:hover, .comment-reply-title small a:hover, .content-sidebar .widget a:hover, .content-sidebar .widget .widget-title a:hover, .content-sidebar .widget_twentyfourteen_ephemera .entry-meta a:hover, .content-sidebar .widget_flickr #flickr_badge_uber_wrapper a:hover, #infinite-footer .blog-info a:hover, #infinite-footer .blog-credits a:hover {
      color: #cbcc00;
  }

  The changes the color of the non-link text in widgets, such as your contact widget.

  .widget {
      color: #0065cc;
  }

• 

  gfbg14 · Member · Aug 28, 2014 at 8:59 am

  • Copy link

  Thanks a lot, great support :)

• 

  thesacredpath · Member · Aug 28, 2014 at 2:21 pm

  • Copy link

  You are welcome, and thank you!