WordPress Twenty Fourteen (2014) theme modifications : Change Colors, titles, metas,sidebar, fonts,header,footer, menus etc using css.

wordpress twenty fourteen theme modification
Wordpress recently introduced their brand new Twenty Fourteen theme. Before I shared Twenty Thirteen theme Modifications
As per WordPress.com Team,in 2014 theme will lets you create a responsive magazine website with a sleek, modern design. Twenty Fourteen theme feature your favorite homepage content in either a grid or a slider. You can use the three widget areas to customize your website, and change your content’s layout with a full width page template and a contributor page to show of your authors.
Creating a magazine website with WordPress has never been easier.

Here i am sharing tips to modify the Twenty Fourteen theme using Css. Hope you will enjoy the theme.

1. From my attached screenshot at the top, you are seeing there are 3 Posts with featured image is showing
to show your posts in that section you have to make any of your 3 post Sticky (from post edit option) and any of your
three post will be visible there.

2. To remove the Category which is showing under the featured image at the top Sticky posts

.featured-content-inner .entry-meta {
display: none;
}
.grid .featured-content .entry-header {
height: 72px !important;
min-height: 72px !important;
}

3. To change that Top Sticky Post Titles font, color and size in twenty fourteen theme, use the following css
.featured-content a {
color: red;
font-family: arial !important;
font-size: 20px;
}

/****** Suppose you are showing Posts in your homepage *******/

4. If you don’t want Featured image to show above the Post Title in Homepage use the following code
a.post-thumbnail {
display: none;
}

5. In single post page also, if u don’t want to show the Featured image at the top of post title use the following code

div.post-thumbnail {
display: none;
}

6. If you want to remove the Category Links showing above the Post title in homepage and single post page use the following code

header .cat-links {
display: none;
}

7. If you don’t want to show the Post date, in homepage as well as in Single post page try the following code

header .entry-date {
display: none;
}

8. If you want to change Homepage Post Titles font color, font size and font family and bold property try the following code

#primary .entry-title a {
color: red;
font-family: tahoma;
font-size: 32px;
font-weight: bold;
}

9. Again if you want to Change the single Posts font color,font family font size in 2014 (twenty fourteen) theme

#primary .entry-title {
color: red;
font-family: tahoma;
font-size: 32px;
font-weight: bold;
}

10.If you want to change the font size, font family and color of widget title in right sidebar of twenty fourteen theme

.content-sidebar .widget .widget-title {
color: red;
font-family: cursive;
font-size: 17px;

}

11. If you want to change the right sidebar widget link color, link font family and font size

.content-sidebar .widget li a {
color: red !important;
font-size: 17px !important;
font-family: tahoma !important;
}

12. If you want to change the right sidebar widget hover link color, link font family and font size of twenty fourteen theme
.content-sidebar .widget li a:hover {
color: black !important;
font-size: 17px !important;
font-family: tahoma !important;
}

13. If you want to use background color behind the right sidebar widget title use the following code

.content-sidebar .widget .widget-title {
background: none repeat scroll 0 0 green !important;
padding-bottom: 8px;
padding-top: 7px;
text-align: center;
text-transform: uppercase;
}

14. If you want to remove the Site Description (which is showing below the Site Title) in twenty fourteen theme

.site-description {
display: none !important;
}

15. If you want to remove the Tags which generally shows at the bottom of the posts use the following code

.home .tag-links {
display: none !important;
}

16. If you want to change the font color,font size and font family of left sidebar widget links

#secondary li a {
color: red !important;
font-family: tahoma;
font-size: 15px;
}

17. If you want to change the hover color ,font size and font family of the left sidebar widget links in twenty fourteen theme

#secondary li a:hover {
color: orange !important;
font-family: tahoma;
font-size: 15px;
}

18. If you want to remove the comments section only from your pages (but not from post) in your twenty fourteen theme..use the following code

.page-template #comments {
display: none !important;
}

19. If you want to change the color, font size, font family of only Page tiltes (not post titles) in twenty fourteen theme,

.page-template h1.entry-title {
color: red !important;
font-weight: bold;
font-size: 24px;
font-family: times new roman;
}

If this CSS Modification seems helpful to you? You can donate $1 to support my site :)

Please make some donations


Want me to help you personally for CSS Issue? You can purchase gig from me in fiverr ..


Click the Image below

About these ads

32 Responses to WordPress Twenty Fourteen (2014) theme modifications : Change Colors, titles, metas,sidebar, fonts,header,footer, menus etc using css.

  1. How can we change the BLACK color on the left side?

  2. TBar says:

    John – try twenty fourteen colors a plugin to alter this aspect

  3. carlhassett says:

    This looks great, thank you! On my website (http://backpackersunion.com) I want to remove the featured image that sits over the post titles, but I still want a thumbnail image generated from the featured image when the site is viewed from a phone or small screen. Do you know if this is possible and what .php file would need to be modified in my child theme? I was able to initially remove the image by deleting “” in the content.php, but this removed the thumbnails when viewing from a phone also.

    Thanks a million!

  4. Paolo says:

    Great! :)
    Just a question: how can i show 3 featured without inserting tag? Just the last 3 posts…!

  5. Jules says:

    @allaboutbasic, thanks so much for putting this together, #18 was just what I needed, I spent about an hour trying to figure out how to remove the comments from my pages but not from the posts, and couldn’t find anything simple enough (I’m new to css) in WP forums. You saved the day, it works like magic! :D I was wondering if you could help me with this one – I am trying to change the text color of the links in my footer widget. Just like what you posted for the right and left sidebars, but for the footer instead (not the hover color, just the regular color). I’d really appreciate any help. Thanks you!

  6. SgIDco says:

    anyone know how to remove responsive code for twenty fourteen?

  7. karnhack.com says:

    I have a problem with a twenty fourteen template. In the demo (http://twentyfourteendemo.wordpress.com/) you can see the left menu with separator lines, this even offers a drop-down menu called “flyout” menu. In my site karnhack.com not appear in the same menu the separator lines, and does not even appear the drop down menu… that is nested!
    How do I fix these two problems? thanks

    Gianluca

  8. 1) can you help me on this: how can I change the size (width) of the content side bar. I would like to have it smaller
    2) which Facebook comment plugin do you use? I like it! (I’m currently using SEO Facebook Comment)
    Thanx! HEnny

  9. Vytautas says:

    Hi,
    I want to see my website in center of big screen. Npw theme twenty fourteen is in left side, background – on right.

  10. Navin Mukhi says:

    Hi Om, Can u help me with this, I would like to have a full page width for my gallery page?

    My site url http://www.kiangemstone.com

    Thank you

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 305 other followers

%d bloggers like this: