Twenty Seventeen WordPress 4.7 Theme And Support

August 31, 2016

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.

Share this:
About Bharat Karavadra

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

Share your thoughts

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

  1. 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!

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

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

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

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

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

  4. 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?)

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

  5. 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
    )

    1. 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?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    1. 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/

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Bharat Karavadra