Twenty Seventeen Theme: Modifications of header, footer, sidebar, contents and documentations

twenty seventeen documentation

Twenty Seventeen theme is a new theme by WordPress.org and wordpress.com.  It is the chain theme which comes after 2016 (twenty sixteen) , 2014 (twenty fourteen) ,2013 (twenty thirteen),2012 (twenty twelve). Twenty seventeen theme comes with the latest update of wordpress 4.7.  Here  I have shared some  css code to stylize your twenty seventeen theme.

For wordpress.org users  you have to  install   Simple Custom Css  plugins to use my provided css.

You can use my shared code and ask question in the comments section.

Or can take my personal help.

Question 1: If you want to change / reduce height of  header image in twenty seventeen theme

.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: 66% !important;
object-fit: fill !important;
width: 100%;
max-height: 100% !important;
display: block !important;
position: relative !important;
}

#wp-custom-header {
height: 100% !important;
}

.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, .admin-bar.home.blog.has-header-image .custom-header-media, .admin-bar.home.blog.has-header-video .custom-header-media {
height: calc(71vh – 32px) !important;
}

Question 2 : If you want to change site title font color, size and family of twenty seventeen theme, use the following css code

 

.site-title, .site-title a {
color: red !important;
font-family: cursive !important;
font-size: 23px !important;
}

*** To remove page title from twenty seventeen theme and remove gap

.page #content {
padding-top: 13px !important;
}

.page .entry-header {
display: none !important;
}

Question 3: If you want to change site description’s font color, font size and font family

body.has-header-image .site-description, body.has-header-video .site-description {
color: #fff;
opacity: 0.8;
font-family: cursive !important;
font-size: 23px;
}

Question 4: How to change the ‘Proudly Powered By WordPress’ text in the footer

at first go to  Appearance > Editor > footer.php     and replace the mentioned text with the following

twenty seventeen proudly powered by wordpress modification




<div class="site-info">
<a href="https://wordpress.org/">Your site footer links and contents</a>
</div>



twenty seventeen gap reduction

Question 5: How to reduce gap just above the content section

#content {
padding-top: 35px;
}

 

Question 6 : How to increase Twenty seventeen content section width

***  at first increase the wrapper width ***

.wrap {
max-width: 1145px;
padding-left: 3em;
padding-right: 3em;
}

 

*** 2nd — increase  left side content section width ***

#primary {
width: 70% !important;
}

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

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

twenty seventeen content and sidebar width increase

 

Question 7 : How to remove sidebar from single post page in twenty seventeen theme and make post page full width

 

.single-post #secondary {
display: none !important;
}

.single-post #primary {

width: 100% !important;
}

twenty seventeen sidebar remove full width post

Question 8 : How to remove featured image from single post page in twenty seventeen theme

.single-featured-image-header {
display: none;
}

 

Question 9: How to remove Post date and post author in twenty seventeen theme?

.entry-meta {
display: none !important;
}

Question 10 : How to change font family, font size and font color in single post page  title of  Twenty seventeen theme

.single-post .entry-title, .page .entry-title {
font-size: 1.625rem !important;
color: darkred !important;
font-family: cursive !important;
}

 

Question 11: How to change font family, font size and color of  Post date and  Post author

.entry-meta * {
color: darkred !important;
font-family: cursive !important;
font-size: 13px !important;
}

 

twenty seventeen category page modification

Question 12: How to change home page or archive page (category page)  single post title and archive page title’s  font color, font size and font family in twenty seventeen theme

.entry-title, .entry-title a {
color: darkred !important;
font-family: cursive;
font-size: 24px !important;
}

Question 13: To change category name  at the top of archive or category page at twenty seventeen theme

.archive .page-header h1.page-title {
color: darkred !important;
font-family: cursive;
font-size: 16px !important;
}

Question 14:  How to hide or remove the category name at the top of category or archive page in twenty seventeen theme

.archive .page-header h1.page-title {
display:none !important;

}

Question 15: How to remove Featured image from single post page in twenty seventeen theme

.single-post .single-featured-image-header {
display: none !important;
}

Question 16: How to change content section font color, font size and font family in twenty seventeen theme

.entry-content {
color: black !important;
font-size: 15px !important;
font-family: cursive !important;
}

Question 17: How to remove comments section in twenty seventeen theme

#comments {
display: none !important;
}

Twenty Seventeen footer section background

Question 18: If you want to change background color of footer widget /  Prooudly Powered by WordPress section

#colophon {
background: darkred;
}

#colophon * {
color: white !important;
list-style: none !important;
border: none !important;
box-shadow: none !important;
}

 

Question 19 : How to change sidebar widget title’s font color, font size and font family in twenty seventeen theme

.widget-title {
font-size: 15px !important;
color: darkred !important;
font-family: cursive !important;
}

twenty seventeen widget title background and centralize title

Question 20 : How to center the widget title,  provide background color  and remove space below the widget title

.widget-title {
text-align: center;
background: lightgrey;
padding: 5% !important;
margin-bottom: 0px !important;
}

Question 21:  How to  change links color, font size and font family  showing in widget  section in twenty seventeen theme

.widget li a {
color: darkblue !important;
font-family: cursive !important;
font-size: 14px !important;
}

Question 22: How to change hover link underline and hover font color for links showing in widget section

.widget li a:hover {
box-shadow: none !important;
color: darkred !important;
}

button background color twenty seventeen

Question 23: How to change submit or other button background color in twenty seventeen theme

button, input[type=”button”], input[type=”submit”] {
background-color: darkred !important;
}

 

If you have any issue feel free to ask me question here in comments section

OR

Want me to help you personally for CSS Issue?CLICK HERE….

56 Responses to Twenty Seventeen Theme: Modifications of header, footer, sidebar, contents and documentations

  1. Guillaume says:

    Hello,

    Thanks for this post! Really helpful.

    I do want to change the website title and description font family and size but …. applying your code in the beginning of style.css doesn’t work.

    Am I doing something wrong ?

    Thanks!

    Like

    • HI Guillaume
      try to use Simple Custom Css plugins and put my code there
      Om

      Like

      • Guillaume says:

        Thanks!

        Like

      • Guillaume says:

        It does work for the site title but not for the site description …

        Also “body”is highlighted red in the Custom CSS editor

        .site-title, .site-title a {
        color: #333B97 !important;
        font-family: helvetica, cursive; !important;
        font-size: 36px !important;

        body.has-header-image .site-description, body.has-header-video .site-description {
        color: #333B97;
        opacity: 0.8;
        font-family: cursive !important;
        font-size: 23px;

        Any suggestion ?
        🙂

        Like

      • HI Guillaume
        share me the site url where you are working on
        Om

        Like

  2. johanna says:

    hello,
    thank you so much, it is fantastic!!
    Do you know how to change the logo position? it will help me a lot 🙂
    Thanks and have a nice day
    Johanna

    Like

    • Goodmorning Johanna
      please share me the site url you are working
      and in which position u want to put it?
      Om

      Like

      • Johanna says:

        Hi Om
        Thanks a lot, finally for the logo, I found a solution.
        But I have another question 🙂
        I add a css code to remove the title of the pages, it’s ok and works well but now I have a big white gap instead of the title, certainly dur to the padding or margin, can you tell me how to reduce it ?
        Do you have a tuto to make the menu one page responsive as on the twenty seventeen demo ?
        It would be nice
        Thanks again 🙂
        Johanna

        Like

      • HI Johanna
        to reduce gap at the top of the page title …try this code
        .page #content {
        padding-top: 13px !important;
        }
        let me konw if it works
        Om

        Like

      • johanna says:

        Hi Om
        It work for the page itself but not for the page on the scrolling homepage, and I would like to reduce the gap on the home page when I scroll with the mouse. I don’t know if you will understand well… 🙂

        Like

      • HI Johanna
        can you share me screenshot which section of homepage ( to reduce gap) you are talking about please?

        Om

        Like

      • Johanna says:

        You can go on my website surlinstant.com
        And on the homepage, when you scroll with the mousr, you have a fisrt text block which begins with “Felicitations”. There is a big white gap before.
        If you continue scrolling, the second text block has also the white gap and so on.
        Do you see it?

        Like

      • HI Johanna
        please try this code

        .home .entry-header {
        margin: 0px !important;
        }

        .home .wrap {
        padding-top: 20px !important;
        }

        These codes are applicable for homepage
        please let me know if they works

        Om

        Like

      • Johanna says:

        Hi Om
        It works very well
        Thanks a lot
        Johanna

        Like

      • thats great Johanna 🙂

        Like

      • Johanna says:

        Hi Om
        As you know well the twenty seventeen theme, can I annoy you one more time?
        I uplaoded a video on the header, on mobile device (iphone), the video doesn’t appear, do you know why ?
        I uploaded mp4 video with 7mo weight but the theme is probably not video responsive, can you confirm ?
        Thanks a lot and happy new year 🙂
        Johanna

        Like

      • HI Johanna
        Happy New Year to you too 🙂
        sorry for the late response..was busy whole day..

        the video is not showing in your mobile…i guess the mobile browser you are using doesnt support tag you used to show the video…
        if u use youtube video..does it show?
        or
        better you use any other sort of plugins
        Om

        Like

      • Johanna says:

        Hi Om
        Thanks for your reply. Even when the video is on youtube, it is not responsive on mobile phone (iPhone), don’t worry, i will do without. I think it comes from the theme.
        Thanks a lot for all
        Johanna

        Like

      • HI Johanna
        if you use youtube i can help to make it responsive i guess
        so..if u wise i can give a try
        Om

        Like

      • johanna says:

        thanks a lot for your help, I prefer to keep my videos on my server 🙂 No problem for the responsive video, I found another solution.
        Do you know if it is possible on the homepage, to have a background image on the first text “Felicitations” ?
        Many thanks again :-)) you are wonderful !

        Like

      • Hi Johanna
        thanks..sorry for the late response (facing little family issue)
        yes there are other solution (using plugins…i cant suggest them properly to you as it will need to check dashboard)…
        and.. i found you are using an image for the text Felicitation….so u need background image where?
        can u share me any mockup screenshot about ur issue?

        Om

        Like

      • Sanne says:

        Hi,
        I have pretty much the same question. I want to place my logo in the upper left corner of my front page, because it would fit much better with the colours of the head photo. I managed to put it somehow more on the right side with the Advanced Twenty Seventeen plugin, but can’t find how to move it upwards. You can find my site at http://thedioramaproject.com/

        Thanks!
        Sanne

        Like

      • HI Sanne
        i need to check the dashboard for this
        would u mind to communicate with me here please

        https://www.fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-and-other-wordpress-issues

        ** i will reply you back asap when i will be online

        Om

        Like

  3. Hi, Thank you very much for such a helpful post. I removed the header but I am having some trouble removing a white bar at the top of the page, maybe you could please guide me on which way to go to do this.

    Thank you very much

    Like

  4. Alex K. says:

    Thank you very much!
    Alex from Germany 😉

    Like

  5. How to reduce space between primary content and rigth sidebar.
    Thanks

    Like

    • HI
      thanks ..sorry for the late response (facing little family issue)
      so you want to increase width of your left side content section so that it almost touch the right sidebar?
      please let me konw

      OM

      Like

  6. pkdreaders says:

    Hi Om,

    I would like to float the text on a page (not a post) to the left (under the title) instead of floating it to the right, as is the default. Do you have any ideas?

    Cheers,
    Chris

    Like

  7. Martijn says:

    Hi Om !
    Hope I can ask a you question about the Twenty Seventeen theme. I’ve installed the wpforo (forum) plugin and I want to make the forum full width.. with that I mean I don’t want the column with the page title, but only the content (the forum) in full width. With your question 6 answer above I couldn’t make it work.. a couple of other things worked perfekt. Second question is the main content.. it’s wider now but the title column still to width… how do I reduce this without modifiying the content column either ? Hope you can help me !
    With kind regards, Martijn (the Netherlands)

    Like

  8. Jiang Yayu says:

    Hi, Thank you very much for such a helpful post.I increase the content section width with code #6.It works well on my PC,but not suit for my phone.What should I do if I don’t want the code works on my phone?Thanks for your reply!

    Like

  9. mariocolina says:

    Hi Om,

    Thanks for your help. After looking after a solution for the ‘Proudly Powered By WordPress’, I finally found your web, and after a couple of minutes I fixed it!
    You Rock!

    Cheers

    Mario

    Like

  10. Ogzy says:

    Hi Om!

    Thanks a lot for your codes about Twenty Seventeen, it helps a lot. Can I ask one more question?

    How can we remove the underline from the link? I try a lot of codes but none seems to work :/

    Thanks for your help 🙂

    Ogzy

    Like

  11. This is all great, thanks so much for the info. I was wondering if I could get some help. I followed all the instructions on question 6, saved/updated it all, and it’s not changing the content or side bar widths. If you have any insight on how to trouble shoot it, I’d so appreciate it. Thank you!

    Like

  12. Erika Gill says:

    Thank you for this post! Having a list of all of the selectors really helped me, especially when figuring out how to remove the padding around the page content.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: