paulwpxp

There are 4 widgets that Sugar and Spice theme provides
https://themes.trac.wordpress.org/browser/sugar-and-spice/1.3.2/inc/widgets

All of them are just UI for simple HTML input, meaning we can avoid using that and put in the HTML in WP’s standard Text Widget. Just view source (on your Sugar and Spice with that widgets and copy the source code to put in Text Widget in Sela theme’s sidebar).

There are also other archive widget availabe as a plugin (check on plugin page). There is another way to do this archive widget by using WP’s menu setting, set up the menu links to archive page as we want and the use WP’s standard Custom Menu Widget targeting that menu that we just set.

For the social widget, they are just normal text links with icon styling, this we can put in Custom CSS and make use of icon font (that Sela theme has already).

Hi, The HTML markups need to be simpler, now there are two div with id #mainContent and there are also a few other things too. So we need to fix the markup first.

but anyway this code will do what you what with current markup.

body { background: gray; }

#mainContent {
	background: white;
	margin: 0 auto;
	max-width: 900px;
}

I would just use TwentySixteen theme as a base theme, either make a new theme out of it or use it as parent and create a child theme. It’s way easier to get the site look like the original one.

Use this code in Custom CSS plugin, just change the color code to your own.

body { border-top-color: #ff0000; }

Custom CSS plugin
https://wordpress.org/plugins/search.php?q=custom+css

Hex color code chart
http://www.color-hex.com/

This code will do just that, just change the “Hello” to your own text

.home.page .hero-container-inner .entry-title::before {
	content: "Hello";
	display: block;
}
.home.page .hero-container-inner .entry-title {
	height: 41px;
	overflow: hidden;
}

It will do that only for front page title. The code is tested on this demo site https://selademo.wordpress.com/

Make sure to use the code in Custom CSS plugin.

I’m afraid there might be some misunderstanding here.

Comparing TwentyTwelve from old version (I picked v 1.4) to the latest (v1.9) returned nothing regarding font size change.

https://themes.trac.wordpress.org/changeset?old_path=/twentytwelve/1.4&new_path=/twentytwelve/1.9#file36

The problem OP referring to could be a change in browser’s default, you know new version of browser can have this kind of changes.

We can achieve that by either creating custom loops (WP_Query) in front page template, or use a plugin like “Display Posts Shortcode”.

Depending on the theme, for example this TwentySixteen demo site here https://twentysixteendemo.wordpress.com/ , this Custom CSS code will hide the tag archive link named “beautiful”

.tags-links a[rel="tag"][href*="tag/beautiful"] {
	 display: none;
}

or just this would work too

.tags-links a[href*="tag/beautiful"] {
	 display: none;
}

and this will display:none the tag listing page (archive)

.archive.tag-beautiful .site-main {
	 display: none;
}

These are examples to hide visually the tag name “beautiful”, hiding it visually is done via CSS but the source code will still output normally, just so you know that if someone views source it’s still there to see.

This is this (gray color as it appears) coming out from theme’s inline style

a:focus, select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="submit"]:focus, input[type="checkbox"]:focus {
  outline: 5px auto #beb9a9;
  outline-offset: -1px;
}

Also this (red color as default) from the theme’s style

a:focus {
  outline: 5px auto #ff2a13;
  outline-offset: -1px;
}

So just go to theme option where it originates the inline style and disable it.

This code will disable it but I wouldn’t recommend using it because we should get rid of it from the source rather than override it, but anyway

a:focus { outline: none !important; }