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

Before I shared you wordpress Twenty Eleven theme, twenty Twelve theme, Twenty Thirteen theme, Twenty Fourteen Theme modifications using css. Here i am sharing edits of Twenty Sixteen theme which you can use in your site CSS to make your site different…

1. If you want to remove space from above the Site Title

#masthead {
padding-top: 0px !important;
padding-bottom: 12px !important;
}

2. Change Site title’s font color and size

.site-title a {
color: red !important;
font-family: times new roman !important;
}
.site-title {
font-size: 34px !important;
}

twenty-sixteen-theme-modification

 

 

3. If you want to make Site description bold, change font, font color or size in twenty sixteen theme

.site-description {
color: blue !important ;
font-size: 14px !important;
font-weight: bold !important;
font-family: times new roman !important;
}

4)If you want to hide Site description to show in the header in twenty sixteen theme

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

5) If u want to change your blog post’s or any of ur page’s title’s font, font color, size

.entry-title, .entry-title a {
color: red !important;
font-size: 25px !important;
font-weight: 500 !important;
font-family: times new roman !important;
}

6. From individual blog posts if you want to remove the Category and tags showing on the left of the post in twenty sixteen theme
.single-post .entry-footer {
display: none;
}
.single-post .entry-content {
width: 100% !important;
}

7. If you want to change Individual blog post’s Category or tag’s or Posted On’s font,font size, color

** For posted on
.single-post .entry-footer .posted-on a {
color: #000 !important;
font-weight: bold;
font-size: 14px !important;
}

** For category links
.single-post .entry-footer .cat-links a {
color: #000 !important;
font-weight: bold;
font-size: 14px !important;
}

** For tag links
.single-post .entry-footer .tags-links a {
color: #000 !important;
font-weight: bold;
font-size: 14px !important;
}

twenty-sixteen-theme-modification-css-code-6-7

 

 

8. From Individual blog post if you dont want to show the Related Post at the bottom of the post

.single-post #jp-relatedposts {
display: none !important;
}

9. If you want to change Font, font color,size,weight of Related post in twenty sixteen theme

.jp-relatedposts-post-title, .jp-relatedposts-post-title a {
color: red !important;
font-weight: 400 !important;
font-family: times new roman !important;
font-size: 14px !important;
}

twenty-sixteen-theme-modification-css-code-8-9

 

 

10. If you want to change font,font color, size of sidebar widget title in twenty sixteen theme

.widget .widget-title {
margin-bottom: 1.3125em;
font-size: 17px !important;
color: red !important;
font-family: times new roman !important;
}
11. If you want to change sidebar widget’s link color, size, font family etc

.widget li a, .widget a {
color: red !important;
font-family: times new roman !important;
font-weight: 700;
font-size: 14px !important;
}
twenty-sixteen-theme-modification-css-code-10-11

12. If you want to show “Continuous Reading” in the middle of your post
** please use this following code in post editor under “Text”

<strong><!--more--></strong>

theme-twenty-sixteen-Continuous-reading

13. If you want to reduce spacing or gap between homepage posts in twenty sixteen theme use this code

*** you can also add a border at the end of each post using this code

.home article {
margin-bottom: 20px !important;
border-bottom: 2px solid grey;
}

twenty-sixteen-huge-gap

14. For Individual Post page if you want to reduce spacing or gap between in twenty sixteen theme use this code

.site-header {
padding-top: 12px !important;
padding-bottom: 12px !important;
}

Twenty Sixteen (2016) Theme

15. If you want to put a border below the header in twenty sixteen theme use this code

.site-header {
padding-top: 12px !important;
padding-bottom: 12px !important;
border-bottom: 3px solid !important;
margin-bottom: 16px !important;
}

twentysixteen theme  modifications

16. If you want to change sidebar widget’s top border color and spacing

.widget {
border-top: 4px solid red !important;
margin-bottom: 12px !important;
padding-top: 12px !important;
}

2016 theme

17. To change menu font color, font sise, and font family of menus in twenty sixteen theme

.main-navigation a {
color: green !important;
font-size: 17px !important;
font-family: times new roman !important;
}
Twenty Sixteen theme menu font

17. To change footer Previous Post, Next Post font color, size and font family in individual post page in twenty sixteen theme

.post-navigation a {
color: #1a1a1a;
display: block;
padding: 12px !important;
}
.post-navigation * {
font-family: times new roman !important;
font-size: 17px !important;
color:red !important;
}

twenty-sixteen-previous-next-post

18. To change footer Previous Post, Next Post border color in individual post page in twenty sixteen theme

.post-navigation {
border-top: 4px solid red;
border-bottom: 4px solid red;

}
.post-navigation div + div {
border-top: 4px solid red !important;
}

Twenty sixteen theme modification using css

19. If you want to put border at the bottom of each home page post in twenty sixteen theme

.site-main > article {
margin-bottom: 12px;
border-bottom: 6px solid black;
padding-bottom: 12px;
}

Twenty Sixteen theme modification

20. If you want to change Blockquote’s border color, font color, font size and font family in twenty sixteen theme

blockquote {
border-top: 5px solid red !important;
font-size: 19px !important;
font-style: italic;
font-family: times new roman !important;
}

twenty-sixteen-blockquote

If you want to remove sidebar from single post page and make the content section centralized, I mean full width single post page in twenty sixteen theme. Also here i showed how to increase post section wide

.single-post #primary {
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
.single-post #secondary {
display: none !important;
}
twenty sixteen theme single post sidebar remove

Same way if you want full width page in twenty sixteen theme, try this code

.page-template-default #primary {
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
.page-template-default #secondary {
display: none !important;
}
twenty sixteen theme page sidebar remove

If you want to remove footer credit from twenty sixteen theme

.site-info {
visibility: hidden !important;
}

twenty sixteen theme remove footer credit


If you have any issue feel free to ask me question here in comments section

OR


Want me to help you personally for CSS Issue?CLICK HERE….

Want a New Look In you Twenty Sixteen (2016) Theme Like the image below? Click Here

twenty-sixteen-theme-new-look

263 Responses to WordPress Twenty Sixteen (2016) theme modifications : Change Colors, titles, metas,sidebar, fonts,header,footer, menus etc using css.

  1. bvooijenbvo says:

    I was looking for tweak 9 (delete cat-links en tags-links). Thank you. However, this only deletes it on single posts. How do I delete it on the homepage?

    Liked by 1 person

  2. barkerreport says:

    hi, i found your page really interesting. I’d like to use some of the tweaks you suggested, except I don’t know how to access the css in this theme.

    Wherever I go, I never see the customizing CSS option. Any suggestions?

    Like

  3. rjwilson2016 says:

    Thanks for the good CSS. It made my site look better.

    Like

  4. In Mubu says:

    Hi,

    First, I would like to know if it is possible to make the text background partially transparent; Second, Is it possible to add information to the footer credits? Thanks!

    Like

  5. t16 says:

    is it possible to remove the underlining that comes with the hyperlinked text? twenty sixteen seems to have this active as standard. looks ugly having all this text underlined when a hyper link is on the text. thank you

    Like

  6. Thanks a lot, this was really useful to quickly change some aspects of the design of my website.

    Like

  7. Ritesh says:

    How can I increase the width of the sidebar to 300px? Will I have to install any custom css plugin before making this change? The width right now is 277.5px

    Like

  8. I’ve been trying every css I can think of to center my site header-title and description. I can only get the title centered for everything. Can you help?

    Like

  9. Jlyn says:

    How do i center the site header-title and description but not touch the site title.

    Like

  10. Joycelyn says:

    my website is http://amkstudio.com/mywp/
    I need to center the header title and description

    Like

  11. Joycelyn says:

    My site is http://amkstudio.com/mywp/

    I am trying to center the header title and site description

    Like

  12. Joycelyn says:

    Omg. You are amazing. It worked. Thank you!

    Like

  13. michael says:

    You have a great site here, pls help me with my site, I want to change the following
    1. Remove “skip to content” on top of the site.
    2. Increase the size of the header and footer.
    3. Remove post navigation at the buttom of the site. The site is bestselfpropelledlawnmower.com, is a new site. Thanks ahead for your reply.

    Like

  14. Shane says:

    Hi,

    Thanks for your blog post have used many of the codes 😛

    Is there a way to change search results from default excerpt to show full post content.

    thanks

    Like

  15. Mario says:

    Thank you, Sir !

    Like

  16. Hn Hn says:

    i want use tip #13 for tag and category. plz help me!

    thank you so much

    Like

  17. Hn Hn says:

    it is not work 😦

    Like

  18. Great post! Saved me a lot of headaches. However I still have two questions:
    1) Is there a way to move the tags to the bottom of a post and what is that code?
    2) A category overview has a nice border on top of the page. How can I get that same border on the top of the homepage (between header and first article).
    with kind regards,
    Nico

    Like

  19. michael says:

    thank for the previous reply, but i still need help
    how can i put border over my content , i mean putting my article in a box?
    how can i put my recent post at the right side not under my content.
    thank in advance

    Like

    • HI Michael
      can u share me your site url please?
      and u want the box in your single post?
      let me know
      Om

      Like

      • michael says:

        thanks for your reply, my site is bestselfpropelledlawnmower.com. my major problem the date and author space left after deleting the it
        2. the recent post is appearing twice
        3. the post navigation does not delete completely. i will be greatful if solved thanks ahead.

        Like

      • Hi Michael
        1. i found your hompeage content section is not Full width…i think it is your first issue (where u deleted the date and author) . Try to use this code

        .blog .entry-content {
        width: 100% !important;
        }

        2. Would u mind to share me screenshot where “Recent Post” appearing twice? in the sidebar i found it Ok?

        3. Are u talking about the footer portion “/” which is showing?

        let me know
        Om

        Liked by 1 person

  20. michael says:

    thanks for reply but the code does not work and apart from the sidebar another recent post is showing below the post

    Like

  21. michael says:

    thanks, that worked. what i mean is that two articles appeared on the home page and other posts still appear with that space, am very grateful for your support

    Like

    • HI
      if i understood your issue clearly…you dont want to show your posts in homepage..right?

      if it is….then i prefer u show a static page in homepage?

      please let me know
      Om

      Like

      • michael says:

        thanks for your reply, my home page is static but it is showing two post instead of one

        Like

      • Goodmorning Michael
        actually in Static page it should not show blog posts,
        i think u have made blog page and home page same?

        or
        in your settings you are showing 2 posts?

        actually it would better if i could check the dashboard…

        Om

        Like

  22. Fatih says:

    Hello!
    It’s very helpful but i have a problem.
    You wrote codes in px but my style.css is like that:
    .site-header {
    padding: 2.625em 7.6923%;

    I tried to change 2.625 to 0 , i tried everything but i didnt change ANYTHING!!
    Please help me

    Like

  23. Fatih says:

    Hello

    Like

  24. christawojo says:

    Thank you so very much for taking the time to post these codes! I’m not at all comfortable with CSS, but all these fixes worked perfectly for me and you pointed out all the modifications I might ever want to make to this theme. Thanks again!

    Like

  25. webmasterrbc says:

    Hi Om,
    great site – lots of useful hints and tips 🙂

    I’ve a question for you – is there a way to get the menu bar that is horizontal at the top of the page by default, to appear as a column on the left?

    cheers,

    Chris.

    Like

  26. How do I create a widget area so that the widgets (Home, About, etc) will appear on top? Badly need your help. Thanks.. 🙂

    Like

  27. AR says:

    Hi! awesome page! thanks for all the info…

    For some reason, the changes are not being reflected on my blog page… for example I want to change the sidebar widget’s top border (change 16) to color #78CF9F… I did the change on my child theme style.css but didn’t work… I did the change directly on the twenty sixteen style.css and didn’t work either… am I missing something?

    thanks in advance!

    Like

  28. Romeo Crow says:

    Great post – thank you, it was really helpful!

    I just have one question though;

    I’ve managed to hide all the post meta data from the left side of both my homepage and an individual post page.

    However, I’d really like to get rid of the whole column entirely, as it means my post text is not centre-aligned (as the post title and feature image are) – it is offset to the right

    (see http://romeocrow.com/blog)

    How can I make it centred?

    Cheers and thanks for your awesome work!

    Romeo

    Like

    • Hi Romeo
      thanks
      would u mind to check this code please

      .blog .entry-content {
      float: none !important;
      margin-right: 15% !important;
      margin-left: 15% !important;
      width: 100% !important;
      }
      please let me know if this helps you or not

      Om

      Like

      • Romeo Crow says:

        Hi Om,

        Thanks so much for your swift reply and for helping me!

        Unfortunately it’s not quite right – nearly though 🙂

        The left margin is better, but now if the display shrinks in width (i.e. for mobile devices) the text doesn’t align to the left – as it did before on smaller screens – it now has a right-offset! (it’s like the behaviour of the text has swapped; on big screens it aligns, on small it doesn’t)

        Also, the text flows off-screen to the right, in both large and small screen sizes.

        (and finally, this only affects the blog homepage, not an individual blot post)

        I really appreciate you helping me – and your other CSS tweaks on this article are fantastic!!

        Like

      • Hi Romeo…i am checking and informing you shortly

        Like

      • Romeo
        please remove my previous code and try this
        @media only screen and (min-width: 980px) and (max-width: 20000px) {
        .blog .entry-content,.single-post .entry-content {
        float: none !important;
        margin-right: 15% !important;
        margin-left: 15% !important;
        width: auto !important;
        max-width: 100% !important;
        }}

        Like

      • Romeo Crow says:

        DUDE! You are a SUPERSTAR beyond AWESOME!

        That worked like a charm 🙂

        Thanks so much for your time, it is much appreciated.

        CHAMPION! :D:D

        Like

      • Pleasure Romeo 🙂

        Like

      • Romeo Crow says:

        P.S. If you’ve any interest in my music (I’m a songwriter) I have a Members-only area of my site where I put up at least one new song a month, and it costs £1 a month. If you’d like to be a Member I’ll happily give you a free account as a thank you!

        Like

  29. Pingback: My blog has had a makeover - Romeo Crow

  30. rofarmer says:

    Hi, this has been great so far! I wondered if you could help me… I’m using the type kit plugin but I can’t find the right name to change the links that come up on my portfolio. I tried a:link which got rid of the underline but didn’t change the typeface.

    I have linked the page below.

    http://www.rofarmer.co.uk/?page_id=311

    Hope you can help, thanks!

    Like

  31. Merx says:

    Hi Om,

    Your site is awesome. Just wanted to ask on #6. I want to remove the meta details on the left and set the blog post to be 95% width (but still leaning to the right for little indentation). I found out this css code but when I applied it, the meta details was removed from the top but appeared on the bottom of the post.

    @media only screen and (min-width: 980px) and (max-width: 20000px) {
    .blog .entry-content,.single-post .entry-content {
    float: none !important;
    margin-right: 15% !important;
    margin-left: 15% !important;
    width: auto !important;
    max-width: 100% !important;
    }}

    Would you be able to help? My site is roumery.com. Thanks 🙂

    Like

  32. Velanche says:

    Hi There!
    I have the 2016 theme at velanche.com.

    I’d like to hide the title of both Pages and “blog category.” For instance, my home site displays “Home” as a title. If you go to any of my pages, it starts with “category: ” displayed on the top. I want to hide them both, except keep the descriptions for the “category” pages.

    I’ve tried several different ways of hiding it, but so far it hasn’t worked for me. Any help to make them happen would be greatly appreciated.

    Thank you!

    Like

  33. Larry says:

    Thank you for the tweaks, they are working beautifully here. I am now successfully using my twentysixteen child theme.

    However, I continue to have a problem (no matter what theme I use) that my sidebar appears at bottom, after all the posts – but only on IE11. Chrome and Microsoft Edge do not have this problem, it shows on the right correctly in these browsers. Any advice? Thank you.

    Like

    • HI Larry
      what is your site url?
      please let me know
      Om

      Like

      • Larry DiGioia says:

        It is on a private intranet.
        One more thing since I posted – I did notice that I can use IE11 to change settings as site admin, and the preview shows the sidebar correctly. The sidebar only moves to bottom on computers/browsers viewing it “normally.”
        I also tried deleting all posts, removing all plugins – no difference.

        Like

      • HI Larry
        actually without checking i can’t say anything
        OM

        Like

  34. Mikhael says:

    Thank you for your work, it’s very helpful.
    How I can set specific background color for Administrator posts in the blog( different from posts of other users)?
    Thanks.

    Like

    • Hi Mikhael
      can u share me any 2 post url which are done by Admin and User please?
      Om

      Like

      • Hi Mikhael
        actually it will need php file modifications.. is that site in wordpress or phpbb?
        please let me know
        OM

        Like

      • Mikhael says:

        This is WordPress site with Twenty Sixteen theme and with plugin WP-United( phpBB WordPress Integration).

        Like

      • Hi Mikhael
        please replace “template-parts/content-single.php” with this modified code i shared and let me know..

        <?php
        /**
         * The template part for displaying single posts
         *
         * @package WordPress
         * @subpackage Twenty_Sixteen
         * @since Twenty Sixteen 1.0
         */
        ?>
        <?php
          global $current_user;
            get_currentuserinfo();
            $user_roles = $current_user->roles;
            $user_role = array_shift($user_roles);
        
        echo '<div id="'.$user_role.'">';
        ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        	<header class="entry-header">
        		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
        	</header><!-- .entry-header -->
        
        	<?php twentysixteen_excerpt(); ?>
        
        	<?php twentysixteen_post_thumbnail(); ?>
        
        	<div class="entry-content">
        		<?php
        			the_content();
        
        			wp_link_pages( array(
        				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
        				'after'       => '</div>',
        				'link_before' => '<span>',
        				'link_after'  => '</span>',
        				'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
        				'separator'   => '<span class="screen-reader-text">, </span>',
        			) );
        
        			if ( '' !== get_the_author_meta( 'description' ) ) {
        				get_template_part( 'template-parts/biography' );
        			}
        		?>
        	</div><!-- .entry-content -->
        
        	<footer class="entry-footer">
        		<?php twentysixteen_entry_meta(); ?>
        		<?php
        			edit_post_link(
        				sprintf(
        					/* translators: %s: Name of current post */
        					__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
        					get_the_title()
        				),
        				'<span class="edit-link">',
        				'</span>'
        			);
        		?>
        	</footer><!-- .entry-footer -->
        </article><!-- #post-## -->
        <?php echo '</div>'; ?>
        

        Like

      • Mikhael says:

        Hi.
        Thank you for your help.
        1.After the update the background color that I set in style.css for a single post( .post { background: #D4EAFD !important;}) disappeared and it is visible now only for a post header.
        2.I understand that we added unique div for each role, so now how do we set specific background color for some role?
        3.Sorry for misunderstanding( and for my Endlish), my main goal was to distinguish admin posts on the main blog page, not on the single post page.

        Like

      • HI Mikhael
        so u want single post done by Admin
        and single post done by Users…
        am i right?

        the div i added is to show the user role…so i can add css for that user role…

        u got the point?

        Om

        Like

      • Mikhael says:

        I want also to show on the main page http://www.israelru.botvinik.net posts done by admin and by users with different colors.
        How to add css to specific user role?
        Thanks.

        Like

      • HI Mikhael
        i think it would better to color the single posts first and then check the homepage issue..
        so if it is ok.. let me know the color for admin post and the user posts
        Om

        Like

      • Mikhael says:

        Hi,
        for example: #D4EAFD – admin, #B9F2FF – user.
        Thank you

        Like

      • Mikhael
        actually thanks sorry for the late..
        mainly it will need me to check the dashboard before providing u any info
        Om

        Like

  35. rofarmer says:

    Hi Om,

    I wondered if you could help me again. I managed to code the option to have excerpts on jetpack portfolio. However I wondered if you could let me know how to display the excerpt for each project on the portfolio page. So where it also say the title of each project.

    I have linked the page I want it on below.

    http://www.rofarmer.co.uk/portfolio-home-page/

    Hope you can help.

    Thank you!

    Like

  36. mikhaelbotvinik says:

    Thank you. I found the solution( https://wploop.com/authors-posts-style/ ).

    Like

  37. tim983 says:

    Thanks for posting this! It helped a lot. There is just one thing I can’t make happen… the titles of posts (previous & next) at the bottom of a single post I can’t change the font of. I have tried number 17:

    .post-navigation a {
    color: #1a1a1a;
    display: block;
    padding: 12px !important;
    }
    .post-navigation * {
    font-family: times new roman !important;
    font-size: 17px !important;
    color:red !important;
    }

    But it doesn’t take somehow… The site is http://www.timhupkes.com/profadvice
    I have managed to change thickness and color of the borders there, but the font just won’t go…

    Like

  38. gina says:

    Hi,

    Fist of all: Thank you for great advices! I have a question about the Twenty Sixteen Theme, is it possible to remove the author image to the left of the posts? I can’t get rid of it!
    And is it possible to edit the post content width on the post page? I would like it to be a bit wider and all the images to be exactly the same width (the featured image aswell). The url is http://www.ginaelena.se

    Like

    • HI Gina
      thanks
      so you want to remove the author information from the left of single post page? and make that single post page wider?
      please let me know
      Om

      Like

      • gina says:

        Hi! Yes i want to make the post page wider, and if it’s possible: place the Post Title + Date + Category Above the post. And maybe “Leave A Comment” under the post.

        Actually Im going to have another start page for my site and move my posts to my site/blog. If I have that setup for the post page ^ , can I still have another layout for the start page (ex. full screen image without sidebar on the right).

        Thank you!

        Like

      • gina says:

        And I am familiar with CSS, I’m working with a Child Theme for Twenty Sixteen.

        Like

      • HI Gina
        i can help
        mainly the modifications you are asking will need to modify the theme files…
        so.i will need to check the dashboard

        Om

        Like

  39. Jacques Korb says:

    Hi,
    I have tried this many ways without success. I would appreciate it if you can point me in the right direction.
    I have made a child theme of twenty sixteen.
    Question:
    Is there a way to separate the Site-Inner from the search area(Aside) so that i can place the search on the far right of the page and the content to the left (40%) without the two being linked somehow? Thanks in advance.
    Jacques Korb

    Like

  40. Jason Lu says:

    hey, could i know how to central the site title in Twenty Sixteen ? and how to hide site title ? and how to remove the footer. i just want to keep a page in my site, and remove a other info , e.g. footer , menu, or someting else.

    Like

  41. mehdiyazdani says:

    hi, i want to change search location(top right), how can i do it? tanx for help

    Like

  42. lmolguin says:

    Hi Om,

    thanks for posting this! Is there a way to make the blog entry content wider to the left without affecting the time and date link? I’ve been trying but for some reason it flyes down to the bottom of the page. Thanks!

    LM

    Like

  43. Hi Om,

    How can I increase the size of the content area and decrease the size of the sidebar area?
    http://testsite.thebestschoolintheworld.com/

    Cheers,
    DQ

    Like

  44. samuraitanpopo says:

    Thank you!!!
    You are so smart!

    Like

  45. Hi Om,

    Sorry to start another comment rather than reply to you.

    How can I center the title and subtitle of the site?

    http://testsite.thebestschoolintheworld.com/

    I might put a custom logo on it too.

    Thanks in advance!

    Cheers,
    DQ

    Like

    • Hi
      thanks. . sorry for the late reply. .
      would you mind to try this please? 

      .site-branding {
          float: none;
          margin-left: auto !important;
          margin-right: auto;

      }
      Om

      Like

  46. Oliver says:

    Thanks for these helpful tips! Is there a “css way” of completely changing the text font for the content of all pages and posts?

    Like

  47. Brian Audley says:

    I am trying to follow item 1 in your list to remove the space above the site title as my first step to modifying a woropress theme. I have just created a twenty sixteen child theme.
    For some reason it does not appear to work! Can you give me some advice as to what I am doing wrong?
    Thanks for your help
    Brian

    Like

    • Brian
      would u mind to try this please?
      .site-header {
      padding-top: 0px !important;
      }

      Like

      • Brian Audley says:

        Hi Om,
        Unfortunately that does not appear to have worked. Have I put the coding in the right place in my style.css file?
        My CSS file has:
        /*
        Theme Name: Twenty Sixteen Child
        Theme URI: http://audley.one-name.net
        Description: Twenty Sixteen Child Theme
        Author: Brian Audley
        Author URI: http://audley.one-name.net
        Template: twentysixteen
        Version: 1.0.0
        License: GNU General Public License v2 or later
        License URI: http://www.gnu.org/licenses/gpl-2.0.html
        Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
        Text Domain: twenty-fifteen-child
        */

        .site-header{
        padding-top: 0px !important;
        }

        Like

      • Brian
        would u mind to install this pluign
        https://wordpress.org/plugins/simple-custom-css/
        and put my code there?

        OM

        Like

      • Brian Audley says:

        Hi Om,
        I have installed ‘simple-custom-css’ and your suggestions work.
        Does that mean there is a problem with my functions .php file?
        Regards
        Brian

        Like

      • Brian
        actually i need to check the child theme u created
        but i think it is not a problem….
        u can use the custom css plugins to add custom css

        Om

        Like

      • Brian Audley says:

        Hi Om,
        How would you check the child theme. It only contains two files the style.css & functions php.
        You have already seen the style,.css file.
        I copied the functions.php file from the ‘wordpress codex child theme page’ file
        but then had to change things as the codex page was for twenty fifteen theme.

        Would it help if I pasted the functions. php to this Blog so you can see it?

        Regards
        Brian

        Like

      • Brian
        upload the child theme zip in dropbox and give me the link here

        Om

        Like

      • Brian Audley says:

        Hi Om,
        My child theme is basically a blank child theme consisting of only two files style.css and functions. php. You have already seen the complete style.css file.
        The functions.php file is a copy of the functions.php file listed on https://codex.wordpress.org/Child_Themes with the word ‘twentyfifteen’ replaced with the word ‘twentysixteen’
        I have included a copy of the functions.php file below:

        get(‘Version’)
        );
        }
        add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
        ?>

        In my theme directory I have a folder ‘twentysixteen’ and another folder ‘twentysixteen-child’

        The folder titled twentysixteen-child contains the above functions.php file and the style.css file contained in a previous message.
        Regards
        Brian

        Like

      • Brian
        actually it is problematic for me to create the child themes again using ur infos
        thats why i requested the zip of child theme..so that i can install it directly in my localhost …
        anyway…thanks again
        and if u have any issue in css.. u can ask me here
        Om

        Like

  48. susan says:

    Hi,

    I am trying to do two things and can’t seem to:

    1) Reduce space between end of post and entry footer (on homepage)
    2) Reduce spacing between entry title and entry content (on homepage)

    Thanks
    Susan

    Like

  49. susan says:

    Thank you so much that worked. However, for mobile devices it is only working for iphone and not android. The text is laying on one another on the Android devices. Do you know any code that would force a desktop view on android as well?

    Thanks,
    Susan

    Like

    • Susan
      ok please try this (replace my previous code with this new one)

      @media only screen and (min-width: 730px) and (max-width: 200000px) {
      .home .entry-footer {
      margin-top: -27px !important;
      }
      2. As per your issue 2, to reduce space below the entry title use this code
      .home .entry-title {
      margin-bottom: 6px !important;
      }
      }

      this new code will only be effective only for tablet and desktop/laptop… not for mobile..so ur mobile view will remain same as before
      Om

      Like

      • susan says:

        Thank you Om. I’ve actually been trying to fix mobile view on Android for awhile now and not just for these issues. Overall, the text is all over the place for mobile. Do you know any code or fix that would force ALL my current CSS changes to Android mobiles? It seems to only be working on Iphones. If you’d like I can send you my current CSS sheet. My goal is to have the android devices display just like desktop.

        Thanks in advance!
        Susan

        Like

      • Susan
        i shared you my skype
        om2000_cuet
        Om

        Like

  50. susan says:

    Hi Om,

    Is there any way I can contact you directly to help fix the issues I am seeing on mobile? It would help me tremendously!

    Thanks,
    Susan

    Like

  51. Brian Audley says:

    Om,
    Can you please advise how I change the font, colour, and size of the page title.

    I would like to change the page title from the default on the 2016 theme to something different but the page title font, colour, and size will be the same on every page

    Thanks
    Brian

    Like

  52. shadimaj says:

    Thanks a lot bro, you deserve gold for this helpful blog.

    Like

  53. liontobey says:

    I have tried to get rid of the “Comments are closed” statement that appears at the end of my pages by removing the code from the comments.php in my twenty sixteen child theme but it did not remove the statement from my page. Any ideas?

    Thanks

    Like

  54. shadowmason says:

    Thank you… Great article! Really help me with some of the styling issues that I had. http://artchangelives.com

    Like

  55. Mike says:

    GREAT WORK ! THANK YOU !
    But i have a question to number 16:

    border-top: 4px solid red !important;

    if it possible to change the color in hex code = z.B. #g45fgrg ????

    Greetings from Germany
    Mike

    Like

  56. Robert says:

    Hello. Firstly, thank you so much for sharing your knowledge. You have really helped me a lot. I was wondering if there is CSS code to change the font across my whole site. If you could help me with that I would be so grateful!

    Like

  57. Daniel Hudon says:

    Thanks for all the great tips.
    Is there a way to increase white space between posts on the posts page? (I have a static front page.) I would like more space between the end of a post and the title of the next post. I’m working here: http://danielhudon.com/wp/news/
    Thanks,
    Daniel

    Like

  58. alcaiderm says:

    First of all, congrats for your great blog. It’s the best!!
    I’d like to use the standard twenty sixteen theme in a host (not in wordpress.com) but removing everything in the header (except the logo) in order to reduce the space on top.
    Can ou please advice how to do it?

    Like

  59. Keith says:

    Hi, great post – really useful information – thanks for posting.

    I’m using twenty sixteen with a title image – and I’m trying to figure out how to left align the top menu beneath the title image. By default the top menu is right aligned and in line with the title image.

    Would appreciate any advice.

    Like

    • Hi Keith
      would u mind to share me the site url you are working please?
      OM

      Like

      • Keith says:

        Yes this is the site I’m developing at present:
        http://latacatemp.dreamhosters.com/

        The above URL shows how I’d like the menu to appear, but I’ve had to add a couple more pages than I really require, and elongate the page titles in order to force the menu below the title image (Lataca image). If I have fewer pages and shorter page titles the menu appears level with the title image and right aligns – I think this is the normal Twenty Sixteen behaviour.

        Thanks for your interest.

        Regards,
        Keith

        Like

      • Hi Keith
        would u mind to try this please
        #site-header-menu {
        display: block !important;
        float: left;
        width: 100% !important;
        margin-top: 0px;
        margin-bottom: 0px;
        }

        Om

        Like

  60. Keith says:

    Om, that’s very clever – thank you.

    Just one thing though – when I now view from a small screen device the menu defaults to an expanded menu – rather than the collapsed menu!! any way of retaining the collapsed menu?

    No worries if a collapsed menu cannot be achieved – this tweak is very useful regardless.

    Like

  61. Daniel Hudon says:

    Hi Om,
    I have a new question for you.
    I developed my wp site as a subdirectory to my domain name but now want it to look like it’s in the root directory. I also want a static front page. So, I copied the .htaccess file and index.php file from the wp directory to root. And I left the WordPress address in Settings –> General as danielhudon.com/wp and changed the Site Address there to danielhudon.com (i.e. removing the /wp). I also created a “Home” page with a bit of personal information. Finally, in Settings –> Reading I selected “Static Front Page and designated “Home” as my Front Page and “News” as my posts page. Now the problem: the menus for my other pages all work, but “Home” doesn’t display my wordpress page and instead finds my old index.html file to display. Similarly, if I just type danielhudon.com, I get that old index.html page, and not my WordPress site. It seems I’m missing something — any ideas?

    Thanks,
    Daniel Hudon

    Like

  62. drashrafsabry says:

    Hello
    How can i add the social links menu to the sidebar to show icons beside each other not text underneath each other

    Like

  63. email234 says:

    Thank You,

    I have tried many things to remove the white area above the smartslider,

    my url is http://www.transmissioncrafters.com

    thanks again

    Jay Moore

    Like

    • HI Jay
      please try this

      #page {
      margin-top: 0px !important;
      }
      body:not(.custom-background-image)::before, body:not(.custom-background-image)::after {

      height: 0px !important;
      left: 0;
      position: relative !important;

      }

      *** I also replied you in fiverr…thanks for your kind consideration to support me in fiverr

      Om

      Like

  64. Karen K says:

    Hello. You helped me out a lot with the great tips!

    I’m still working on my website. I would like to have a small featured image on posts page where all recent posts are listed with excerpts. On the single post itself I would like to have the image appear bigger. Could you help me with this?

    Like

  65. Anil says:

    great post

    Like

  66. Memet Mihi says:

    Wonderfully helpful info! Thank you!

    Like

  67. Shamim says:

    I tried to remove the extra white space right above the logo. Applied your CSS code (#1), but its not working.

    My site link is in my name of thsi comment.

    Can you please help me, Mr. Om?

    Like

  68. bl0ckchain says:

    Hi… thanks for the very useful blog post on 2016 theme. Given this;
    – I have hidden the sidebar
    – Tried to remove as much as meta data
    – made it 100% (home and single post page)
    – my site is http://www.bl0ckcha.in

    I have a couple of questions;

    1. On home and all other pages, I still have left side and right side margin/padding. Now sure how to remove that?

    2. On the home page and single post page, there is still a gap between post title and post summary, how can reduce or adjust that?

    3. Is it possible to have alternating backgroung colors for the home page posts? White and grey alternating?

    Thanks in advance

    Like

  69. bl0ckchain says:

    Yes that is the site, still under development/customization. Thanks

    Like

  70. loshmi73 says:

    You can try this plugin, you can use Google fonts, wide template and change menu position: https://wordpress.org/plugins/customize-twenty-sixteen/stats/

    Like

  71. Bill E says:

    Please pardon my noobness. From example 6 above….

    6. From individual blog posts if you want to remove the Category and tags showing on the left of the post in twenty sixteen theme

    .single-post .entry-footer {
    display: none;
    }
    .single-post .entry-content {
    width: 100% !important;
    }

    I’m assuming I edit the single-post CSS file but what actually goes into the file and what part of the code do I insert it into?

    Thank you!

    -Bill

    PS – I’m working of a local copy of InstantWP.

    Like

  72. serg says:

    how can i remove frame like background in this theme

    Like

  73. martin says:

    hello fiirst of all many many thanks for the tutorial –
    and also for the tutorial for the theme 2017 – i am glad to see such a great site:

    i have moved the theme from twentyfourteen to twentysixteen – now i have to do some customizing. – see the page http://www.literaturen.org

    now i try to run the following code to approach the following goal:– see the left and the right side-column: I tried to make a modification in the Twenty Sixteen theme with the following code:

    .sidebar {
    float: right;
    margin-left: -100%;
    max-width: 413px;
    position: relative;
    width: 14.4118%;

    .sidebar {>
    float: left;
    margin-right: -100%;
    max-width: 413px;
    position: relative;
    width: 14.4118%;
    }

    but wait: the center area is way too small …
    i need to have a center area with a more wide …

    how to approach this? – see the page: http://www.literaturen.org

    love to hear from you
    thx in advance for every hint – and tipp.

    Like

    • HI Martin
      would u mind to try this following code please

      .home .su-column.su-column-size-1-3 {
      width: 100% !important;
      }

      .home .content-area {

      width: 72%;
      }

      *** this code is applicable for homepage
      Please let me know if it works
      Om

      Like

  74. Stephanie says:

    Really good stuff here. How would I change the title of a Widget from all caps to just normal Capitalization? It’s driving me nuts!

    Like

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

%d bloggers like this: