WordPress Theme Hacking: Twenty-Seventeen

Google Sites’ update put me in a bad situation. I’m pretty busy as is, but the new Sites doesn’t fit my needs as well as I would like. Not to mention that the old Sites was slow and unresponsive. So I find myself in the position of moving a Google Sites-based site to my WordPress server–or rather, remaking the site with new customizations.

I chose the default 2017 WordPress theme because it looks professional. I used the Quest them and other themes for other sites, but this theme seems customizable enough for my needs.

And yet, that brings a few problems.

Number 1: I need a sidebar.

Presto, there’s a plugin (here, thanks Joachim@DEV Institute) to restore the lost sidebar! However:

Is it possible to move sidebar to the left?

Not with this plugin, it simply adds the Blog Sidebar to all pages.

Onto problem 2!

Problem 2: The sidebar is on the right.

Presto! Someone has already fixed that (here, thanks Ragnar@DesignBombs!).

 @media screen and (min-width: 48em) {
 .has-sidebar #secondary {
 float: left;
 }
 .has-sidebar #primary {
 float: right;
 }
 .has-sidebar:not(.error404) #primary {
 float: right;
 }
 }

But then, the sidebar is really big!

Problem 3: The sidebar is really big!

Someone has already fixed that, too (here, thanks Om@AllAboutBasic)!

#primary {
width: 70% !important;
}

*** 3rd — decrease right sidebar width ***

.has-sidebar #secondary {
width: 26% !important;
}

Well, the content is still not wide enough.

Problem 4: The default “full-width” is not full-width enough.

Presto, there’s CSS to fix that (here, thanks Janr@VanillaWP !

.wrap {
    /* margin-left: auto; */
    /* margin-right: auto; */
    max-width: 100%;
    /* padding-left: 2em; */
    /* padding-right: 2em; */
}
 
@media screen and (min-width: 48em) {
    .wrap {
        max-width: 100%;
        /* padding-left: 3em; */
        /* padding-right: 3em; */
    }
}
 
.page.page-one-column:not(.twentyseventeen-front-page) #primary {
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    max-width: 100%;
}

@media screen and (min-width: 30em) {
    .page-one-column .panel-content .wrap
    {
        max-width: 100%;
    }
}

Solution (My Edits):

.site-info { display: none; }

.wrap {
/* margin-left: auto; */
/* margin-right: auto; */
max-width: 90%;
/* padding-left: 2em; */
/* padding-right: 2em; */
}

@media screen and (min-width: 48em) {
.wrap {
max-width: 90%;
/* padding-left: 3em; */
/* padding-right: 3em; */
}
}

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
/*margin-left: auto;*/
/*margin-right: auto;*/
max-width: 90%;
}

@media screen and (min-width: 30em) {
.page-one-column .panel-content .wrap
{
max-width: 90%;
}
}

@media screen and (min-width: 48em) {
.has-sidebar #secondary {
float: left;
width: 15% !important;
}
.has-sidebar #primary {
float: right;
width: 80% !important;
}
.has-sidebar:not(.error404) #primary {
float: right;
width: 80% !important;
}
}

#comments {
display: none !important;
}

Other fun stuff

See JimmyKnoll.

White space issues

See WP.org.

Remove “Powered by WordPress”

From WordPress.org

.site-info { display: none; }