Use CSS Override to Modify WordPress 2016 Theme

August 28th, 2020 update
Modifications:

1. Move search bar to top right

Edit header.php: Dashboard > Appearance > Theme Editor > click on ‘Theme Header’ (header.php)
insert this:
<?php get_search_form(); ?>
before this:
<?php if ( has_nav_menu( 'social' ) ) : ?>

2. Remove sidebar

Dashboard > Appearance > Widgets > select each item associated with Sidebar > Delete

3. Display randomized posts at front page

a. Install plugin ‘Display Posts’
b. Create a new page without a title with this content: `[`display-posts orderby="rand" wrapper="ol" posts_per_page="-1"`]`
c. Settings > Reading > change ‘Your homepage displays’ to ‘A static page’ > set ‘Homepage’ to the newly created page

4. Add customized CSS

/* Reduce gap on header */
#masthead {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

/* Create horizontal border at header */
.site-header {
	border-bottom: 1px solid !important;
	margin-bottom: 12px !important;
}

/* Remove footer notes */
.site-info {
	visibility: hidden !important;
}

/* remove Home footer on home page */
.home .entry-footer{
	display:none !important
}

/* spacing for footer display of entries */
.entry-footer{
	margin-top: 30px !important
}

.syntaxhighlighter .toolbar {
    /*color: white !important;
    background: #6ce26c !important;
    border: none !important;*/
    display: none;
}


/* Remove underlined links */
a:link {
	box-shadow: none;
}

/* Increase Title font size */
.site-title {
	font-size: 3rem !important;
}

/* Change font size of entry title */
.entry-title {
	font-size: 2rem !important;
	color: darkblue !important;
}

/* custom CSS for Twenty Sixteen to make post full width and to move postmeta to below post*/
@media screen and (min-width: 44.373em) {
	body.single.no-sidebar article:not(.type-page) .entry-footer 
	{
		float: none;
		margin: 1.5em 0 0;
		width: 100%;
	}	
	body.single.no-sidebar article:not(.type-page) .entry-header,
	body.single.no-sidebar .comments-area,
	body.single.no-sidebar .post-navigation
	{
		float: none;
		margin: 0 0 5%;
		width: 100%;
	}
	.single.no-sidebar.single .byline, .single.no-sidebar .full-size-link, 
	body.single.no-sidebar.group-blog .byline,
	body.single.no-sidebar .entry-format, 
	body.single.no-sidebar .cat-links,
	body.single.no-sidebar .tags-links, 
	body.single.no-sidebar article:not(.sticky) .posted-on,
	body.single.no-sidebar article:not(.type-page) .comments-link,
	body.single.no-sidebar article:not(.type-page) .entry-footer .edit-link
	{
   		display: inline; 
	}
  	body.single.no-sidebar article:not(.type-page) .entry-footer > span:not(:last-child):after 
	{
		display: inline;
	}
	body.single.no-sidebar article:not(.type-page) .entry-content 
	{
		float: none;
		width: 100%; 
		margin: 0 0 5%;
	}
	body.single.no-sidebar article:not(.type-page) .entry-footer .avatar 
	{
		display: inline;
		margin: auto 0.3em 1em auto;
		width: 27px;
	}
}

Outdated CSS

/* Table column class to fit width */
td.fitwidth {
width: 1px;
white-space: nowrap;
}

/* Reduce gap on header */
#masthead {
padding-top: 4px !important;
padding-bottom: 4px !important;
}

/* Close the gap between posts */
.home article {
margin-top: 10px !important;
margin-bottom: 20px !important;
border-bottom: 1px solid grey;
}

/* Create horizontal border at header */
.site-header {
border-bottom: 1px solid !important;
margin-bottom: 16px !important;
}

/* Fix sidebar widget */
.widget {
border-top: 1px solid grey !important;
margin-bottom: 12px !important;
padding-top: 12px !important;
}

/* Bold Nav Bar */
.main-navigation a {
color: blue !important;
font-size: 20px !important;
font-weight: bold;
}

/* Set content width
.content-area {
width: 77% !important;
}
*/

/* Set sidebar width
.sidebar {
margin-left: 80% !important;
width: 22% !important;
}
*/

/* Remove footer notes */
.site-info {
visibility: hidden !important;
}

/* Remove underlined links */
a:link {
box-shadow: none;
}

/* Increase Title font size */
.site-title {
font-size: 2.65rem !important;
}

/* Center the Site Title
.site-branding {
float: none;
margin-left: auto !important;
margin-right: auto;
}
*/

/* Change font size of entry title */
.entry-title {
font-size: 2rem !important;
color: darkblue !important;
}

/* Fix blog entry content display with auto slider */
@media only screen and (min-width: 980px) and (max-width: 20000px) {
.blog .entry-content,.single-post .entry-content {
float: none !important;
width: auto !important;
max-width: 100% !important;
}}

/* remove Home footer on home page */
.home .entry-footer{
display:none !important
}

/* spacing for footer display of entries */
.entry-footer{
margin-top: 30px !important
}

Leave a Reply

Your email address will not be published. Required fields are marked *