WordPress Tricks

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

allaboutbasic

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;
}

You can take my personal help in skype : om2000_cuet

Published by allaboutbasic

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

  3. 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!

    Like

    Reply

  5. @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! 😀 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!

    Like

    Reply

      2. Hi Jules
        to change the footer link color (regular one) in twenty fourteen theme (2014)
        try this css code

        .footer-sidebar .textwidget a {
        color: red;
        }

        let me know it works for you or not
        Om

        Like

  7. 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

    Like

    Reply

  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

    Like

    Reply

      5. Hi Henry
        nice to know you solved issue 2

        Pls try this for issue 1

        .content-sidebar {
        margin-left: -24.047619%;
        width: 24.047619%;
        }
        .hentry {

        max-width: 738px;
        }
        .site-content {

        width: 59%;
        }

        let me know if it helps

        Om

        Like

      9. Hi Om, what it does it that it increases the main site-content area width, but it doesn’t decrease the content-side width. Moreover, when going from full screen to a smaller browser format, then the site content is even smaller then in the original state.
        So I left it for now in original site, until I find a suitable way to manage the content-side area width. What I noticed when making the the window smaller, is that the content-side area decreases nicely in size.
        I found on the theme side:
        “The secondary “content” sidebar (right) width is 306.”
        Wouldn’t it be enough to change this value? Would you know in where that is defined? (I couldn’t find in style.css)
        Henny

        Like

  12. This code don’t work you can help me? .content-sidebar seems to give error.
    http://testsitirealizzati.altervista.org

    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;
    }

    Like

    Reply

      1. Goodmorning allaboutbasic,
        substantially I have three problems::
        1 – the search-box covering sidebar
        2 – I would like to add a background to the title of the widget
        3 – I would like to reduce the space between the menu
        I have attached an image to compensate for my bad english:
        https://drive.google.com/file/d/0B3a_1_P6VxUERzlTckVmTkduc28/view?usp=sharing
        The the site in question is:
        http://testsitirealizzati.altervista.org/
        Thank for your help

        Like

      2. HI
        thanks u can check these code

        #primary-sidebar .widget {
        margin-bottom: 23px !important;
        overflow: hidden;
        }
        .primary-sidebar .widget .widget-title {
        background: black none repeat scroll 0% 0% !important;
        display: block !important;
        z-index: 1000000;
        line-height: auto !important;
        padding: 4px;
        text-align: center;
        }

        Om

        Like

Leave a comment