[help] Redesign Twenty Sixteen to look like Twenty Ten

Hey there @grimza – great that you’re moving toward a responsive theme. Redesigning Twenty Sixteen to look like Twenty Ten isn’t really within the scope of support I can help you with here; but I can certainly point you in the right direction with some tweaks. For modifications beyond what I’m going to provide here, you might like to learn some CSS, and am happy to provide some resources if you’re interested! Another option would be using a block theme, which allows you to adjust the layout and design within the Site Editor, without needing as much CSS (or other code) as classic themes require.

to have “empty” borders on sides of the template

I’m not 100% sure what you mean here but I’m guessing you’re perhaps looking to add a background colour to the page, which would be visible on the the left and right sides of the main content on wider screens.

You can change the default background colour by going to Appearance > Customize > Colors.

Choose your desired colour via the colour-picker tool under “Background Color”:

Once that’s done, to have more of the colour be visible on the right and left of the main content area on wider screens you’ll need to add some custom CSS under Appearance > Customize > Additional CSS. You can try something like this, adjusting the values as you like:

/* Wider screens - increase right and left margin */
@media screen and (min-width: 44.375em) {
    .site {
        margin-left: 150px;
        margin-right: 150px;
    }
}

have black menu the size of Twenty Ten…

To add a black background colour to the menu bar and change the text to another colour so it remains visible, you could try something like this:

/* Menu background & text */
.site-header-menu {
  background-color: #000000;
  padding-left: 50px;
  padding-right: 50px;
}
.main-navigation a {
    color: #ffffff;
}

The navigation bar does not extend the full width of the content area; that would require a lot more extensive tweaks to the way the entire area is designed, but you can certainly play with some CSS on your own and see what you can do. ??

I’ll answer your last question in a separate comment.

• This reply was modified 1 year, 5 months ago by Kathryn Presner. Reason: added bit of CSS I forgot earlier

remove left size where “leave a comment”… it should be on bottom of post.

This one’s a much more complex change than the above. Twenty Sixteen has just a function called function twentysixteen_entry_meta() which mixes together the output of several different elements, including the post author, the date, taxonomies (categories & tags), and the comment prompt. You can see this in the template-tags.php file.

If you’re comfortable editing PHP and functions, you could always comment out these lines pertaining to the commenting functionality (in your child theme):

if ( ! is_singular() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
			echo '<span class="comments-link">';
			/* translators: %s: Post title. Only visible to screen readers. */
			comments_popup_link( sprintf( __( 'Leave a comment<span class="screen-reader-text"> on %s</span>', 'twentysixteen' ), get_the_title() ) );
			echo '</span>';
		}

…and then create a new function in your child theme with the comment functionality, perhaps placing it into the content.php file in your child theme. You may also need to add some HTML/CSS to style it as you see fit.

Hope this points you on the right direction!

Kathryn P., thank you very much! I’m following your recommendation right now ?? Will report the results!

Great, first 2 features works! THANK YOU VERY MUCH!

• This reply was modified 1 year, 4 months ago by grimza.
• This reply was modified 1 year, 4 months ago by grimza.

Last one seems to be tricky… what I did:

1. I copied inc/template-tags.php to child theme (also created there inc folder)
2. commented out code which you said

but this piece (left side of news on main page) is still there ??

I wonder is it possible to implement fast&dirty trick:

1. hide left element (comment) with

	footer {
		   display:none;
	}

2. then move main content to the left.. so it will fill empty space..

Yep, it worked indeed!

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

Thank you, Kathryn!

@zoonini I wonder how to add Add comment and tags under the post?

I again tried to change inc/template-tags.php in chield theme, but it doesn’t work ??

@grimza Could you please provide a link to your site. Since you’ve already made quite a few modifications, I’ll need to take a look directly, since my test site no longer matches yours.