WordPress Tricks

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

allaboutbasic

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


You can take my personal help in skype : om2000_cuet


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


twenty-sixteen-theme-new-look

Published by allaboutbasic

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

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

    Reply

      2. Thanks
        if you want to remove Category Links (cat links) and Tag links from homepage in twenty sixteen theme
        please use the following code

        .home .cat-links, .home .tags-links {
        display: none !important;
        }

        Om

        Like

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

    Reply

      1. hi Om,

        Just to be sure regarding your comment, so all the code that you present will not be useful if i do not use wordpress.com free hosting?

        I was thinking that I could place your code in the child theme’s styles.css. Would that not work?

        thanks, Thad

        Like

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

    Reply

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

    Reply

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

    Reply

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

    Reply

    2. Hi Michael

      1. TO remove Skip to Content use this code
      .skip-link.screen-reader-text {
      display: none;
      }

      2. To increase header title font size
      .site-title {
      font-size: 3rem !important;
      }

      3. To increase footer copy right text font size
      .footertext {
      font-size: 19px !important;
      }

      3. To remove post navigation, use this code

      .navigation.pagination {
      display: none;
      }

      Om

      Like

      Reply

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

    Reply

      1. Hi OM,

        I’m using wordpress.org on a seperate server (hostgator).

        I have another blog which I altered search results by changing the_excerpt to the_content but does not seem to work in 2016 or maybe I am looking in the wrong places???

        your help would be great!

        Shane

        Like

      6. HI Shane
        i checked the Search page of Twenty Sixteen (2016) theme and found there is file in twenty sixteen, named content-search.php
        if u open that file..u will see there is a function 

        <?php twentysixteen_excerpt();?>

        just replaced that with

        <?php the_content();?>

        Hope that will solve your issue

        Om

        Like

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

    Reply

      2. HI Nico
        as per your question
        1. the tags can be moved to single post at the bottom. For this the single post template need to be modified.
        if i tell u or give u the file…will u be able to replace it?

        2. To show a border between header and first article in homepage (same as category page)
        use this code
        .home #primary {
        border-top: 4px solid #1a1a1a;
        padding-top: 7px !important;
        }

        let me know if it is Ok
        OM

        Like

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

    Reply

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

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

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

    Reply

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

      Reply

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

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

    Reply

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

    Reply

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

    Reply

      1. Hi Om,
        No, we host the wordpress site on our own temporary server – I will pm you the site address, rather not have the address up on the general net just yet.
        Chris

        Like

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

    Reply

    1. HI
      Changes are showing in my end (border color showing #78CF9F)?
      if you are using any cache plugins..please clear your cache and check again…
      or
      you can check from other computer

      Om

      Like

      Reply

      3. one last question… is there a way to change the width of the WP theme? I haven’t been able to find a way!

        thanks!

        Like

      4. HI
        yes it can be done using css too
        you want to increase the width of your twenty sixteen theme?
        let me know
        also
        is this width change is applicabe for your posts, pages (whole site)?

        Like

      5. Yeap, I would like to change the width to 85% (full thing) as it is the same width I’m planning for the main site. I only have the blog with WP, the rest is own creation (not yet published, still under design)… the other thing will be to match my main site’s width to twenty sixteen width so it looks the same across the site… but I can’t find what the width is…

        thanks!

        Like

      8. Hi
        Ok to make your twenty sixteen theme to be 85% in width try this following code

        @media only screen and (min-width: 760px) and (max-width: 2000px) {
        .site {
        max-width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        }
        }

        Regards
        Om

        Like

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

    Reply

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

      Reply

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

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

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

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

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

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

    Reply

      2. Ah sorry, I didn’t explain properly, I want the types there, so ‘print’, ‘brand identity’,etc. but I don’t want the word “types:”

        Do you know how get rid of that word?

        Like

      4. Yes that worked, great thank you!

        Sorry for all the question but how to you change the spacing between the title and page types for each project?

        Also do you know how to add a third widget to the footer so they are sat next to each other rather than on top of one another?

        Like

      7. Got it..try this code
        .page-id-311 .portfolio-entry-title {
        margin-top: 6px !important;
        margin-bottom: 4px !important;
        }
        .page-id-311 .portfolio-entry-meta {
        margin-top: 0px !important;
        }
        Om

        Like

      1. Hi, nearly solved it. I managed to change the size of portfolio page title but not the weight, typeface, etc. I know how to do this on css but I still can’t find the right name to begin the code, if that makes sense?

        Like

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

    Reply

      1. Hello Om,

        wondered if you could help me with another problem. On my portfolio pages the text doesn’t seem to span the full width of the image and is starting half way along. I’ve linked an example below… I basically want the text to align above the image. Let me know if I haven’t explain clearly.

        http://www.rofarmer.co.uk/?portfolio=salt-fish-farm

        Hope you can help, thank you!

        Like

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

    Reply

      1. Yes, indeed! I had to look around, and had several failed attempts, but eventually I found the ones that worked, using the custom CSS style sheet and commenting them so that I know what to do the next time.

        I appreciate your replying!
        V.

        Like

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

    Reply

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

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

    Reply

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

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

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

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

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

    Reply

      4. HI
        actually it will need personal private help from me and it will need payment actually..

        for personal private help i have shared a link at the end of the post

        Om

        Like

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

    Reply

    1. HI Tim
      sorry for the late response….
      i checked your code and it should work. please try to paste at the bottom of style.css or try Custom CSS plugins (better solution) to achieve this

      Om

      Like

      Reply

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

    Reply

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

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

    Reply

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

    Reply

      1. hey, I tried it, but it doesn’t work, because my page is a long page, and that plugins just show one page it doesn’t show the page completely. and the backgroud color is black, i need while color.

        Like

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

    Reply

      2. HI
        as you are using wordpress.com so the entry content can be made wider upto 78% (which is 60% now)
        if u made more wider..the date and time will go to the bottom….

        *** you can’t do much modification in wordpress.com (except some css styling)

        Om

        Like

      3. oh, ok. thank you. can you share maybe a CSS styling code I might use to add those extra 18%? thanks in advance!

        Like

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

      Reply

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

    Reply

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

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

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

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

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

    Reply

      2. Susan
        1. as per ur first issue (reducing space of entry footer ..please try this
        .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;
        }
        please let me know if the code helps you
        Om

        Like

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

    Reply

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

      Reply

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

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

    Reply

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

    Reply

    1. Brian
      try this
      .page .entry-title {
      font-family: cursive !important;
      font-size: 3rem !important;
      color: darkred !important;
      }
      it is applicable for only page titles

      please let me know if it helps
      Om

      Like

      Reply

      3. Hi OM
        the page is http://audley.one-name.net/

        I would like to match the font, size and colour of the ‘Page Title’ namely ‘Welcome to the Audley one-name study’ so that it matches the font size and colour of the site title and site description.

        I would like the font, size and colour of ‘Page Title’ on every page to match the Site title and site description

        Regards
        Brian

        Like

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

    Reply

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

    Reply

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

    Reply

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

    Reply

      1. I still don’t have any url as I’m working on my PC (I’ll transfer to a host later on).
        Answering to your question, I’d like to have it as a template for using it on every page.

        Like

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

    Reply

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

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

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

    Reply

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

    Reply

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

    Like

    Reply

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

      Reply

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

    Reply

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

    Reply

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

    Reply

      1. Actually i did not set it to maintenance mode… it must be open to public. May be my wp security plugin is causing havoc.
        can you try accessing the website now please and help me? Thanks

        Like

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

    Reply

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

    Reply

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

      Reply

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

    Reply

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

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

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

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

    Reply

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

    Reply

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

    Reply

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

      Reply

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

    Reply

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

      Reply

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

    Reply

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

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

    Reply

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

    Reply

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

    Reply

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

      Reply

      2. Hi Natalia
        please try the following code

        .home main#main {
        margin-bottom: 0px !important;
        }
        .home footer#colophon {
        margin-bottom: 0px !important;
        padding-bottom: 1% !important;
        padding-top: 1% !important;
        }
        let me know if it helps

        Om

        Like

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

    Reply

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

    Reply

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

    Reply

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

      Reply

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

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

    Reply

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

    Reply

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

    Reply

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

      Reply

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

    Reply

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

      Reply

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

    Reply

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

    Reply

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

    Reply

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

      Reply

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

    Reply

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

      Reply

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

    Reply

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

    Reply

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

      Reply

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

    Reply

      2. i found code that works on this page …

        .entry-title {
        margin-bottom: -20px !important;
        }

        your page has been a life saver :>)

        Like

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

      Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

      1. thanks ..
        here is link
        http://debbyquigley.com/classes/
        i have code that is working but would like to have the section in a box .. or rather left side in long box .. right side in long box and maybe even a box around both .. and will need padding …
        here is code i found ..

        Left Item 1
        Left Item 2
        Left Item 3
        Left Item 4
        Left Item 5

        Right Item 1
        Right Item 2
        Right Item 3
        Right Item 4
        Right Item 5

        thanks for your help …

        Like

      3. would like a box around right side and one around left side … need a way to separate the 2 sides … padding inside lines so text isn’t on top of lines ..
        thanks so much :>)

        Like

      4. Thanks…sorry for the late response
        would u mind to try this code please

        div[style=”float: left; width: 50%;”] {
        width: 48% !important;
        }
        div[style=”float: left; width: 50%;”], div[style=”float: right; width: 50%;”] {
        border: 2px solid grey !important;
        }

        let me know if it helps

        Om

        Like

      8. hi again … can i hire you to tweak my 2 websites?

        debbyquigley.com
        askdebbyq.com

        here is stuff i would like checked ..
        Facebook, email, twitter icons menu and footer
         
        Footer with copy write
         
        new Font added
         
        Check custom CSS. to make sure all is correct …
         
        debbyquigley .com website only
        Center menu or to left
        Sidebar to right more
         
        if so how much …
        here is my email
        gon2train@comcast.net

        thanks again

        Like

      15. nope this code didn’t work

        div[style=”float: left; width: 50%;”] {
        width: 48% !important;
        }
        div[style=”float: left; width: 50%;”], div[style=”float: right; width: 50%;”] {
        border: 2px solid grey !important;
        }

        Like

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

    Reply

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

    Reply

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

    Reply

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

      Reply

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

    Reply

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

      Reply

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

    Reply

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

    Reply

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

      Reply

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

    Reply

      1. Yes, because otherwise i have two h1 headlines on every page. I think this is not good for Seo. So i want to change it into h4 or another format.

        Like

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

    Reply

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

    Reply

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

    Reply

      1. I guess the whole site’s footer. Where it says ‘Mason’s Most Unamazing Blog’. Does that help?

        Like

      3. That worked! Thank you so much! I really appreciate the help and responding back so quickly.

        Like

      5. Hi! You’ve helped me so much! I was wondering if you can help me again. I changed my sites theme. The only issue is that my sidebar has moved itself down the page. So, there is a gap between the sidebar and the menu bar on all the pages. Is there any way I can get rid of the gap?

        Like

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

    Reply

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

    Reply

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

    Reply

      2. Hi Turner
        actually the best way is to use child theme and modify the theme file to achieve what u want.
        can you contact me in my fiverr profile?
        Om

        Like

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

    Reply

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

    Reply

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

    Reply

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

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

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

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

    Reply

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

    Reply

      4. Hi OM, May I bother you with two more things? The image on the right is not inline on the right side, and it seem like the whole site is not centred. Any ideas of what can couse that, or even better; a solution? Thanks a lot!

        Like

      7. Hi,
        no..i didn’t forget you…problem is..i reply from my comments section and from there it is somehow tough for me to view the previous comments.
        that’s why it becomes easy for me if u share me your site url in ur comments

        and i think you are searching this code

        .header-image img {
        width: 100% !important;
        }

        div#site-header-menu {
        width: 100% !IMPORTANT;
        }

        let me know if it helps

        Om

        Like

  139. Using the information in your great website I have managed to reduce the amount of space above and below the ‘Website title’ and ‘tag line’ on my website http://www.audley.one-name.net
    Can you please tell me how I reduce the ‘white space’ below the ‘header image’ and the ‘page title’? I would like to try and get this large white space to be the same depth as the white space between the top of the ‘header image’ and the ‘menu bar’.
    Thanks in anticipation of your help
    Regards
    Brian

    Like

    Reply

      1. Hi Om,
        Many thanks that worked perfectly.
        Could you also please tell me how to change the ‘website title’ ; the ‘tag line’ (below the website title) and the page titles to:
        font = ‘book antiqua palatino’;
        size = 18px
        strength = bold
        and font colour #1e73be

        Regards
        Brian

        Like

      2. Hi Brian
        for site title

        you need to add this code

        p.site-title {
        font-family: book antiqua palatino;
        font-size: 23px;
        font-weight: bold !important;
        }
        *** please keep in mind…the font need to be installed properly in your site…otherwise the font will not be showing

        the tag line or site description

        .site-description {
        font-family: book antiqua palatino;
        font-size: 23px;
        font-weight: bold !important;
        }

        For page title

        .entry-title {
        font-family: book antiqua palatino;
        font-size: 23px !important;
        font-weight: bold !important;
        }

        Regards
        Om

        Like

      3. Hi Om,
        Many thanks for your suggestions to change the font-type, font size etc. It all worked to plan.

        One final thing. Is it possible to reduce the white space below the ‘page title’ and the start of the ‘page text’

        Regards
        Brian

        Like

  140. single-post #primary {
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
    }
    .single-post #secondary {
    display: none !important;
    }

    i want to increase the length of my single post, where i should insert the above code

    Like

    Reply

    1. Hi Kunal,
      if you are using wordpress.com then you need to buy premium plan,
      or
      if you are using your own domain and hosting, you can put the code in either Appearance > Customization > Additional Css in dashboard,
      or you can use Simple Custom Css plugins

      Om

      Like

      Reply

  141. Thank you for your guide, incredible.
    I have a question. In a mobile versione of my site I have two main menu in the homepage.
    How can I remove the second menu?
    thank you

    Like

    Reply

  143. hello and good day,

    just set up a page – that is running in BETA-State.
    added a page – it shows up in the theme 2016 – without any hassle and any problems.
    but; the wp theme 2017 does not show up pages automatically – what to do?

    love to hear from you

    Like

    Reply

  144. I tried to change the site title a {
    Color: #023f34 !important;
    }
    And it would not change, is there only a limited swath of color codes that will work with the twenty sixteen theme?

    Like

    Reply

  145. hello dear OM _ some postings are still in the queue – i guess…

    i only see the comment: Your comment is awaiting moderation.

    can you have a look at the queue

    Like

    Reply

  146. hello dear OM

    i have created a screenshot -visible here:

    View post on imgur.com

    //s.imgur.com/min/embed.js

    I hope that you are able to see it. – see also the page http://www.f-s-j.de

    The issues are the following

    a. as described above: i think that the padding between the content (in the center of the page) and the sideblock on the right side is tooo big.

    I have signed this padding with a capital A (see the screenshot

    b,. the padding between the right sideblock and the right border of the theme is too big
    I would like to narrow it down.

    The best thing would be to have options to customize the paddings and the widths of the different themeparts in percentage

    i.e.
    – to controll the widgth of the center area in %
    – to controll the widht of the right side-block in %
    – c. eg. to controll the width of the (probably existable ) left side block in %

    that would be the best.

    Love to hear from you

    greetings martin

    Like

    Reply

    2. Hi Martin
      to change the width of left side content area

      div#primary {
      width: 70% !important;
      }

      To change right side sidebar width

      #secondary {
      width: 20% !important;
      }

      or

      to change whole site width

      .wrap {
      max-width: 98% !important;
      }

      let me know if it helps

      Om

      Like

      Reply

  147. Dear OM – many many thanks for the reply and the hints. All is well – only one thing is missing.
    How to aligh the right side block to the right border of the site!? That would be great – if i would be able to do this.

    love to hear from you

    regards martin

    Like

    Reply

  148. Hi Om,

    I am building a site at http://stillwaterscare.com

    I would like to align the navigation bar to the left instead of the right.

    I tried this:
    .main-navigation a {
    text-align: left !important;
    font-size: 17px !important;
    }

    But that did not work. Do you have any ideas? Any help is greatly appreciated.

    Thanks,
    Peter

    Like

    Reply

      1. That did have an effect. I am thinking that centered would be best instead of left aligned, since I’ve made the whole site center aligned.

        It seems a bit skewed from center though, is there a way to tweak this to center?

        Like

      2. Actually, I was able to mess around with centering based on what you gave me above.

        This worked:
        #site-header-menu {
        margin-left: auto !important;
        margin-right: auto !important;
        width:85% !important;
        }

        .main-navigation a {
        font-size: 19px !important;
        }

        Thank you so much for you help. So fast and awesome!!!

        Liked by 1 person

  149. Hellos Sir, How can we remove change the colour of the border that is between the post and comment box
    Also how to change the colour of Text’Leave a Reply’ above the comment box.
    Thank you for your help.

    Like

    Reply

    1. Hi
      thanks
      sorry for the late reply

      to change the color of Leave a message try this code

      h3#reply-title {
      color: darkred !important;
      }

      to remove the dotted border just above the comments section

      .entry-footer .entry-meta {
      background: transparent !important;
      }

      let me know if it helps
      Om

      Like

      Reply

  150. Hello Om,

    Thanks for putting together such a great resource! I have learned a lot from this.

    My question is this… I have a personal test domain for testing out new ideas before implementing them on any ‘real’ domain, and I have not found a way to evenly ‘center’ the main menu items.

    I have centered the main menu to my liking, but the clickable menu items are always left aligned rather than centered. Any thoughts on how I can make this change?

    My test site is: http://www.ShamrockGrowers.com I am using a child theme based on twenty sixteen. Many thanks for your help and any ideas!

    Sincerely,
    –Buddy Tetreault

    Like

    Reply

  151. Dear Om

    First, let me say this page of yours is one of the most helpful so far on modifying my twentysixteen WordPress them. Thank you very much for your efforts!

    There are two things I would like to, which I assumed would be easy to do, but which I fail to achieve:

    – How to delete the space around the whole website? I don’t like this “border”. Actually, I don’t mind to the left and to the right, but I find the “gap” on top useless.
    – How to align the footer text (“Copyright … WordPress … etc.”) to the right instead of the left?

    Both things seem easy, yet I don’t succeed. Would you have some advice?

    All best from Berlin

    Stefan

    Like

    Reply

      1. Hi. Side widgets showing everypage.
        Classes.dogwooddogtraining.com.
        This is older site I am testing new plug in on. You might be getting redirected to my other site.

        Like

  154. Have referred to this page numerous times, very helpful! Question, working in WP.COM, twenty sixteen, what CSS would I use to extend the footer widget (bottom) across the entire bottom of the page? So it extends under sidebar widgets? Would this be a problem for various views (mobile…). Thx!

    Like

    Reply

  156. Hi Om,

    Thanks for all the valuable information you’ve provided here! I’ve made some changes to my website title, description and menu which is great!

    I see now that the site title which I enlarged and changed the colour of also now appears at the bottom footer area of my site also enlarged the same as the title. How do I change it back to small like it was – the same as the Privacy Policy in the footer?

    Your help is appreciated.

    Natalie

    Like

    Reply

    1. Hi Natalie
      to change only the top header site title use these codes instead

      header .site-title a {
      color: lightsteelblue !important;
      font-family: Segoe UI Black !important;
      }
      header .site-title {
      font-size: 60px !important;
      }

      let me know if it helps

      Om

      Like

      Reply

      1. Hi Om,

        It works like a charm, thank you:) I think you must be magic!

        Thank you also for your quick reply – I was surprised to get an answer so quickly, if at all! I am so happy that I found your site and that I could do these changes. It makes a big difference to the look and feel of my site:)

        Kind regards,
        Natalie

        Like

  159. Great tips! I tried the #6 removing categories and it took it off the pages but the category,tags,author sidebar is still on the category pages. How do I remove it?

    Like

    Reply

  160. Hello OM – very helpful info here, thanks! I’m using TwentySixteen theme on a Bluehost site, http://www.francesbalek.com. I would like the very bottom footer (the site name, Privacy page link, wordpress recognition) to extend across the full width of the page, including under the sidebar. Is this possible? I installed the Footer Putter plugin, but, as you can see, it is only under the main body of the page, not under the sidebar.

    Like

    Reply

  161. OM, you are so right. I tested it by changing the length of my Privacy Page Title to approx 39 words. You are the Master! Now all I have to do is figure out how to get the other content I want in that space. Thank you!!

    Like

    Reply

  162. Dear OM – it’s me again, http://frankiebalek.com, still struggling with my footer. You were correct, above, when you said that the footer will stretch across the whole page if I have enough content to drive it over. But I don’t. I have multiple short lines of text, which should be centered left-to-right in the middle the entire width of the page, and I want the heavy black border line to also stretch across the entire page width, so that there is lots of space both to the right and to the left of the footer text. Any hints you can give would be appreciated!

    Like

    Reply

  164. Hi, I am building a woocommerce site using Twenty Sixteen. I want to narrow the spacing between the sidebar widgets. I used the code you provided, shown below. The code narrowed the space but it also removed the horizontal bars that are above and below each widget Please provide coding that preserves the horizontal bars. Thank You!

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

    Like

    Reply

  166. I am trying to use an image to contain the logo, site title and description. The twenty sixteen theme appears to force an image logo size to 240 x 120 px it seems. Is there a way to get around this constraint ?

    Like

    Reply

      1. I am only prototyping at present and have no online presence. It is a while since I last used WP and am looking for a simple theme for a personal blog. The 2017 theme is too fancy for my taste and 2016 looked a better alternative. But with simplicity usually comes inflexibility. I can send screen shots if that would help, but the basic issue seems to me to be the constraints imposed on the image used for the site logo. The theme insists on cropping the image to something square. I have copied below the generated HTML code. I want something that is approximately 750 x 350 px. I am coming to the view that I need an alternative theme to the 2016 theme, which is good and simple but for me too restrictive in some aspects. Can you suggest an alternative ? Thanks for your help.

        Like

    1. HI Michael
      as you are working on localhost
      better you share me the image of logo you want to use..
      i will check to give you the modified theme so that you can use that logo without any issue
      Om

      Like

      Reply

      1. OK, no problem. How can I deliver the image file to you ? It does not seem possible from this location. I can not see any control that allows me to attach or upload the image file.

        Like

      1. It’s more about moving the page navigation – it would be great if the numbers 1,2,3 would appear at the very end of the post, which is, in this situation under the bolded text. Or above the share button.

        If that is something that cannot be done, than moving the related posts down (under the page numbers) would be great.

        Thanks in advance for trying 😀

        Like

      2. Hi Jasiek
        sorry for the late response…
        would you mind to communicate me in my fiverr profile? need to check dashboard.
        ( Just contact me… in communication section)
        Om

        Like

  169. Brilliant – I’ve used three of your example, and they worked straight away. Totally hassle-free, and css was new to me.

    Like

    Reply

  171. Your blog has been a great resource. It has helped me tremendously in developing our site. That said, how can I remove the black divider line at the top of the CATEGORY pages….the line that is between the header and the category image/title?

    Like

    Reply

    1. Hi Carol
      thanks and sorry for the late response
      here is the code to use

      .archive.category header.page-header {
      border-top: none !important;
      }

      please let me know if it helps
      Om

      Like

      Reply

    1. Hi Carol
      thanks and sorry for the late response
      here is the code to use

      .archive.category header.page-header {
      border-top: none !important;
      }

      please let me know if it helps
      Om

      Like

      Reply

      1. It worked perfectly. I used the same code (switched category to tag) to omit the border on my tag pages as well. Thank you, it’s very upstanding for you to respond as you do.

        Like

  173. I am close to finishiing formatting my site…just one last question. On my Category pages….is there anyway to minimize the space between the Category Title and the Banner Ad (to match the space between Banner Ad and content). I tried adding the following code:
    body.archive.category .page-header {
    margin: 0;
    }
    It worked….only the space between the Title and Banner was reduced to NO SPACE (I am forced to a choose between no space or the wide space that I don’t prefer). Is there a code to where I can control the spacing?

    Like

    Reply

    1. Hi Carol
      please try this

      .archive.category header.page-header {
      margin-bottom: 20px !important;
      padding-top: 0px !important;
      }
      .archive.category header#masthead {
      padding-bottom: 0px !important;
      }

      let me know if it helps
      Om

      Like

      Reply

  174. Dear Om.
    I request your assistance once more. How can I delete the black border at the bottom of my posts…the one that appears after the post content, but before the footer?
    Respectfully,
    Carol

    Like

    Reply

    1. Hi Carol
      thanks
      i think you are talking about the black border which is showing just above the “Leave a comment” ?
      am i right?
      if yes

      try this

      h3#reply-title {
      border: none !important;
      }

      Om

      Like

      Reply

  177. OM
    Is there anyway to have the social icon menu appear at the top of the pages as opposed to in the footer? My sidebar is rather lengthy, I don’t believe most will scroll to the bottom and notice the links.

    Like

    Reply

      1. I understand….and thank you!

        Instead, I’m going to use a widget plugin to add them to the sidebar. Is it possible to minimize the space between the widgets in my sidebar?

        Like

  178. I have a test page set up with, say, member names arrayed in two columns, see https://innervate.com/test-03/

    As most, not all, items on this page would eventually be linked, I would like to reduce (and maintain consistency in) the white-space between lines. [ Notice how the spacing changes in https://innervate.com/test-02/ ]

    The spacing AND the size of the blocks changes even more when a colored background is set for each block, see https://innervate.com/test-01/

    Is there a way to reduce the size of each background-colored block to one line? Currently, it appears that each takes up three lines.

    Thanks for any suggestions!

    Like

    Reply

    1. Hi Def
      sorry for the late reply

      please try this

      .has-background {

      padding-top: 5px !important;
      padding-bottom: 5px !important;
      margin-bottom: 5px !important;
      margin-top: 5px !important;

      }
      let me know if it helps

      Om

      Like

      Reply

  179. That does not quite accomplish the desired goal; however, it gives me a starting place for learning how to learn this.

    Thank you for the gift of your free time during the weekend!!

    Like

    Reply

  181. Hi, I am trying to add a widget to my footer and am having difficulty with the coding. Your help would be appreciated. Thanks

    Like

    Reply

      1. Hi, I appreciate you getting back to me. The site is a blog with the landing page is a Post. I am trying to add a widget sidebar to the footer in order to add the Legal links etc. I have noticed the widget footer only shows if the main page is static page. Thanks for your help. site is https://nichemindreader.com

        Like

  184. Initially, (many months ago) I had setup the basic SEARCH WIDGET to list my posts by region. The list was NOT produced in alphabetical order. I ended up adding a ‘sort’ plug-in that took care of the matter. Today, that plug-in had to be disabled…it was outdated and conflicting with other plug-ins. It was a hot-mess. So, I’m writing to ask….is there some code, or something I can do to make the results of my SEARCHES appear in alphabetical order?

    Like

    Reply

  185. I’ve been using the twenty-sixteen search widget to produce my posts in region order. Since it didn’t produce an alphabetical list, I installed a plug-in to do so. That plug-in became a major conflict and was disabled today. Is there some code, or something that I can upload, so that my search results are listed alphabetically?

    Like

    Reply

  186. hello dear OM – great site great concept – congrats for your great page and ideas. This page is help for all the people that stop by this great page.

    i love this page. #one question how to go on full width with the theme twenty seventeen – see the page http://www.job-starter.com – love to hear from you

    greetings martin

    Like

    Reply

  187. Hello! Has there been an update that prevents me from making a custom css? I have tried many way and in many pages to install your wonderful work and I cannot seem to get it to show. I am using 2016 with Elementor and Events Calendar. I have deleted cache and css/js minifield and cleared the browser cache to no avail.Please to help!

    Jack

    Like

    Reply

      1. Om,

        I thank you for your advice! I did deactivate cache plugins and no luck with the masthead. I did however try #2 and it worked just fine. I removed my logo from the title to see if it was a PNG issue and it was not. Not I have test but still a sizable masthead. Any suggestions?

        Jack

        Like

  188. Hello!
    Is it possible to add a boxed container around the whole site? Going for the look of the twenty twelve theme *but* with the responsiveness and menus of twenty sixteen. Thx in advance!
    Derek

    Like

    Reply

  189. Hi there. I am really enjoying your page and found it very useful indeed. I have managed to utilize majority of the suggestions you made 🙂 even with my level of un-tech knowledge. However, I am still trying to 1) change the location of author and date posted to just under the blog title (not the page title); 2) change the tag fonts (and author and date fonts) to something smaller. Please can you share some of your magic? thanks a lot!

    Like

    Reply

      1. Thanks so much! I have no idea! I have think, need to change css, but was need to add. Thanks again. I wish you health!

        Like

  191. Thank you for your post ! It’s really helpful.

    My question is
    1.How can I change the color or font of the page button 1 2 3… on the bottom of each post ?
    2.Is it possible to change the BIg arrow button (to go the previous/next page) on the bottom ?
    (1,2 if yes how)
    3.Is it possible to put FIXED banners under the menu or on the bottom of page with this theme ? or Do I have to have my proper theme to make it ?

    Thank you !

    Like

    Reply

  192. Some really great information and tweaks here, you obviously know your stuff.
    One thing that I would like to do if possible is to move the author’s name, date and category so that it sits above the post and not to the left. If I post an image first it is pinched but then any subsequent picture goes full width with the text still following the same narrow width. It looks really odd to me. Presumably, a fix if possible would then allow the text to go full width as well?

    http://www.wansbroughs-cruise-blog.me.uk/

    Like

    Reply

  193. thanks for your detailed guideline for customisation of twenty sixteen theme.

    I am using twenty sixteen theme and on mobile screen there is a space on right side.. which actually hide my buttons. I checked it default theme also have this margin on right side. can you tell me how I can remove this margin. website is easypizzaovens.com

    Like

    Reply

  194. From reading this useful article it seems to me that the author, date, tag and category information for posts is displayed in “.single-post .entry-footer {“.

    My biggest problem with the twentysixteen theme is the layout of this footer appears to the left of posts. It would look much better on the right hand side as part of a sidebar with other information underneath such as most popular posts. I’ve searched quite a bit on this and my intuition is that it can only be done with a custom post template, right?

    Like

    Reply

      1. Correct. I’d like author info displayed in a sidebar tailored for posts, with additional widgets underneath such as a categories, recent posts etc. You can see from my site (link is in my name above) that I have different sidebars for the homepage and Reflections page. These were built with the SiteOrigin page builder plugin.

        I am not using the twenty sixteen sidebar because use of that seems to affect the site globally. Perhaps I need to redo my site layout, use the twenty sixteen sidebar and suppress certain widgets using css if I want it displayed differently for different scenarios.

        Like

  196. Hi Om,

    a few days ago i was forced to give up the theme wpex blogger and i came to twentysixteen which seemed still the best to me. Now i deal with a few layout problems. Here is one:

    There are two widgets (categories and archive) which use selectboxes. i reached to change the options to the correct font-family Helvetica, but on the front page “Kategorie auswählen” and “Monat auswählen” are still in Times. What can i do to change them to Helvetica too?

    The site is: http://www.182tage.net

    Thanks a lot for answering,
    Thomas

    Like

    Reply

    1. Hi Thomas
      have you tried this?

      select {
      font-family: Montserrat, “Helvetica Neue”, sans-serif !important;
      }
      also, please check by clearing your site cache ( either if you are using any cache plugins or check if any hosting working in your host or not)

      Regards
      Om

      Like

      Reply

  197. Hi Om,

    thank you for advising me!
    Yes, that was exactly what i tried. I also tried

    .postform option {
    font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif !important;
    }

    Because the categories select has the class postform.

    Both without results.
    I copied this in my style.css which is part of my child-theme.
    i am always deleting caches. no cache-plugin is running. it is a real problem, sorry.

    Maybe the widgets take there css-commands independently elsewhere – f.e. blocks.css?

    Like

    Reply

    1. Hi Thomas
      would you mind to try

      .postform {
      font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif !important;
      }

      instead of

      .postform option {
      font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif !important;
      }

      please let me know

      Like

      Reply

      1. I am sorry. All text at the site is formatted sucessfully with Helvetica what i choosed in the WordPress Backend. I do not know so much about implementing Google-Fonts, i guess this does WordPress for me. Only those mentioned two Widgets refuse to accept any css obviously. This is not limited to Helvetica, it is absolutely indifferent which font-family. No formatting has any consequences in those two cases. So i do not believe there is a problem with font implementation.

        Like

      2. I would like to inform you that today i found a solution which is working. I simply added the code

        select {
        font-family: Montserrat, “Helvetica Neue”, sans-serif !important;
        }

        under Additional css in the Customizer, Design. That helped.
        Remember: All changes in the style.css where ineffective.

        Like

Leave a comment