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.

2016-11-01-twenty-seventeen-theme-demo

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.

Bharat Karavadra

About Bharat Karavadra

"I research and share leading-edge information, tools and exercises to help people transform and heal their life situations."

75 Comments

  • Mark says:

    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!

  • 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?

  • Ger says:

    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.

  • Jamal says:

    Hello,

    is it possible to have a different background on each page/post?

    thank you for any assistance

  • Ann says:

    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.

  • Glenn says:

    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?

      • Glenn says:

        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.

  • Sass says:

    Help! I've launched my blog and can't get comments to work with your theme

  • Cynthia says:

    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.

  • Raymond says:

    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!

  • ryan says:

    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/

      • Ryan says:

        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.

  • Cynthia says:

    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

  • Roger Mellie says:

    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.

      • Roger Mellie says:

        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://www.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.

          • Roger Mellie says:

            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.;

  • Paige says:

    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

  • Dave says:

    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.

      • Dave says:

        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

  • mannynz says:

    How do you customise the author archive page to show a custom post type as well as posts?

  • virendra says:

    How to add read more or continue reading links
    Thanks

  • 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.

    • John says:

      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

      • John says:

        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.

  • Bharat Karavadra says:

    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-

  • Bharat Karavadra says:

    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/

  • Bharat Karavadra says:

    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/

  • Bharat Karavadra says:

    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

Comment, ask or share something...

Do NOT follow this link or you will be banned from the site!