Twenty-Sixteen theme – can I trim the wasted space?

  • Hi All,
    I’m really liking the twenty sixteen theme, lots f good stuff in there.

    But there are a couple of things I would like to tweak, and I’d appreciate advice on how I might do this, if possible. This applies mainly to my desktop view of the WP site.

    1. Gap at the top. I have about an inch of clear black space above the text title, (which is above the banner graphic). I’d like to reduce this to about half the size, so that less screen space is wasted.

    2. I have a background image, (a simple star field so it’s not distracting). But there’s a rather wide plain black background either side of the actual content, so that I only see a few pixels of the background image either side of the wide plain border.

    I’d like to reduce the wide plain border and get a bit more of my background image, is this possible please?

    In case it helps, here’s my site:
    https://www.nick-stevens.com/

    All clues gratefully received!
    Thanks,
    Nick

Viewing 3 replies - 1 through 3 (of 3 total)

  • I am not an expert but I try to give you an answer.

    Go in the style.css file and search the .site class css section.

    You should have something like 

    .site {
	background-color: #fff;
}

    May be you have some other values instead of “#fff”

    Ok once you’re there you add new rows to have at the end something like :

    .site {
	background-color: #fff;
	background-image: url('https://nick-stevens.com/wp-content/uploads/2015/12/starback0116.jpg');
	background-repeat: repeat;
	background-position: top left;
	background-attachment: scroll;
}

    Hope this will be good for you.

    Go to https://nick-stevens.com/wp-content/themes/twentysixteen/index.php file and find .site and add

    .site {
	background-image: url('https://nick-stevens.com/wp-content/uploads/2015/12/starback0116.jpg');
	background-repeat: repeat;
	background-position: top left;
	background-attachment: scroll;
}
.site-header{padding-top:0px}

    Thread Starter nick.peckham

    (@nickpeckham)

    Thanks, I just had a go at that.

    It’s not doing quite what I expected though – the plain background has now vanished entirely, so there are also stars behind the text, which makes it a bit harder to read. I was hoping to reduce the width rather than remove it.

    I’m not sure if I did it right, here’s what I added.

    Part 1:
    [ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ] 

    /**
 * 11.0 - Content
 */

.site {
	background-color: #fff;

/* Extra lines added below by Nick */
        background-image: url('https://nick-stevens.com/wp-content/uploads/2015/12/starback0116.jpg');
	background-repeat: repeat;
	background-position: top left;
	background-attachment: scroll;
/* End extra lines */

}

    And part 2:

    /**
 * 11.1 - Header
 */

.site-header {
	padding: 2.625em 7.6923%;
/* Next line added by Nick */
        padding-top:0px
}

    And there still seems to be the large gap above the header.

    Thanks,
    Nick

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Twenty-Sixteen theme – can I trim the wasted space?’ is closed to new replies.