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

429 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

    Liked by 1 person

    • 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

  75. Hi Man,
    good blog!
    Please help. I would like to place image in footer of 2016 for the whole width of the page, including area below sidebar. I am working on my web site locally. Thank you in advance

    Like

    • Actually it would better to check the site live
      Om

      Like

      • Thank you for the fast reply Om! How do we do it?
        Regds
        Z

        Like

      • HI
        is ur site live? i mean… can i check ur site go through a URL?

        Like

      • HI,
        Thank you .
        I am working on it locally on my Desktop Server. I do not have a domain yet. Waiting for the guy to reply on my bid for the domain. Basically it is 2016 theme with sidebar on the right. What I would like to do is change the background colour and modify the footer to make it visible on the white background, then change its size. At least that. My web pages are top heavy, I managed to add slider to the header. Maybe I could even add some image to the footer.
        Is there any other way how I can get you access to this on my comp locally? I have a basic version of Desktop Server so it will probably not going to let me upload it to anywhere and my skills are beginning of the beginer’s
        Regds,
        Z

        Like

      • Dear Om,

        I am up and running now at
        anti-wrinklesolution.com
        Please help me put the copyright text (in white color) at the bottom of the footer in the center.
        I think now it is below footer. Also I would like to add contact form which is now at separate page, also to the footer aligned right.
        Thanks a lot in advance.
        Best regards,
        Zdravko

        Like

      • Hi
        so you want to put the copyright text in the footer blue area ?
        please let me know

        Om

        Like

      • Zdravko says:

        Yes please,white text smaller letters, entered in blue area at the bottom. I put this existing copyright text using someones else code I found on the net :Copyright © 2017 · All Rights Reserved · Pharmaceutica through “Insert Headers and Footers” plugin. But I do not like it. If I try to center it I can center it on one page only and then the whole content text is also centered. So I think we should go for the blue area at the bottom.
        Thank you in advance for your help.
        Regds,
        Zdravko

        Like

      • Hi
        thanks
        actually that type of issue need to checck dashboard…so i prefer u communicate with me here
        https://www.fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-and-other-wordpress-issues

        *** just create an account for u and send me message in fiverr ( in my gig page)

        OM

        Like

  76. martin says:

    hello dear Developer, i am on a page where i want to lower the widtht of the right (!) colum of the theme 2016:

    see the page: http://www.ex-libri.org

    the right column is tooo big:

    /* Enter Your Custom CSS Here */

    .sidebar {
    width: 18% !important;
    }

    note: i can change the width a bit – but the funny thing is – i cannot controll the spaces that arise when i change the width of the rigth column.

    QUestion: how to controll this spaces ? How to minimize these spaces!?

    Like

  77. martin says:

    hello dear Om

    many thanks for the quick reply

    very interesting findings here:

    – if i add this code than nothing (at all) happens.
    note: i could change the values in every line … one for one – but nothing happens.

    question: what does cause these effects !?

    is it possible that i have some interactions between “installed” and activated plugins!?

    love to hear from you

    /* Enter Your Custo

    aside#secondary {
    width: 38% !important;
    margin-left: 80% !important;
    }
    .content-area {
    width: 86% !important;
    }

    love to hear from you

    martin

    Like

  78. martin says:

    hello and good evening – my name is martin many thanks for the reply regarding the css-issues on a theme 2016 –… i f you are willing to help me i would be very glad: see the page:
    http://www.ex-libri.org – i ve posted you the site details via facebook –

    btw: one question: regarding the theme you have offered here: http://www.mediafire.com/file/mi1a4nnobgw7uq5/twentysixteen.zip
    i f i would like to install the the theme on my page – i would be more than glad to test it.

    but wait: i guess that i could run into so called naming conflicts – if i do so.
    Why; both themes – the standard theme and your one are both named the very same way… both are named twentysixteen

    dear OM –
    i am so glad to hear from you.

    i look foward to your findings..

    Like

    • Goodmorning Martin
      actually as you are already using twentysixteen theme
      and the theme i shared in mediafire is also twentysixteen theme..which i just modified to a new look using css…. 🙂

      thats why when u r trying to install it…it is showing naming conflict 🙂

      OM

      Like

  79. martin says:

    hello btw – i have send some money to you…
    Transaktionscode: 1BC7803xyz

    have send a payment to fiverr – $6,00 USD an fiverr.com gesendet (feedback@fiverr.com).

    love to hear from you – to this mail adress: martin.kaspar@campus-24.com
    or here on this great page!!

    best regards

    Like

  80. martin says:

    Hello dear OM …. one last word –

    i am a bit disappointed about the processes – that runned in the last two hours:
    i processed a money transfer into -…. the middle of nowhere.. to a company called fiverr..:

    and i think that the money did not arrive at your site;

    i ve got some postings from some __companys__:

    …Create a Fiverr account to complete your order

    well i do not want to get an account on Fiverr – no and forever i want to register on that page.

    conclusio: SO THIS IS SOMEWHAT DISTURBING AND FUSTRAGING – I DO NOT WANT TO REGISTER ME ON fIVERR

    they mailed: Thanks for your order. Before the seller can get started on your order,
    you’ll need to create an account with Fiverr by clicking on the button below:

    sorrry daer OM – perhaps you find me somewhat old-fashioned – but i am a bit dissappointed.

    final conclusion:
    fiverr gained some money …
    you have some postings here on this page – that you probably erase and i
    have lost 6 Euro . and going to solve my problems on my one…

    dissapointing.

    Like

    • Martin
      sorry for that…
      actually i just mentioned to communicate with me in fiverr which is secured and i can check your dashboard and others…thats why i referred to it..though i didnt request you to send any money..and to open account you dont require any money….but thanks as u tried to promote and help me..but sorry as u lost.. but i prefer u should check your account and communicate with fiverr support…they are really great..

      fiverr is a wellknown,secured and trustworthy marketplace… and i worked there… so take help from their support…

      *** With your blessings..i am till a top rated seller in fiverr..so..i have a reputation there

      OM

      Like

  81. martin says:

    dear OM,

    many thanks for the answer.

    i am so glad that you have helped me. well the css-code does not work – anythnig i have entered into the css-plugin did not work

    now – i have no glue – i guess that an expert can see more than i do :

    would you mind having a loook at the dashbord: – that would be more than great!:

    i love to hear from you _ btw you also can mail me directly – via martin.kaspar@campus-24.com

    have a great day.

    regards martin

    Like

    • Martin
      i replied you in fiverr…. also.. you can check now.. my code worked

      please let me know if it helps

      Om

      Like

      • martin says:

        many many thanks – now all works perfect -BTW – i guess that it was not only _your _ code that did not worked. No css-code seemed to work propperly. Or just set me straight if i am wrong…
        what was wrong?! was there another kind of missconfiguration on the site. love to hear from you. and Again many many thanks for all you did!! Excellent site & excellent support here. Martin

        Like

      • HI Martin
        the issue was…somehow u removed ” */ ” in ” /* Enter Your Custom Code here */”

        for that code was not working

        Om

        Like

  82. martin says:

    hello dear OM -many many thanks !!! Overwhelming support here. – Martin

    Like

  83. martin says:

    i have to confess: This wordpress-theme help site is definitely one of the best places for theme-help i have met so far. the Support is overwhelming:. OM is just a Mail away.

    i had issues with the wordpress-theme 2016. OM has helped me and supported me.

    a trillion thanks to OM his help with the WordPress-Theme and CSS. keep up this super-work!!!
    your theme-support-site contains much information. Thousands of wordpress-fans from all over the globe were happy with this your work

    keep up the great work

    Like

  84. Natalia says:

    Hello, I have a question how to remove white spaces from a landing page (right, left, up and bottom sides). Can I disable a header line “Home”? My page is hypnosiscertified.q5pro.com. Hope you can help me. Many thanks, Natalia

    Like

  85. Natalia says:

    Hi Om, Thanks for your quick reply, Yes, I am working on this landing page. I need to make a “full width” position of the template. Also I would like to remove the white space above the header picture and also disable word “Home”. Many thanks

    Like

    • HI Natalia
      to make twenty sixteen theme’s home page full width (not 100% cover..there will be some left and right space), try this css code

      .home header, .home .entry-content {
      width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      }

      and to remove the word “Home” from homepage try this code

      .home .entry-header{ display:none !important}

      please let me know if it helps

      Om

      Like

  86. Natalia says:

    Thank you so much for your help!!!

    Like

  87. martin says:

    dear om i run a page with the theme 2017 – and i want to add some special features like they can be seen here.

    question : an i do this with implemeting this here:

    https://de.wordpress.org/plugins/tf-numbers-number-counter-animaton/
    Requires: 3.9.0 or higher
    Compatible up to: 4.7.2
    Zuletzt aktualisiert: 1 Monat ago
    Aktive Installationen: 2,000+
    http://themeflection.com/

    TF-Numbers is Responsive Random Numbers Statistics Plugin that is very easy to use and implement into any post, or
    page. It will ultimatelly supply you with beautifull sections with counting numbers. You can use it to display statistics, or show off your work in numbers.

    see here a demo: http://themeflection.com/plugins/wordpress/tf-numbers/demo2.html
    is this possible to include / do with the theme 2017?

    love to hear from you

    Like

  88. martin says:

    hello dear OM,

    many thanks for the quick reply. hats just great. Well you encourage me to give it a try. i want to use this plugin in the theme 2017. And i want to get certain values of the db into this animated css-counter…:

    what is aimed: i run the plugin called participants database – ( see https://wordpress.org/plugins/participants-database/ ) this is a plugin that is able and capable to be part of a job-market where jobseekers and employers are able to offer and look for a
    job.

    With the plugin i want to display certain values – eg.

    – a. how many employers are allready registered;
    – b. how many job seekers are allready registered; and – for example
    – c. how many successful matches between a and b allready have been achieved (which may be taken from a certain db-entry of the participants
    datbase…)

    the question in general: am i able to include those certain values into the “feature called animated counter” that we can see in the above metioned example. Guess so. Well i think i give it a try.

    again: Many thanks for the answer – have a great day!

    Like

  89. martin says:

    Dear OM

    …many many thanks for your continued support – it is great to see your page as a great place of information and inspiration. I ve bookmared it. and i am so happy that i have found this. You are very very supportive. And i guess that you find more and more friends day by day!

    OM i have seen a nice feature(idea) on a website see https://www.kfw.de/
    there a kind of a menu was created with some certain – so called blocks below the slider:

    see the following examples on the above mentioned site – https://www.kfw.de:
    _ für Privatkunden
    _ für Unternehmen
    _ für oeffentl. Einrichtungen…
    _ …. and so on…

    question: how would you arrange such blocks in a theme like twentyfourteen or twentysixteen!?

    Can we do this with a plugin like shortcode ultimate (see https://wordpress.org/plugins/shortcodes-ultimate/ )
    …or how would you try to arrange this !?

    i look forward to hear from you.

    best regards martin

    ps _ keep up the great project – it rocks!!!

    Like

    • HI Martin
      blocks can be created using css and html …and yes..it can be done in 2014 or 2016 theme
      though the fact is..what u want to show there…

      u can show blog posts, or any static text there…
      shortcode ulitmate is a good plugins..but i am not sure it provides shortcodes for blocks or not

      Om

      Like

      • martin says:

        hello dear OM many thanks for the quick reply – great to hear from you.

        well i just wanted to show such blocks as seen in see the following examples on the above mentioned site – https://www.kfw.de:

        they could function as little menu blocks – i am going th think over the ideas – and come back later again.. greetings martin

        Like

      • Ok great….and yes… menu links can be shown in such block

        Om

        Like

  90. martin says:

    hello dear OM many thanks for all your g reat work and for this site:

    question – are we able to add a background image to the 2016 theme!?
    Eg like it is done here http://www.sueddeutsche.de/
    [note – this one is divided into two pieces – wich is also very nice – and probably a good idea ]

    generally spoken: is it possible to add a image to the 2016er theme?

    love to hear from you – regards martin

    Like

  91. martin says:

    Hi OM man thanks for the quick reply.

    let us take the site http://www.ex-libri.org/
    i want to add background in the behind black section?

    – if we compare this with your site here – then we can talk about adding a background in the “black area ” of the page – on the left and on the right of the center-area.

    is this possible!?

    look forward to hear from you – martin

    Like

  92. martin says:

    hello dear Om,

    many thanks for the quick answer!
    – since ex-libri.org all is about books and literature i want to add some “bookish” images i have asked for the permission to add some of the follwoing images,….

    1. very interesting… – a bookshop

    2. also interesting

    3. also interesting

    4.also interesting

    note: i have asked the photographers – and i am allowed to use the image.

    note; see the image on the http://www.sueddeutsche.de/
    it is a ” divided ” image too – there is a part of the image on the left – and one on the right.

    the integration of the image – in a so called divided mode would be interesting with
    number 1 (very interesting since we have bookshelfes on both sites of the center of the image.

    and with the other images i could do it the same way….

    Finally: and perhaps – if all works well i can change the image in the background … from time to time. do you think this is possible!? is this doable.?

    questions;
    1. on which way – with which method i would be able to add a background image?
    2. where to store the image – so that i am able to change & switch easily…!?

    love to hear from you!
    regards martin

    Like

    • HI Martin
      please try the following codes to check first

      body {
      margin: 0 auto;
      background-image: url(“Your Image URL here”) !important;
      background-size: 100% !important;
      background-attachment: fixed;
      }

      .site {
      background-color: #fff;
      max-width: 91%;
      position: relative;
      margin-left: auto !important;
      margin-right: auto !important;
      }

      please let me know what u think

      Om

      Like

  93. martin says:

    hello dear OM many many thanks – great!!!! It allready looks great.

    this is the code i have now…

    /* Enter Your Custom css */

    #primary {
    width: 36%;
    }

    aside#secondary {
    width: 25% !important;
    margin-left: 79% !important;
    }
    .content-area {
    width: 60% !important;
    }

    body {
    margin: 0 auto;
    background-image: url(“Your Image URL here”) !important;
    background-size: 100% !important;
    background-attachment: fixed;
    }

    .site {
    background-color: #fff;
    max-width: 91%;
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
    }

    with the max-width: 91 % i can play – so that the width of the center gets wider or smaller… :

    first Question: what about the border at the bottom. At the moment i have the center area in a so called __frame__ consisting out of the image Can i limit this _behaviour_ of framing so that finally the frame is visible on the

    left
    right
    top of the center area.

    see the page: http://www.ex-libri.org

    second question:
    see here the application of the advertising: http://www.zeit.de/index
    are we able to limit the height of the included /inserted image to a certain height – like it is done in the page http://www.zeit.de

    dear OM i love to hear from you

    regards martin

    Like

    • HI Martin
      Regarding the footer black border..please check this

      .site {
      margin-bottom: 0px !important;
      }
      body:not(.custom-background-image)::after {
      display: none !important;
      }

      Regarding Advertisement issue:
      sorry didnt understand the issue…
      would u mind to clarify

      Om

      Like

  94. martin says:

    hello dear OM

    – first of all many many thanks for the great hints – and the overwhelming results that we allready achieved.
    on a sidenote: at the moment i am a bit unsecure bout the credits / the permissions – and the consent that comes with the different images.

    i want to make sure again that i have the right to use the images –
    With one there is a bit uncertainty: i am not sure 100% .

    So – can you plz remove the links above in the thread – (perhaps we can add one of the following album – they are all created by me: https://www.flickr.com/photos/38172986@N05/albums/72157650342326288

    eg this one …https://www.flickr.com/photos/38172986@N05/16495593852/in/album-72157650342326288/

    we can use this as a example )

    many many thanks for this action –

    i look forward to hear from you

    best regards martin

    Like

  95. martin says:

    hello dear OM – many thanks – well this is by far more than only a proof of concept. It looks awesome with the first image (above). I tested it locally. Now this is a great achievement. I will do further steps into this direction.

    Dear’ OM – i am glad for all your help. If you just remove the four images (the urls’) that are visible above, i am more than glad. This is only a security thing untill i have cleared up some legal things.

    I am very glad so far. In the next few day i will do further steps.

    i will come back here in the next few days…

    regards martin

    Like

  96. Andrew says:

    Thanks very much. There are lots of posts on modding 2016, but I found this the most helpful.

    Like

  97. martin says:

    And i can second that statement: this is truely the place to be if one looks for helpful place for modding 2016. One Question regarding the code i run on the page http://www.ex-libri.org

    note: i am currently do some experiments – and the whole site is truely beta:

    At the moment i try to arrange the site – and the conditions in the article-postings:
    wonder if we can have some kind of nice and good looking center-column: at the moment it looks a bit funny – and i cannot post any three columns posting on the page: the text look to awful. Note _ i use for the three column texts the plugin called shortcode ultimate – that for example runs quite nice on the page http://www.literaturen.org (but there with a modded theme of the old version 2014 – on the long run i will replace it on literaturen.org with a 2016 .) to come back to the page http://www.ex-libri.org – and the experience there: to the overall – look and feel of the page: 1. i love the theme – and i love to run some background images as you have shown me. What is wanted and needed now – is the option to have some minor corrections in the text (font – and character – size).

    Are there some options – where can i “customize” or adjust this!? – so that i am able to show a two- or three column text …

    see here the code that is currently running

    /* Enter Your Custom css */

    #primary {
    width: 36%;
    }

    aside#secondary {
    width: 25% !important;
    margin-left: 79% !important;
    }
    .content-area {
    width: 60% !important;
    }

    body {
    margin: 0 auto;
    background-image: url(https://c2.staticflickr.com/8/7459/16470600906_9abb076c69_b_d.jpg) !important;
    background-size: 100% !important;
    background-attachment: fixed;
    }

    .site {
    background-color: #fff;
    max-width: 75%;
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
    }

    der OM I Hope that i was able to spell out what i struggle with. – i love to hear from you

    regards
    martin
    ps – keep üp the great site – it rocks and is one of the best places for modding 2016

    Like

  98. martin says:

    hello dear OM – thanks for the reply – Yes that is what i want to achieve. Look forward to hear from you. Greetings, Martin

    Like

    • Martin
      please try these code first…

      let me know what you think
      *** i have made the column width 30%

      aside#secondary {

      display: none !important;
      }

      .content-area {
      width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      }
      .entry-content {
      width: 100% !important;
      }
      .su-row .su-column {
      width: 30% !important;
      }

      Om

      Like

  99. martin says:

    hello dear OM – many thanks for the quick reply – looks good -but i would love to have (at least one) side column – (see the page http://www.literaturen.org ) so if we are able to have – a side-column eg on the right it would be great. love to hear from you . – martin

    Like

    • Martin
      not sure it will look good or not…but try these then

      footer.entry-footer {
      display: none !important;
      }
      .entry-content {
      width: 100% !important;
      }
      .content-area {
      width: 77% !important;
      }
      .su-row .su-column {
      margin: 0 0 0 3% !important;
      width: 30% !important;
      }

      let me know what you think

      Om

      Like

  100. martin says:

    hello dear OM – many thanks this looks very nice. With this i am happy.
    With this i have a great site design.

    Note: we could have the ” place ” a second colum.

    a. lower the size of the characers -or
    b. enlarge the width of the visible site a bit.

    then we could have something like the formal __three-column-design__ that currently runs on the page http://www.literaturen.org

    in other words. if we lower the size of the characters in the whole site a little bit, or if we strech enlarge the width of the visible site a bit – then we can add a second colum on the left side.

    can you give a suggestion for this so called __three_colum_design__ ? too.

    that would be fantastic.

    many thanks in advance

    martin

    Like

  101. martin says:

    hello dear OM –

    i have done some resarch… and probably we are not able to run a 3 column design on the theme.

    Note: if we accordingly to the official theme site
    https://wordpress.org/themes/twentysixteen/
    only can run two columns – this is okay for me …

    i really love what we have achieved untill now – the theme looks very good now.

    dear OM – keep up this superb project-site – it is a great place for all things managing the theme 2016

    best regards
    martin

    Like

    • Martin
      i deleted your previous comments…as u shared login details there
      please don’t do this type of mistake…as my comments here (in my site) is open to all..so anyone can see it…

      i prefer u communicate me in my fiverr profile please
      Om

      Like

  102. martin says:

    hello dear OM – as of now it looks fantastic. If i have further plans i come back again. Plz keep up this great site – it rocks. Regards martin

    Like

  103. debbyq says:

    hi … love your article .. great help and information .. is there anyway to make the drop down menu a different color?

    Like

  104. vakhromova says:

    Hi, please help me make a featured image smaller on posts, so it doesn’t take all the screen above the fold. Example: http://flashcard.online/flashcard-games-with-kids/

    Like

    • Hi
      you can check this code

      .post-thumbnail {
      display: block;
      float: none !important;
      width: 50% !important;
      clear: both;
      margin-left: auto !important;
      margin-right: auto !important;
      }

      let me know if it helps you?

      Om

      Like

  105. martin says:

    hello dear OM

    first of all many thanks for the hints and tipps untill now.

    one question regarding the background-image – processing on the Beta-Beta side http://www.ex-libri.org

    if we look at the page http://www.zeit.de (a German Newspaper) in these days we see another kind of background image-design.

    see also – the screenshot (if it gets lost / changed in the next few days) see the screenshot:

    see the little image which shows a car – this images are on both sides

    -on the left and on the right

    so the background is somwerhat divided – in to two parts… one little (image) on the left and one on the right! how to achieve this? How to achieve this behavior – if we – for an example do an import of an image that resides on flickr at the moment – as we did in the last time…

    love to hear from you.

    regards martin

    Like

  106. martin says:

    Dear OM

    many thanks – will have a closer look at those options.

    keep up the great site – it rocks!

    greetings
    martin

    Like

  107. martin says:

    hello dear OM –

    on the page http://www.it-books.com i have installed a amazon-web-services plugin called scrapeazon – see the page – it is in BETA-BETA-Mode

    i want to have a change of the size with mouse-over

    see here https://c1.staticflickr.com/3/2890/34073514831_0bdd38fcc4_b_d.jpg

    note: i have allready achived this behavior on a site –
    see the page http://.www.literaturen.org

    now i want to have the same on the page http://www.it-books.com

    i tried to achieve this with the folllwing code – but i had no luck

    see the code

    .su-column-inner #scrapeazon-iframe:hover {
    height: 400px;
    position: absolute;
    width: 800px;
    background: #fff;
    z-index: 9999;
    padding: 25px;
    border: 1px solid #cdcdcd !important;
    }

    .su-column-inner #scrapeazon-iframe {
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    transition: .2s ease-out;
    }
    .su-column-inner #advanced_iframe:hover {
    height: 200px;
    position: absolute;
    width: 500px;
    background: #fff;
    z-index: 9999;
    padding: 25px;
    border: 1px solid #cdcdcd !important;
    }
    .su-column-inner #advanced_iframe {
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    transition: .2s ease-out;
    }

    .list-view .site-content .hentry
    {
    border-top: none;
    padding-top: 8px;
    }

    Like

  108. martin says:

    Hi OM

    many thainks for the quick reply. Great to hear from you. What is wanted on the page http://www.it-books.com
    i want to have the same behavior as we can see on the page http://www.literaturen.org

    see in the top posting on the page http://www.literaturen.org – see the posting called “Neuerscheinungen” –

    note: there i have allready achived this behavior

    see here https://c1.staticflickr.com/3/2890/34073514831_0bdd38fcc4_b_d.jpg

    see the page http://.www.literaturen.org

    what is wanted: i want to have a change of the size with mouse-over

    is this doable!?

    love to hear from you

    regards martin

    Like

  109. martin says:

    hello dear OM – many thanks for the reply. you are 100% right.
    regards Martin

    Like

  110. gon2train says:

    hi again … i am trying to add columns to a page and having issues … i have tried shortcodes and they are not working … any ideas?

    Like

  111. martin says:

    Hello this code below is the shortcode that runs on http://www.literaturen.org – but not on http://www.it-books.com

    see the scrapeazon plugin shortcode within the s

    [su_row][su_column size=”1/3″] das Politische Buch:
    Wer beherrscht die Welt?: Die globalen Verwerfungen der amerikanischen Politik …Der scharfe Kritiker des amerikanischen weltweiten Machtgehabes bringt in diesem Buch die aktuelle Lage auf den Punkt. mehr lesen: http://www.literaturen.org/?p=363 .[amazon template=Amazon&asin=3550081545]
    [scrapeazon asin=”3550081545″ country=”DE”][/su_column]

    [su_column size=”2/3″]
    [su_tabs] [su_tab title=”Wirtschaft” anchor=”First”][amazon asin=3658046945,3658072415,3662533316,3658160411
    &template=slider][/su_tab]
    [su_tab title=”Philosophie” anchor=”Second”] [amazon asin=1484175283,345137529X,3476025705&template=slider][/su_tab]
    [su_tab title=”Studienliteratur” anchor=”Third”] [amazon asin=3642449182,3834819131,3662466120,3658119233&template=slider][/su_tab][/su_tabs][/su_column]
    [/su_row]

    hope this helps +

    greetings marttin

    Like

  112. martin says:

    hello dear OM many thansk for he reply – well i adopted the code from the site literaturen.org – but – if i get you right then i have to take care for the conditions – should i install &/ activate another plugin in the page: it-books.com ? A i frame plugin!? Love to hear from you.
    btw. it was some time ago that i set up the page literaturen.org – i need to remember the whole conditions under which the scrapeazon-plugin runs.
    Love to hear from you
    ;Martin

    Like

  113. Hi! I teach a college “Digital Media” course, and one of my students is using this theme. It’s defaulted to the full page without the sidebar, and she can’t seem to add the sidebar to the homepage! We’d like to see her “About” page there, which she’s populated with a photo and text, but it doesn’t show up anywhere. When she tries to add a widget under “Sidebar” in the Menu, it always comes up as a footer, without giving her the option to choose its placement. What would you suggest (other than choosing a different theme!)?

    Like

    • HI Kathleen
      to show “About” page in homepage…you need to login to your dashboard, then go to Settings>Reading and need to select “About” page as a Static page ( u will see the option there)

      and to show sidebar in that front page ( your About page) you need to go to Appearance > Widget and need to put widget in “Sidebar” widget section

      please let me know if you got the point 🙂

      Om

      Like

  114. On the blue dashboard, there’s no “Reading” option under “Settings” and no other way to find the “Front Page Display” option, that I can see. On my own blog, I can get to the older black dashboard, and I see “Reading” there, but my student has not been able to get to that black dashboard on her newer Twenty Sixteen theme blog!

    Thanks for your help!

    Like

    • HI Kathleen
      ask your student that…if she is an admin user or not
      i mean…the account ( login ) she is using..i think that is not admin… may be that wordpress.com site is opened by others? and the person who created or signup the site for ur students..didnt give her admin user?

      u got the issue? just ask ur student to check that she is admin user or not

      Om

      Like

  115. She is the administrator…I’ve sat with her and looked at the dashboard options with her…and when she puts wp-admin/ at the end of her URL, it still takes her to the blue dashboard, not the black one!

    Like

  116. She can make other changes in it, like adding photos, but even when she goes to “Sidebar” under Customize, it only allows her to add widgets in the footer!

    Like

  117. I think she gave up and changed themes! But thank you!

    Like

  118. martin says:

    dear OM – many many thanks for the hint, – i just have forgotten what were the conditions that allow me to run the __resized_iframe__ on the page: http://www.literaturen.org

    the thing is : i have the scrapeazon-iframe:hover

    this seems to work with the following Code:

    .su-column-inner #scrapeazon-iframe:hover {
    height: 400px;
    position: absolute;
    width: 800px;
    background: #fff;
    z-index: 9999;
    padding: 25px;
    border: 1px solid #cdcdcd !important;
    }

    and gives back this Effekt http://imgur.com/a/VpNuj
    when we go over this thing with the noouse then we get the Iframe.

    since we have a Shortcode Ultimate and collumns then we can limit this to the column.

    we reduce this to the classe: su-column-inner class.
    we limit all with the additional Code:

    .su-column-inner #scrapeazon-iframe {
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    transition: .2s ease-out;
    }

    well i think that we are very very close – but i cannot remember the last step…
    what is the missing link – between pages http://www.literaturen.org and the page http://www.it-books.com

    love to hear from you

    reagards
    martin

    Like

    • Martin
      sorry for the late
      please try this code

      #scrapeazon-iframe:hover {
      height: 400px;
      position: absolute;
      width: 800px;
      background: #fff;
      z-index: 9999;
      padding: 25px;
      border: 1px solid #cdcdcd !important;
      }
      hope that will help
      Om

      Like

  119. Michi says:

    Thank you for the great mods!
    I want to change this:

    Lorem

    I think its double Content, when I start static site with h1 to; any idea how to change the “enty title” in h4?

    Like

  120. Michi says:

    Thanks for the very quick reply Om; https://www.haecksler-garten.de/ is the page. The first Word in Black Color is “Häcksler” . It seems that it is h1 . So, for SEO i think it is better to make it in h4…

    Like

  121. martin says:

    hello OM – many many thanks – great work – now it works like a chame. I have Beta-tests on both – a straightforward article and (besides this) a posting with a ultimate-shortcoded – three-column posting.
    Many many thanks for your help. Your site is so helpful – you are very very supportive.

    have a great day 😉
    Martin

    Like

  122. rebsy says:

    Thank you for this post!! It has been the most helpful of anything I’ve found on twenty sixteen.
    Would you be able to explain how to move the nav menu below the header image and center the nav menu?
    Thanks again,
    Rebecca

    Like

  123. masonsblog66 says:

    Your post has been EXTREMELY helpful. I have spent days trying to change the font size on my widgets. Thank you so much!! I do have a small problem though. I tried using this code…
    .footertext {
    font-size: 19px !important;
    }

    to change my footer and it did not do anything. Do you think you can help? My website link is here: http://masonsmostunamazingblog.com
    Thank you!

    Like

  124. martin says:

    hello dear OM

    first of all – many many thanks for all your inspiring ideas & Tipps and your great support here on this page.

    i run the 2016 theme at the page http://www.it-books.com

    i want to lower the height in the title of an article – in other words; how to lower the height of the characters !?

    Love to hear from you

    regards martin

    /* Enter Your Custom css */

    .jcarousel {
    position: relative;
    overflow: hidden;
    }

    .slider_img {
    height:320px;
    width:120px;
    float:left;
    vertical-align: middle;
    padding-right:2px;
    }

    .slider_img img{
    display: block;
    height:115px;
    width: initial;
    //height: initial;
    // max-width:118px;
    // max-height:118px;
    left-margin:auto;
    right-margin:auto;
    }

    .su-column-inner.su-clearfix {
    font-size: 12px !important;
    }
    .entry-title {
    font-size: 2rem !important;
    }

    footer.entry-footer {
    display: none !important;
    }
    .entry-content {
    width: 100% !important;
    }
    .content-area {
    width: 72% !important;
    }
    .su-row .su-column {
    margin: 0 0 0 3% !important;
    width: 30% !important;
    }

    body {
    margin: 0 auto;
    background-image: url(https://c2.staticflickr.com/8/7459/16470600906_9abb076c69_b_d.jpg) !important;
    background-size: 100% !important;background-attachment: fixed;
    }

    .site {
    background-color: #fff;
    max-width: 75%;
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
    }

    #scrapeazon-iframe:hover {
    height: 300px;
    position: absolute;
    width: 700px;
    background: #fff;
    z-index: 9999;
    padding: 25px;
    border: 1px solid #cdcdcd !important;
    }

    love to hear from you
    regards martin

    Like

  125. martin says:

    hello dear OM – i will make a screenshot later the weekend.
    By loweing the heigth i mean that i want to lower the size of the characters of the articles

    – wordpress-books
    -phyton-Titel
    -Neuerscheinungen – Python & Rasperry PI

    and so on.

    see the page http://www.it-books.com

    but i will make a screenshot later the weekend.

    untill later

    greetigns martin

    Like

  126. martin says:

    hello dear OM – many thanks for the reply – that works great! Your page is so great- KEEP up the great project. It rocks!! Have a great day! greetings martin

    Like

  127. Turner says:

    Thank you for this awesome site, I would like to move our custom logo over to the right above the menu and to have the header slideshow go all the way to the edge
    here is the URL:
    http://nodawireless.net/
    THANK YOU!

    Like

  128. Sherry Webb says:

    I am so glad to have found your helpful page for this theme! I have applied several of the custom css found here. Thank you so much!
    One thing I can’t find anywhere is if it is possible to have the Header Image only on the Entry page of the site and not on all the other pages? I would like to have featured images for the rest of the pages and not show the Header Image. Is that possible using custom css?
    The site I am working on is not public yet.

    Like

  129. Good afternoon, I have already used your CSS to remove tags etc. from posts, but how about in a category? See http://rainbowfusionenterprises.com/topic/practice_tracks/ as an example. I want the content to be across most of the page except for the right sidebar of course.
    thanks,
    Douglas

    Like

  130. Hello Again, One other thing I want to do is to have the date of posting appear at the top of each post. Thanks, Douglas

    Like

  131. siva says:

    i dont have any knowledge on css how to use these codes ? i use wordpress as a plugin for my site hosted by go daddy, can you show me a clear path on where i should paste them to get the results ?

    Like

  132. Hi, OM,

    Thank you for you very interresting post, i’ve just read
    (and going to use some of your tricks).
    I search a solution to enlarge the sub menu of the main menu,
    so that every title of article (sub menu) remain in one line .

    greetings
    Serge

    PS Sorry for my bad english

    Like

    • Hi Serge
      i checked your menus… your submenu’s title are too long… do you think if i help to make ur submenu wider..that will look good?
      let me know please

      Om

      Liked by 1 person

      • Hi OM,

        the sub menu wider (the widest) is a good solution,
        (i can’t make the title shorter)

        is it possible with a modification of the CSS ?

        thank you for your help

        greetings
        serge

        Like

      • Hi Serge
        sorry for the late response
        i checked that issue you mentioned…. mainly that can be done..but it will be problematic

        initially try this code
        .main-navigation ul ul {
        width: 600px !important;
        right: -507px !important;

        }
        .main-navigation ul ul a {
        width: 100% !important;
        }

        let me know what you get

        OM

        Liked by 1 person

      • Hi Serge
        sorry for the late response
        i checked that issue you mentioned…. mainly that can be done..but it will be problematic

        initially try this code
        .main-navigation ul ul {
        width: 600px !important;
        right: -507px !important;

        }
        .main-navigation ul ul a {
        width: 100% !important;
        }

        let me know what you get

        OM

        Like

      • Hi Om,

        thank you for your answer,
        I copy and paste it on the css, (and put the old .main navigation ul ul on comment)
        but there is no change

        greetings
        serge

        Like

      • Serge
        i just checked and found changes worked
        seems your browser showing you cached site..
        would you mind to clear your browser cache and check again please?
        Om

        Liked by 1 person

  133. Hi OM,

    Yessss it works !
    on my PC , ipad and smartphone,

    thank you for this very smart solution (without plugin)
    i’m a beginner, but i am going to study an apply
    the suggestions of css on your post

    greetings
    serge

    Like

  134. Tycho de Feijter says:

    Thanks for all your great work! Is it possible to move box on the left side (showing author name, date, categories, tags) to another location? Above or under the post? I have tried your code to remove it from the left side, but then it is gone completely. My site: chinacarhistory.com. Thank you so much.

    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: