Before the Twenty Seventeen theme was launched, I started looking for news about the theme so that I could create support for Template, CSS, HTML and any other code customisation.
That was because I tend to first consider using and customising default WordPress themes to help clients quickly create their first websites to help reduce website start-up costs.
Since finding and installing the both development and release versions of the Twenty Seventeen theme, I have created some customisation tutorials to help you with your website theme requirements.
Twenty Seventeen theme customisation tutorials.
The following are examples of theme customisation support posts. You can request your customisation below.
Live demo of Twenty Seventeen.
I couldn’t find one so I created one. Click here or on the snapshot below.
Request your customisation for Twenty Seventeen.
Use the Comments section below to describe how you would like to customise the theme for your needs.
Note: Some requests may require a lot of work and if I can do them, I will look at them when I have time. If you require the customisation urgently, then let me know and you can pay a fee to get the customisation done quicker.
Hi, how can I reduce the space between titles and content? For me, there is just too much white space between the page title (entry-header) and the page content (entry-content). I would like to make the content area wider to the left. Thanks for your reply and great tutorial site!
Mark,
The space between the title and content seems OK here. Can you reply with a screenshot and annotation to clarify matters? With regards to making the content area wider, go here: https://karavadra.net/make-content-sidebar-areas-fit-full-width-screen-twenty-seventeen/
Hi Bharat, currently it looks like this: https://postimg.cc/RqsjJFNM and I would like to alter it like this: https://postimg.cc/njL3n4Kq. This is the only part of the theme I’m not able to adjust to my needs.
Mark,
The two column layout seems to have different spacing here. Can you post the URL of your page so that I can take a look at how it appears on your site?
Thank you.
Sure, that would be http://graner.nl/temp/2017WP.html (redirect).
Mark,
I have had a quick look and the spacing seems to be created with many elements of CSS. I can’t currently quickly create a solution and for free as I am quite busy. If this customisation is a priority then please try posting it as a job here: https://jobs.wordpress.net/post-a-job/
Hi Bharat, thanks for looking into it! I’ll see if I can get it fixed elsewhere. Thanks again, best wishes.
Bharat,
I have scanned your list of customization tutorials for the answer to this question and apologize if I just missed it. Can you tell me how to reduce the large white space between the header/menu and content area in the Twenty-Seventeen theme. It seems quite excessive.
Thank you
Hello Craig,
Depending on the resolution of the screen, one of the following two CSS code blocks are used to create the padding for the site content.
@media screen and (min-width: 48em)
.site-content {
padding: 5.5em 0 0;
}
.site-content {
padding: 2.5em 0 0;
}
Reduce the 5.5em and 2.5em, and perhaps use px for pixels, instead of em, to define the preferred size of the top padding.
Thank you for your reply. do you recommend editing in the style.css in my child theme or adding in the “appearance – customize – additional css”
Craig,
You can use either the style.css file in the child theme or in the additional CSS in the admin, but I recommend using only one of the two methods so that all your custom CSS code is one place.
Simply pick the method which is easier to edit and manage for you.
Ger,
As above, can you send a screen capture with a marking of the 200px area?
Hi,
Question – On my first page I do not want a title so I want to move the content up so there will be no blank space (where the title should be). Can you tell me where I would make this change.
Thanks.
Hello Ger,
I am not sure how you are removing the title on the home page, however you can reduce the height of the home page header as here: https://karavadra.net/reduce-header-height-size-twenty-seventeen-theme-front-page/
Hi Bharat,
I am actually talking about any page or post where I will leave the title blank.
Thanks.
Ger,
I’m sorry but it’s not clear what you are asking – can you create a screen capture and adjust it or make notes on it and link it from the comments here?
Hi Bharat,
Okay, I did some homework and found the code below to remove the page titles and it works. But it seems like there is a top margin or padding that makes the content start about 200px from the top of the page. I would like to be able to modify this and make it less, can you tell me where I should look?
Thanks.
entry-title {
display: none;
}
Hello,
is it possible to have a different background on each page/post?
thank you for any assistance
Hello Jamal,
Try the link below where you may find a plugin to have different backgrounds for a page and post. This may save time and effort with custom coding.
https://wordpress.org/plugins/search/background/
Hi there!
I didn’t see this in the list, but from what I have found, it is how 2017 works; which is when you click on a button, say contact, it shows the image first, not the text. Is there a way to have it go directly to that without removing the header image (more like Visia, for example?)
Ann,
Specifically which button are you referring to when you say that when you click on it, it shows an image not the text?
I can’t seem to associate that with any button on Twenty Seventeen.
Bharat I am developing (novice) a church web page using the WordPress Twenty Seventeen theme. At some point on all of the sub pages (not the home page) I am getting the following character string displayed. How do I hide this string? You can view this on the site at BethlehemUMC1547.org I have copied the string below:
WIDGETS:
Array
(
[0] => WP_Widget_Pages
[1] => WP_Widget_Calendar
[2] => WP_Widget_Archives
[3] => WP_Widget_Media_Audio
[4] => WP_Widget_Media_Image
[5] => WP_Widget_Media_Video
[6] => WP_Widget_Meta
[7] => WP_Widget_Search
[8] => WP_Widget_Text
[9] => WP_Widget_Categories
[10] => WP_Widget_Recent_Posts
[11] => WP_Widget_Recent_Comments
[12] => WP_Widget_RSS
[13] => WP_Widget_Tag_Cloud
[14] => WP_Nav_Menu_Widget
[15] => Ai1ec_View_Admin_Widget
[16] => GoogleMapsWidget
[17] => UMC_Content
[18] => Conference_Content
[19] => Upper_Room
[20] => UMNow
)
Glenn,
The text that appears looks like debugging output from a widget in the footer.
Without getting into such technicalities, can you try switching off, temporarily, or removing any widgets from the footer?
If that does not help then can you send me Admin login details for yours using the help link on the top menu?
Your advice was right on target. I deactivated the Plug Ins and reinstalled and the extra text string was gone. Looks like I had activated a content widget aggregator and then activated each of the elements that was included in the aggregator. I deactivated all the plugins and then just activated the content aggregator plugin. Everything looks good. Thanks for your kind attention.
Help! I’ve launched my blog and can’t get comments to work with your theme
Hello, please note that Twenty Seventeen is not ‘my theme’. The theme’s details are here: https://wordpress.org/themes/twentyseventeen/
I tried submitting a comment from a post here:
https://sassaphras.org/2017/07/20/my-first-phish-show-122813/
and there were PHP errors when the comment is submitted.
These errors could be for various reasons and I suggest posting a support ticket about the issues here:
https://wordpress.org/support/theme/twentyseventeen
I just updated some of the links above as one or two were incorrect.
Hello Bharat!
I’ve made use of many of your customizations (see credit at bottom of pages). I am wondering if you can help me with a bullet list problem I’m having in the sidebar, which thanks to you, now appears on all pages except the Front Page: https://botanical-art.baeecorp.org
Background: I have tried styling bullet lists in my child theme so that bullets are inside the margin with the list item text aligned next to the bullet. But in most cases, the bullets remain outside in the margin and I’ve had to live with that but I don’t like the look especially when a list is next to a figure sharing the same margin (see the “List of Helpful Resources” in https://botanical-art.baeecorp.org/education/).
Problem: At the top of the sidebar on any page (https://botanical-art.baeecorp.org/education or https://botanical-art.baeecorp.org/order-book), there is a widget area that shows a normal use of bullets in a list: the bullets align with the text of the bullet item. It is this way throughout the rest of the website. But near the bottom of the sidebar is a widget area that has the bullets offset from the bullet items. At one point, to be sure I was targeting the widget area, I gave it a green color background. The header and the list items had a green background but the bullets were not included. What I have now is a bullet list inside the widget area that has no bullets and some uncontrollable bullet list outside the widget area that doesn’t line up with the list items. I changed the CSS for that list specifically to none and tried to adjust the margins and padding to bring the text up to align with the outside bullets but everything just squeezed together. Strangely, the outside bullets also squeezed up but remain out of alignment with the list item text.
I looked at the plugin and I can see that it styles list items with class=”clear” but I cannot find any CSS in it for how the clear class is defined–it could be any number of things. I have tried using the following CSS:
[code]
aside #mw_lastupdated_widget-2 {
background-color: none;
}
aside #mw_lastupdated_widget-2 ul li.clear {
vertical-align: top;
border-bottom: none;
border-top: none;
padding: 0;
list-style-type: none;
clear: none;
}
[/code]
Do you know how I can modify the CSS for this one plugin or widget area so there are either no bullets in the outside margin, or they at least align with the list items.
Thank you,
Cynthia
P. S.
Occasionally, when going to a new page, you might encounter a 500 Internal Server Error. If that happens, just ignore it and reload the page. I’ve asked my hosting provider, DreamHost, about it but they have not yet responded.
Cynthia,
Thank you for the credit, it’s appreciated. First, you seem to have disabled the right click on the site. Can you enable it until we try to resolve the issue?
Secondly, I may require your WP-Amin login details. Can you send me your or create a temporary Admin user and send either of the details using the help link on the top menu? Do not post them here.
Hi, I have a one page parallax page using bold page builder with scrolling to sections via element id’s (eg #about, #contact).
So far so good.
Now I want a normal single page as well. Only the menu isn’t working correctly.
With a menu item with url #about is working fine on the homepage, but not via the other single page.
When I change it to http://www.sitename.nl/#about it is working but the addressbar shows that complete url with #about.
Also it seems to reload.
Is there another better way to resolve this?
Thanks in advance!
Raymond, Can you let me know what the URL of the site so that I can look into it?
It is https://www.gewoonkindzijn.nl
Can you also send me the URL of the page where it is not working?
It is: https://www.gewoonkindzijn.nl/algemene-voorwaarden/
Can you try the following two variations?..
1) With the full URL in the menu link (e.g. https://www.gewoonkindzijn.nl/#kindercoaching). This may be the best option but you say it seems to reload. Does it reload or does it not reload?
2) With a backslash and then the hashID (e.g. /#kindercoaching).
Let us know how you get along.
Option 1 –> it does reload
So I chose option 2 and that is working! Thanks!
Only thing….
Visit https://www.gewoonkindzijn.nl and you can click on the various menu-items and it scrolls through the page without changing the URL. E.g. click on Kindercoaching and the URL will still be https://www.gewoonkindzijn.nl.
But, when you go to https://www.gewoonkindzijn.nl/algemene-voorwaarden via the footer and than on that page click on Kindercoaching the URL will change to https://www.gewoonkindzijn.nl/#kindercoaching and this URL stays, also when you click on any other menu-item.
I’m glad option 2 worked, and I see what you describe where the URL changes and then doesn’t but I am not sure why it does that. The links are however working and I hope that is OK.
This was exactly what i was looking for and it works perfectly! I would just like some help with the header images on the post pages if you dont mind. Im currently using a local site until i go live and i would like the post page header to remain in a fixed position when i scroll ( the same effect as on the main page ). Thanks
Ryan,
The header on the home page does not remain fixed. Can you clarify if it is the home page you were referring to and also about the header image? See the link below to the home page where the header disappears off the top of the page on scrolling down.
https://tryit.tv/twentyseventeen/
Hi. I think I may have used the wrong term. Basically what I’m looking to create is the effect where the header image stays still ( it remains in the same position even when you scroll ) which is what happens on the home page of the twentyseventeen theme. I would just like to also enable that effect on the post pages as the header image on the post pages currently scroll up with the page.
Ryan,
If you mean that you don’t want the image to scroll but stay in position whilst the menu scrolls over it when the page scroll downs, then leave that with me as I did a few tests but it was not as simple to customise as I thought it to be.
Thank you Bharat.
Hi Bharat,
I am also looking for the answer to this question. Any ideas for a non techie person?
Thanks
Hello Bharat,
Is it possible to change the footer to have more than two sidebars? I’d like to have four sidebars down there so I can have columns across the footer and split up the widgets to reduce the page scroll length.
Thanks,
Cynthia
Hello Cynthia, I will look into this as soon as I can.
Hi Bharat. Your TwentySeventeen customization tutorials are very helpful. However, I wonder if you are able to help. I wish to overlay a div containing text over the featured images of the page panels & header image. Is this possible?
If you see my test site, I already have a ‘text to go here’ box in place but it’s hard coded into the php file, which isn’t ideal.
http://www.hughjan.us/
I want to be able to add a text box like the one in the panel below to each featured image area.
Any help gratefully received.
Thanks
Hello Roger, I am looking into this but it seems to be a bit tricky with the front page panels. I will get back to you if I can create a solution. Have you added text to your first panel image? If you find a solution then can you post it here?
Thank you.
Hi Bharat. I have created a text box that displays over the main header image by placing a div within the wp-content/themes/twentyseventeen-child/template-parts/header/site-branding.php. However, as mentioned, I’m not sure this hard coding is ideal.
I found this article about text overlaying a featured image in the Minimal theme by registering a new widget but I’m not knowledgable enough to alter this to fit 2017, if this method is possible at all.
https://carriedils.com/text-overlay-image/
The other thing I’m thinking about is trying to use :before or :after to display text as part of the panel-content but in the area the gradient displays over the featured images. Once again, I’m not sure it’s possible or how to do it.
Any thoughts gratefully received.
Thanks
Hello Roger,
This customisation could get quite complex and difficult to support. There are many variation possibilities for panels and the type of text block that appears on it, such as the actual number of panels, size of the panel, which device it’s being viewed on and any variations to these would require further custom coding, and would perhaps be better coded as a comprehensive plugin.
However this text on panel feature is seemingly one feature and it is possible to use a plugin to do that which can have many other features. I use such a plugin on this site, albeit it is a slightly customised version that came with the theme. It’s called Visual Composer (see https://karavadra.net/bkvisualcomposer) and can be purchased for $34 USD which includes 6 months support.
Hence, I feel that customizations can be pushed a little too far when it may be more practical to find a ready-made solution which may do more.
I hope that makes sense.
Hi again Bharat. Thanks very much for your replies. If you look at my test site here >> http://www.hughjan.us/ you’ll see i have created a grey div (on the left) over the second featured image; tied to the panel below it.
This was achieved by targeting the individual post thus – .post-663 div.panel-image:before
However, now I’m trying to target this css via inline styles in the HTML of the page to input the text. I’m not having any lick and am not sure this is even possible though.
My alternative is to embed the div shape & text in the background images which, once again isn’t ideal for many reasons.;
Sorry. ‘luck’ not ‘lick’. I’ll look at your link too.
Roger,
If Visual Composer (VC) does not feel right for you, there are others which are more WYSIWYG but I only have long term experience with VC.
Let me know if you would like links to others.
Hello, I am trying to change my header image into a slideshow of images. I still want the logo to appear as is in front of the slideshow. Can you help me?
coloradofruit.org/wchs
Hello Paige,
The coding for this would be quite complex and the possibilities of what happens on posts and pages would have to be defined. There may already be a plugin for this at the link below. Can you have a look at the link below and let us how you get along?
https://wordpress.org/plugins/search.php?q=header+slider
When I add a 3 different “featured image” pictures to 3 pages they all show when scrolling down the home page. When I select the pages individually only one has the featured image at the top. Have you any ideas how I can fix this?
Thanks
Hello Dave,
It sounds as if you are using the panels feature on the home page where you can show up to 4 pages. If not please clarify. If so, using the ‘Ask For Help’ link at the top of the page, can you send me your admin URL, username and password, so that I can look into it.
Hi Bharat, Thanks for your reply. I made a mistake in my initial post it is only the “Blog” page that does not display the image. Yes I am using the “panels feature on the home page where you can show up to 4 pages”. The picture shows for the “Blog” section when I scroll down the “Home” page but when I select “Blog” from the menu it doesn’t show on the page.
Thanks for getting back to me
Hello Dave,
The blog page displays the general site-wide header and not the featured image for the page that is set to the blog page. Try the plugin at the link below.
It allows you to create unique headers on posts and pages.
https://wordpress.org/plugins/unique-headers/
Hello Bharat, That explains it. Thanks for your help
How do you customise the author archive page to show a custom post type as well as posts?
Can you provide a URL of your author archive page and perhaps an edited screen capture of how you want it to look?
How to add read more or continue reading links
Thanks
Hello virendra,
The theme already as “Continue reading” links for blog articles using the default <--more--> tag of WordPress in posts.
See the first post titled “Start Your Twenty Seventeen Journey Here” at this link: https://tryit.tv/twentyseventeen/blog/
On 16th September 2016, Nick Halsey said in a summary of a weekly customise meeting that video headers will start as a theme feature and also a multi-content page feature.
You can read the whole summary at the link below:
https://make.wordpress.org/core/2016/09/16/customize-update-2016-09-15/
I couldn’t find a public demo of the Twenty Seventeen theme, so I created one. You can see a screen capture in the post above and it’s at the link below:
https://tryit.tv/twentyseventeen/
I couldn’t find a live example a Twenty Seventeen theme so I created one here.
Hello Bharat, please excuse my newness to wordpress and thank you for being so thorough with your information. I can’t seem to find information about customizing the images in the background as you scroll down. I figured out how to customize the homepage, which is quite easy, but the other images on your example such as the person reading the tablet with coffee on the table, the green/jade image and the last image(badge). When I right click on the images, they are listed in an “upload” folder, but I have no idea how to access that folder. Can you point me in the right direction for the information? Thanks again and great work. jv
Since I wrote you the above question, I have found wp-content where this is located. I’ll learn how to change the code and replace. Thanks again.
Helen Hou-Sandi announced the Twenty Seventeen Theme. See here https://make.wordpress.org/core/2016/09/09/say-hello-to-twenty-seventeen
On 9th September 2016, Helen Hou-Sandi announced the Twenty Seventeen theme. You can see the early screenshots of the theme above and click on the link below for the full announcement:
https://make.wordpress.org/core/2016/09/09/say-hello-to-twenty-seventeen-
On 25th August 2016, Jeff Paul posted ‘under 4.7 Project/Feature Proposals’ a suggestion from Helen Hou-Sandi — ‘there needs to be a dedicated theming API/support team because there will be a Twenty Seventeen; actual details on that next week.’.
You can read the full post at the link below:
https://make.wordpress.org/core/2016/09/02/dev-chat-summary-august-31-4-7-week-2/
On 2nd September 2016, in a meeting related to the customize component, Nick Halsey posted that Helen Hou-Sandi mentioned in the dev chat that information on Twenty Seventeen will be announced next week.
You can read the whole post at the link below.
https://make.wordpress.org/core/2016/09/02/customize-update-2016-09-01/
When the Twenty Sixteen theme was launched on 25th August 2015, it was commented that it looked old fashioned, Matt Mullenweg, a founding developer of WordPress, asked for links to other themes for inspiration for twenty-seventeen, which Matt said ‘is just around the corner’. You can read Matt’s full comment at the link below.
https://make.wordpress.org/core/2015/08/25/introducing-twenty-sixteen/#comment-27139
On 25th August 2016, the day of the year later, Nick Halsey commented about Twenty Seventeen in the customization efforts for WordPress 4.7. Nick said that ‘the customize team should be involved with the new theme’ and that ‘default themes should be “state of the art”’. You can read the full comment at the link below under ‘Potential 4.7 Projects’.
https://make.wordpress.org/core/2016/08/25/customize-kickoff-and-weekly-meetings-for-4-7/
On 25th August 2015, after a development chat meeting, Jeff Paul commented under ”Potential Focus Areas” that ‘the new default theme (aka Twenty Seventeen) likely, but to be confirmed within the next week or two”. The comments is at the link below:
https://make.wordpress.org/core/2016/08/25/dev-chat-summary-august-24-2016/