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 brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.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;
}

Question 24: To move Navigation menu to the top

@media (min-width: 760px) {
.navigation-top {
position: absolute;
top: 0px;
width: 100%;
height: 70px;
}
}

as you wanted to put navigation menu to the top, the inner page header image may be overlapped, so use this code too

@media (min-width: 760px) {

.custom-header {
position: relative;
padding-top: 70px;
}

}

Question 25: How to create Single / One Page Website using Twenty Seventeen Theme?

Answer:     Here it is ; Creating Single Page Website

 

Question 26: Twenty Seventeen Child theme for major theme file modifications

Answer :  Download Twenty Seventeen Child Theme Zip file  for your major modifications.

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

OR

Pay me some, I will help you for CSS Issue PersonallyCLICK HERE….

325 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

        Liked by 1 person

      • 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

  13. Juan says:

    Hello Om, First, thank you for the helpful post, I used the footer code and it worked perfectly. I cant seem to get the code to remove the side bars to work, on a state front page. Is there any way you can help me please?

    Like

  14. wolfe says:

    I’ve been messing around with twenty seventeen trying to get the header image to fit 100% width at all times, (as in @media responsive/mobile view) and at a complete loss.

    Any ideas?

    ie: http://dev.wolfeblog.net

    Like

  15. Kevin says:

    Thanks so much, very helpful! I am looking to increase the width of the content on on all pages (not posts)… is their a way to do this? Also, I donloaded CSS plugin, – do we just put all these codes in that box … just making sure … it seems awfully easy, but I have never done it before – I am using 2017 and would like to make some of these changes above, thanks again so much!!!

    Like

    • HI Kevin
      thanks
      would u mind to share me the site url where you are working on please?

      and
      yes..just put the css code in the box and it will work

      and..
      you want to increase width 100% by removing the sidebar?

      let me know
      Om

      Like

      • Kevin says:

        Great – thanks – just launched though it is not done, but wanted to check some stuff with it live … http://www.kevinmccarthyshows.com – I’d like the width to be 80 or 85% so there is some padding on each side… right now it’s way to thin.

        Here’s a couple of issues now that I have it up… If I am asking too much, I apologize – whatever you can do to help is fine.

        1. Width on each Page -I think 100% might be too much? whatever you think…
        2. I tried to change the text font to regular black, but it won’t let me for some reason – I have Advanced Twenty Seveeteen
        3. There is a ton of space between content and the Menu bar… I tried putting your code into CSS but didn’t work for me
        4. Can I change the fonts on the entire site to Arial? Can you explain how?
        Or is there one your suggest? I don’t like the current one… something like Arial would be great.
        5. Can I easily make one of the menu buttons a direct link to another page in my site? In the drop down in shows I have a couple that repeat.
        6. Footer – Looks like crap, I try to make changes but not sure how to change things up

        I did this site on my own – it was the first time I ever did anything in WordPress… I got farther than I thought I would! Everything is backed up so that is all good..

        I am so grateful for your help!

        Thanks so much!

        Kevin

        Like

      • Kevin says:

        ONe more thing, when updating the Simple CSS – if you have multiple codes, where do they go? all in between brackets? or doesn’t it matter…

        Sorry again if I asked for too much… if it is too much, just let me know, If you can help, that’d be huge… don’t know where else to turn, got pretty far on my own, but now need help……thanks!

        Like

      • Kevin says:

        Here’s more info that might help – I cut and pasted this from an older website not done in wordpress, there was HTML attached to it and I wonder if that is effecting something… for example… I have the plug in “Advanced Twenty Seventeen” and yet if I go to Global Advance Typography… I changed the text color to solid black and the Link color to Red… but neither is working… something is preventing the color of text and the color of link from changing…. if I have too many questions, maybe you do a paid help session? just don’t to ask too much…

        Like

      • Kevin says:

        Ok, sorry again about all the posts and all info… I researched more and just figured out a few things! Thanks so much!

        #1 – working on it right now

        #2 is done – see code
        #3 is done – see code
        #4 is done – changed it to Open Sans
        #5 is done – I used a plugin
        #6 – found youtube video on how to do it

        .site-header-main {
        padding-bottom: 0;
        }

        .site-content {
        padding-top: 0;
        }

        .entry-content p, .entry-content b, .entry-content strong {
        color: Black !important;
        font-size: 95% !important; (brought the font size down a bit which is what I wanted, too)
        }

        Like

      • Kevin
        thanks…sorry for the late response….actually it would better for me to share issue one after one …in case if you have too many issues please communicate me here

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

        Om

        Like

  16. Joe says:

    Hi Om, Maybe you can help me? On the twenty seventeen theme, I would like to make a change if possible to the top navigation menu. I would like to make the menu two lines instead of one line – where I can pick 3 or 4 links that I want on the first line, and then 3 or 4 other links on the second line. I know I can place many links on the menu and it will become two lines long (but it’s really one line long with overflow). Can I do this? For example: (first line of menu): Home, Page 1, Page 2, Page 3 —— (then second line of menu) Page4, Page 5, Page 6. I appreciate your time and look forward to your answer. Thank you so much. JS

    Like

  17. Matze says:

    i have a problem. I have adapted the solution of question 1 in the Style.css. However, I now have the problem that my header image is consumed. If I reset the changes to the original, but nothing happens and it remains so. Do you have a solution?

    Liked by 2 people

  18. Hi Om,
    Great post! super helpfull.
    My question is: how do I get rid of the word ‘POSTS’ above my frontpage post.
    My site only has one post and a sidebar. I don’t need to specify that posts are shown on the left side of my frontpage.
    Thanks
    Olaf

    Like

  19. Kevin says:

    Thanks in advance for your help! Trying to wrap text around slider with picture right justified…

    Code is likely wrong, but I looked all day and couldn’t find anything online wrap text with Unite Gallery – if there a better gallery for this or …

    Is Code Wrong

    https://kevinmccarthyshows.com/?page_id=370

    code

    This program was developed by Kevin specifically for a school in the Clarence district using “RESPECT” as their main theme for the year and the show was a big success! The students learn important lessons on how to be respectful to everyone, not only teachers & parents, but fellow peers as well. Kevin shows students why [unitegallery Respectslider catid=1]
    it is important to be respectful and outlines the key ways of giving and showing respect. Kevin discusses how everything you will want in life requires getting along with other people. Learning how to give and show respect is one important key to life-long success. Kevin excites audiences with fun, familiar, and upbeat songs and actively engages the students for an enjoyable and memorable learning experience.

    [/code]

    Like

  20. Marco says:

    Hi, thanks for your help! I need one more customization… I need my logo centered in the header and title below it centered, also in mobile mobile. Can you help me?

    Like

  21. Marcel says:

    Hey Om,

    I want to remove the Page titel und follow your instructions from question 2, but nothing happens. At the moment i have two page titles, but would like to have only my own.
    Do you have a solution for me?

    Best Regards
    Marcel

    Like

  22. Marco says:

    Second problem for me are two vertical black stripes for video on header from youtube…why?

    Thanks!

    Like

  23. smakasnack says:

    Hi Om,
    Thanks for a lot of useful information, much appreciated.
    I’m almost done with my personalised twenty seventeen website theme – free version (working on it in desktop server mode before I publish it). But I have spent hours trying to figure out how I can have both the logo (to the left) and menu navigation (to the right) in the header? I have removed the site title and tagline and tried to add so many different CSS codes to my custom CSS plugin but nothing has worked unfortunately.
    Thank you so much in advance,
    Best regards,
    Cecilia

    Like

    • HI Cecilia
      actually it would better if i could check your site Live…
      it will require theme file modifications to do so ( as i guess)

      OM

      Like

      • smakasnack says:

        Hello OM,

        Thanks for your prompt reply.

        I would like to avoid to set it live yet.

        I can send you screengrabs if that would help?

        Thanks, -Cecilia

        On Fri, Feb 3, 2017 at 1:50 PM, All About Basic wrote:

        > allaboutbasic commented: “HI Cecilia actually it would better if i could > check your site Live… it will require theme file modifications to do so ( > as i guess) OM” >

        Like

      • HI Cecilia
        ok..
        share me the backup of ur wordpress ( zip it and give me with database)

        Om

        Like

      • smakasnack says:

        Hello Om,

        Of course, not a problem. Please see attached zip file I just backed-up and downloaded.

        I would like my header to be displayed as this website: http://liviaskitchen.co.uk/ (with logo, menu and social media on the header, same line but with the social media icons at the very end instead).

        Also, with the featured image that I have with the page called The Smaka Story at the front page I would like to display it like http://liviaskitchen.co.uk/ (several of photos slides with arrows on the side for the guest to flick through, I don’t need to be able to add text on top of the photos), is this possible?

        I just saw that my mobile version is showing this white border on the top and bottom of the menu, I have tried to remove it but haven’t succeeded.

        Many thanks, Om. – Cecilia

        On Fri, Feb 3, 2017 at 2:12 PM, All About Basic wrote:

        > allaboutbasic commented: “HI Cecilia ok.. share me the backup of ur > wordpress ( zip it and give me with database) Om” > Respond to this comment by replying above this line > > New comment on *All About Basic * > > > > *allaboutbasic* commented > > on Twenty Seventeen Theme: Modifications of header, footer, sidebar, > contents and documentations > . > > > in response to *smakasnack*: > > Hello OM, Thanks for your prompt reply. I would like to avoid to set it > live yet. I can send you screengrabs if that would help? Thanks, -Cecilia >

        Like

      • Hi Cecilia
        seems u forgot to share me the zip…
        would u mind to upload the zip in dropbox and give me the link please?
        Om

        Like

  24. smakasnack says:

    Hi Om, Can’t find where my plugin theme-junkie-custom-css back-up the css changes I have added in a file so I have just pasted them in a doc and uploaded to dropbox:
    https://www.dropbox.com/s/8lq8p1qkaq9uqhb/All%20CSS%20I%20have%20added%20in%20the%20Custom%20CSS%20on%20my%20wordpress%20website.rtf?dl=0

    Thanks Om,
    -Cecilia

    Like

    • Hi Cecilia
      so u didnt modify theme file?
      it would better if you share me the theme u r using

      Like

      • smakasnack says:

        Hi Om,
        No, I haven’t modified the theme file only added the css codes using the TJ Custom CSS plugin and add it straight to the Appearance – Custom CSS and save. Is this incorrect? I’m using the twentyseventeen theme,

        Thanks,
        – Cecilia

        Like

      • HI Cecilia
        thanks..sorry for the late response
        i tried to import the database in my localhost wordpress setup and it is showing error?
        have u exported the database properly?

        let me know
        Om

        Like

      • smakasnack says:

        Hi Om,
        Thanks for your email. Yeah I belive so, I’m accessing my wordpress via the desktop server and loggin in on wordpress.com and I don’t have any error message showing up. What would you suggest me to do or how can I find out if I have exported the database properly?
        Thanks,
        Best regards
        Cecilia

        Like

  25. smakasnack says:

    Hello again Om,

    I have just added two files (gzipped and zipped) to dropbox that I exported from phpMyAdmin as I just realised that it was this file you meant? Thanks in advance.
    https://www.dropbox.com/s/mzi6or2ff85rlfv/Cecilia_smakasnack-dev_twentyseventeen_theme.sql.zip?dl=0

    https://www.dropbox.com/s/i9hxu6if0w36t1g/Cecilia_smakasnack-dev_twentyseventeen_theme.sql_gzipped.gz?dl=0

    Best regards
    Cecilia

    Like

  26. ozgurhazar says:

    Hi , I couldnt remove the gap between header image and below place where writing guitarplayer , songwriter etc.. please see below link : http://www.ozgurhazar.com

    Like

    • Hi
      please try this code

      .header-image-slider {
      margin-bottom: 0px !important;
      }

      let me know if that helps

      *** it will reduce gap between header image and your image (holding guiter)

      Om

      Like

  27. Deb says:

    Hi Om,
    First of all, Thanks a ton for all your useful tips.
    In my website, I want my content width to be full width. I DO NOT want sidebar or sidebar space either to the right or left. Is it possible? If possible please provide with a suitable CSS. The one mentioned in your tips didn’t work.
    Second, I have embedded some videos in my website. I want to decrease the height and width of the video window, so that in a row I can fit upto 3 columns of video. Please help.
    TIA

    Like

  28. nickgritti says:

    Hi I tried to insert your code but I continue having the same problem….the width of my homepage is limited….can you help me?

    Like

  29. nickgritti says:

    Yes I tried with Simple custom css too…but the width of the content remain the same

    Like

  30. Aled says:

    Hi Om, I’m trying to make a site with a fullscreen slider using the Master Slider plugin. Is there a way to get rid of the white space at the bottom of the page, so the slideshow will fill the screen?

    This is the site:

    http://cairngallery.space/

    Thanks

    Like

  31. brianmursidi says:

    Hi Om, need your assistance. I try to used your trick number 6, but it doesn’t work at all. what I do is just copyed your script. please help me.
    thank you

    Like

  32. deso16 says:

    THANKS FOR the codes. i want to ask if i need to first create a child theme before making these modifications

    Like

  33. Ramees says:

    I want make the slider of twenty seventeen theme header image please help

    Like

    • Hi Ramees
      it will need to modify header.php file of twenty seventeen theme
      OM

      Like

      • hortsocietyyy says:

        Hi OM, I am also wanting to replace my header image with a slideshow. I see you’ve been so kind to help others here! Would you mind helping me? coloradofruit.org/wchs

        Like

      • Hi
        yes….thanks..
        i can replace the header image with slider.
        that need code change..so..it would better if you contact me in my fiverr profile….
        as i will need to check ur dashboard for that
        OM

        Like

  34. chucky says:

    Hello ! thank you so much for your article. Tho I have a little problems and I saw a person Jiang commented you about the width code column doesn’t work for phone, you suggested to her to put :
    “to solve the issue please wrap my code in the following way

    @media only screen and (min-width: 980px) and (max-width: 20000px) {
    my code will be here
    }

    please let me know if you got it”

    But I don’t get it, as I had your code in the “additional css” I dont know where to put what you suggest and which code. Sorry I’m bit lost for this.
    Thank you for your answer

    Like

  35. topm4a says:

    I want remove header image but i can’t.

    Please help me!

    Like

  36. topm4a says:

    Thank Sir! i had remove “POST” and header image, but i only remove post date on homepage, don’t remove on post single. plz!

    Like

  37. Garima says:

    Solution mentioned by you for #6 is not working for me. I wish to reduce width of sidebar but it is not reducing. Please help. Thanks. My blog is http://www.asliveroflife.com

    Like

  38. Hi – how does one resize the image (smaller) at the top of the menu pages excluding the homepage?

    Like

    • Hi Karien
      would u mind to clarify me the issue some more please? sorry didn’t understand it…also which site u r working on?
      let me know
      Om

      Like

      • Hi Om, thanks for the response. On the various menu pages i.e: about us, our services etc. my images are at the top + stretch across the screen. I want clients to see my copy immediately without having to scroll past the image first. How do you: 1. minimize the image PLUS 2. align images to the left side of the screen with the copy on the right?

        Greatly appreciate your help.

        Like

      • Hi karien
        as u contacted me in fiverr..i am replying you there

        Om

        Like

  39. John M says:

    Hi! Thank you for your very informative website.
    You really have helped us alot.

    I just have another problem with my website:

    http://teach-to-fish-ph.com/about-us/mission-and-vision/

    From the link above, you can see that the Page Title is Separated to the Page Content.
    I want them to appear belonging to the same column.

    Thanks a lot!

    Like

  40. fernartcom says:

    Hey!

    Many thanks for sharing this.
    I searched the forums through wordpress and they didn’t solve my problem.
    One of your code edits helped a resizing issue that I had on a mobile screen.

    Best Regards,

    Fernando A

    Like

  41. This page is very helpful. Thanks for posting!

    Like

  42. mctourin says:

    Hi OM
    I am new to this, but I am using Twenty Seventeen and I think the text possible to put on top of the header picture is too small. I have two lines:
    http://motorcycle-touring-norway.no/
    I did copy your code in question #2 into my plugin Google Fonts. I had to add a new CSS Selector, and I just glued the whole code in. It is then all in one line.
    Trying to change the start picture text still did not work. Am I doing it all wrong?
    Thank you.

    Like

    • Hi Mctourin
      to use my code…try to use Simple Custom Css plugins…. so that my code will remain intact if u update themes etc.
      let me know if it helps?

      OM

      Like

      • mctourin says:

        Thank you OM. I did, and glued it in and updated. But how will I find it in the dashboard to alter the text? Somewhere under Appearance? Think of me as your grandmother with her first PC :-))

        Like

      • Hi Mctourin 🙂 ….. you will find it under Dashboard > Appearance > Custom Css

        Om

        Like

      • mctourin says:

        I think I understand it. I just alter the “font size” in the code you made, or put green instead of red and press update? Well, no effect on the text. The codes to alter is over-lined in the code overview. Does that matter? Must the / and / have to be in there when putting in your code in s.c.css, or is your code the only thing that needs to be there?
        I am running WP 4.7.2 and in the s.c.css details it says: Warning: This plugin has not been tested with your current version of WordPress.

        Like

      • HI Mctourin… that plugins is good…and don’t worry about the warning message.. yes.. just put my code in the “Custom Css” section

        please check this link … where i have shared you a screenshot…hope that will clear your idea

        Feel free to let me know if u have any other question
        🙂
        OM

        Like

      • mctourin says:

        Yes it worked now. There is two different text lines on the heading. Shall I just hit enter a couple of times and then insert the code for the other line? Have you got that code as well?
        I really appreciate your help

        Like

      • Hi Mctourin…
        the code starts like this

        css-selector
        {
        codes;
        }

        so..where the 2nd brackets ends…. u have to put your next code below it..
        u got the point?

        let me know 🙂

        Om

        Liked by 1 person

      • mctourin says:

        Perfect

        Like

      • Pleasure 🙂

        Liked by 1 person

    • mctourin says:

      I got it. I am trying to find the code for “come ride with me” as you can see on my page, but I am not sure…

      Like

      • Hi Mctourin
        that is Site Description… try this code

        .site-description {
        color: #666 !important;
        font-size: 23px !important;
        font-family: cursive !important;
        }

        let me know if it helps

        Om

        Like

  43. Joël says:

    Hello,

    I would change the color of the menu icon in white as well as the text on the responsive menu I specify and the bottom of the drop down menu.

    thank you very much

    Best Regards,

    Joël

    Like

    • Hi Joël

      to change the Responsive menu icons color…try this code
      .meanmenu-reveal span {
      background: darkred !important;
      }

      Also
      u want to change the font color of mobile menu drop down items? or background color of drop down menu?

      let me know please
      Om

      Liked by 1 person

  44. Kevin says:

    Thanks in advance fro your help… my site is not working right on the web browser – Edge windows 10….(I can’t see any of the sliding info!)… it works on Chrome fine and on my phone…. and when I am in WP editing mode in Edge it works fine… but if I just type in the address in address bar it doesn’t work… Alll my plugins are updated except LayerSLider WP… when I go to update it says I have to activate from website and website say $20… I am happy to do this but not sure if that is needed or not… I saw a list of files it was using from my site, but it’s been a few months since I did the site and not sure (I must have used it but don’t remember)… Do I need to pay for this update?

    Thanks!

    Kevin

    Like

    • Goodmorning Kevin
      have u tried from other computer too?
      sometimes browser may have some issue..
      please let me know
      Om

      Like

      • Yes it seems like it is good on all other browsers but Microsoft Edge both on this computer and my computer upstairs… It just stopped working and when I checked the site that is when I noticed the upgrade thing, but not sure if I have to pay that or not? (see e-mail above)…. (the site works completely fine on Chrome and Firefox)…. I am stumped as to that is happening and that is why I asked about Layerslider… I need to the site to work on all browser before I launch it…. I am so thankful for your help!!!

        Thanks!

        Kevin

        Like

  45. budsman says:

    Hi, thanks for the great post. I was hoping you could help me figure out how to make the main image left-justified when viewed on a mobile device. It’s centered by default, which looks fine on desktop, but on mobile I’d like the user to see the left portion of the image instead of the center. Thanks!

    Like

  46. Danny says:

    Hi Om,
    I’m having troubles with the width settings. It works on all the pages except on the static starting page “home”. Some help would be appreciated.
    With kind regards,
    Danny

    Like

  47. Danny says:

    Hi Om,
    Thanks for replying.
    Get the same width of my content (photo’s, text) on my static starting page as on all other pages. Currently the static page doesn’t use the same width.

    This is the code i’m using in the simple custom css:

    #primary {
    max-width: 100% !important;
    }
    .wrap {
    max-width: 1000px;
    padding-left: 1em !important;
    padding-right: 1em !important;
    }
    .site-content {
    padding-top: 1em;
    }

    .page-header {
    padding-bottom: 0;
    }

    @media screen and (min-width: 48em) {
    .page.page-one-column .entry-header,
    .twentyseventeen-front-page.page-one-column .entry-header,
    .archive.page-one-column:not(.has-sidebar) .page-header {
    margin-bottom: 0;
    }

    Like

  48. Dean says:

    Some great tips here thanks. I’m aiming to resize the site header, but when I do so a grey semi-transparent section appears just below where the site title. It seems to be linked to ‘custom-header-media’, but I’m having no luck in making it completely transparent. Any ideas please?

    The site is being built locally, so I can’t share the link unfortunately:

    https://drive.google.com/open?id=0B5kitvfP-0IpdTFmV2dka1RnS2s

    https://drive.google.com/open?id=0B5kitvfP-0IpTDk3WXFIaGJUd2c

    Like

  49. webric says:

    Thanks for this great post, I have used several of your scripts with great success. I wondered if you could help me with a question.

    I see your code for editing the height of the homepage header image.

    I have moved the main nav to the top of the screen. Now I would like to increase the header image size on the single-page and single-post views but not on the home page.

    Is this possible?

    Like

  50. yuri says:

    Hi, my sidebar for search, comments and posts is gone for all pages except the blog page once i applied you css. is there a way i can reverse that?

    Like

  51. Frank Chisom says:

    Hello,
    Thank you so much. I have never seen such collection of useful css code for a theme all in one place and well organised.

    I have implemented several of them without and problem. Also I found the solution to restore the responsiveness for mobile removed by code #6. You answered it in the comment section.

    Just one problem…. Because of the changes made to the content width and sidebar width in post pages, the double columns for pages (http://valsministries.com/about/) and the front page parallax images (http://valsministries.com/) are now affected.

    Please, do you have a code to solve this or is their a quirk to code #6 to resolve the issue? See the links above to each case.

    Thank you for you kind help.

    Liked by 1 person

    • Hi Frank
      u want your pages to be full width?
      please let me know
      Om

      Like

      • Frank Chisom says:

        Thank you so much for replying so fast.
        After implement the code #6… to adjust the post content width and sidebar.
        It affect the pages…
        I want to restore the pages to it default settings but at the same time keep new content and sidebar width (implemented by code #6) on the singles posts and archives
        Thank you.

        Like

      • Hi Frank
        ok… remove the code #6 you used before…
        now

        to change content width and sidebar width only for Single Post page…try this code

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

        .single-post #primary {
        width: 70% !important;
        }
        .single-post .has-sidebar #secondary {
        width: 26% !important;
        }

        please let me know if it helps?

        Om

        Like

  52. Frank Chisom says:

    Thank It worked … but I had to tweak it a little.
    I have bookmarked your site and have shared it on social media.

    The code you provided restored the pages to default (that’s what i wanted) and it also increase the content width correctly but did not affect the sidebar which caused the sidebar to be pushed down below the content as a footer. (the problem was solved by spacing the last two snippet and removing “.single-post” from the last snippet)

    I also added the media section you showed in the comments above; so that the site can remind responsive and appear great on mobile.

    See the code I finally used below.

    /* implementing to change content and sidebar width */

    @media only screen and (min-width: 980px) and (max-width: 20000px) {

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

    .single-post #primary {
    width: 70% !important;
    }

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

    Like

  53. Philippe says:

    Hi,

    This is really a great tutorial that should be linked to WordPress Twenty Seventeen theme page with so many answers to a load of issues that people are desperately looking for in many other places and not always with an answer…

    Sorry, I’m just adding my own “burden” …

    1 : I would simply like to move the site logo to the right of the title. I read and applied your code to move the site title and the descrition for testing purpose, but not all of them can be moved ! Anyway, I don’t want to move all but just the logo !

    2: I can’t center the “Proudly powered” in the footer inspite of following your exaplanation! I did as explaine, changes the footer.php content with this :

    Copyright© 2017 – BMWMOAFC.FR

    I initially tried with “center” but it stays on the left !!!

    3: I couldn’t find how to remove the padding just under the page name just above the text section.
    You gave a code for a previous post but it works only for the hompage and doesn’t reduce the padding anyway when I apply it !

    4 : Same as above, how to manage the padding at the end of each page (not removing it but reducing it) ,

    Thanks so much if you can answer at leat a few of those questions and congratulations if you can find a solution to all of them !

    My BMW bikers friends will thank you warmly !

    Philippe

    Like

    • HI Philippe
      for your first issue ( moving only logo to right of title) try this code
      .site-branding-text {
      float: left;
      margin-right: 2%;
      }

      For your 2nd issue

      *** i checked and found you already solved it?

      For your 3rd issue.. To remove / reduce gap after or before title

      .entry-header {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
      margin-bottom: 10px !important;
      }

      let me know if it helps?

      Om

      Like

      • Philippe says:

        Hi !

        First of all, thanks for your professionalism and your reactivity!

        I think many people could be interested by the answer as this is part of the recurring criticism that can be made to this nice theme !
        There’re many détails on the which it would be indispensable to take the hand !

        Advanced Twenty seventeen in many repect allows this knd of thing but not yet on all these finetuning !

        To get back to your answer, here’s the feedback :

        1 : problem solved, the logo switched to the right sucessfully !

        2 : No, this is not solved, unless the position is the expected one according to you !?
        This is not in the “real” middle of the page, but in the middle of the text section of the page, no ?
        To me we’re still at a third of the expected position, not half ?

        3 : Almost great again, it works, I managed to find the correct values for both the padding above the title (through another code provided on your blog) and under the page title !
        Perfect for this, but I said “almost” : the homepage doesn’t apply the value !!!??

        I suppose it’s managed by different values ?

        Furthermore, may I ask you a question : what does the “padding top” and “margin bottom” values correspond to in the code ?
        I tried to change the value but didn’t notice a change in the position of any object ?

        4: No idea yet about how to change the value of the bottom padding for the text section on the pages ?

        Thank you very much again for your help !

        Philippe

        Like

      • HI Philippe
        thanks..

        the footer “Copyright© 2017 -BMWMOAFC.FR ” is showing centered in my end? so..i think u should not worry..but if u share me screenshot how it is looking in your end..then i can check properly..but..it is centered in my end

        regarding issue 3 (homepage title gap issue)

        .home article .wrap, .home article header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        }
        .home #content {
        padding-top: 0px !important;
        }

        Regarding issue 4:

        #content {
        padding-bottom: 0px !important;

        }
        #colophon {
        margin-top: 0px !important;
        }

        let me know if it helps
        *** padding and margin generally used to put gap or spaces

        Om

        Like

  54. Philippe says:

    Hello !

    Almost there !

    Issue N°3 solved !

    Issue N°4 Same thing as for issue N°3 initailly, it doesn’t apply to the homepage !

    Bad luck, this is the page where it’s the most noticeable just under the signature of the president ! 😉

    I think it’s gonna take a you a few second for the “finishing touch” !

    Already said that, but I’m really impressed by your reactivity, more especially a sunday !

    Philippe

    Liked by 1 person

    • Hi Philippe
      in our country Sunday is not holiday 🙂
      i am little bit free now that’s why able to help
      so for issue 4 in home page..would u mind to try this please?

      .home .wrap {
      padding-bottom: 0px !important;
      }
      .home #content {
      padding-bottom: 0px !important;
      }

      let me know if it helps
      Om

      Liked by 1 person

  55. Philippe says:

    Hello OM,

    I’m really sorry for you, even though this is “cultural”, for us, westerners, men (and women) need to rest for all their hard work in the week so as to rest of course, but also enjoy life a minimum ! 😉

    i know that enthusiastic people don’t perceive it the same way, but you really deserve it !

    Anyway, let’s get back to our “finishing touch”, and the answer is… 10/10 you’re the best !

    Curiously the padding is not fully removed therefore, it seems we cannot tweak that much the values, but to me, the remaining padding is perfect, not too few nor too much in this case !

    Congratulations and long life to your blog I’ll undoubtedly keep looking at for any novelty or solved issue from other readers !

    Thanks very very very much

    Philippe

    Like

    • THanks Philippe
      you can do more fine tuning to the padding in header…if u tell me i can share u the code…

      Om

      Like

      • Philippe says:

        Heel,

        In which way could we improve the result !?

        Of course, i’m curious and enthusiastic, so I’m always interested in improving things!

        But I don’t want to take advantage of your time and kindness !

        Philippe

        Like

      • Hi Philippe
        no problem…. you can try this code

        .entry-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        }
        it will reduce some more padding
        Om

        Like

  56. Philippe says:

    Hello,

    Sorry, but this code doesn’t reduce but on the contrary it increases the padding !

    Padding above page titles is the same according to what I see, but the one under is almost doubled !

    .entry-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    }

    There’s one line different from your original code, this one :

    margin-bottom: 10px !important;

    And it seems to make the difference !

    Philippe

    Like

    • Ah i see Philippe..ok.. remove it then

      Like

      • Philippe says:

        Hello,

        Oh I had almost forgotten but I had another last question and a friend of mine member of the club for the which I asked all these questions told me a few minutes ago that the black color I applied this week-end to the footer was nice and the white letters of the address jump out but it’s a little too big and there’s too much black color !

        I was surprised when I applied your code that it comprised the widget address !!

        How comes that it’s included while we’re only expecting the black band where “Powered by WordPress” is wtritten to be black ?

        Can we modifiy your initial code so that only this band remains in black and not the widget or is there something else that prevents your code froim being properly applied ?

        Regards,

        Philippe

        Like

      • HI Philippe
        the footer section is all black..and the text is white


        check this please
        Om

        Like

      • Philippe says:

        Hello OM,

        Yes, indeed, this is what i currently have, but I thought that the footer corresponded to the narrow band where the copyright is positioned !

        Too bad ! 😦

        Is there a way to dissociate the band I would like to be in black and the address block which is a widget ?

        Have a nice day,

        Regards,

        Philippe

        Like

      • HI Philippe
        so u want the footer widget section to be white background and text color to be black….

        and
        the copyright background to be black and text to be white.
        right?

        if yes..it can be done..but for this footer file need to be modified…i can do it..but.. for this u have to communicate me in my fiverr profile

        Om

        Like

      • Philippe says:

        Hello,

        Yes this is exactly what I’m expecting! 😉

        Sorry, but what do you mean by “u have to communicate me in my fiverr profile” ??

        Regards,

        Philippe

        Like

      • HI Philippe
        the footer issue needs footer php file changed… for that i will need your login info privately
        fiverr is the platform where you can communicate me privately ( it is a secure marketplace where i provide payable service for css and other wordpress issues solution)

        here is the link

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

        OM

        Like

  57. Philippe says:

    Hello,

    Ok, but just a question before !

    Will the modification be coded in the footer or the CSS ?

    In other words, will the modification have to be saved everytime WordPress is updated ?

    Second, if I change the theme, I guess it won’t impact the other themes ?

    Regards,

    Philippe

    Like

    • HI Philippe
      the change will be in footer.php file..and the changes will be done using child theme…so you dont need to worry about any sort of update

      and other theme is not related to this changes
      Om

      Like

  58. Kerry says:

    Like to reduce font size in text headings, also where is this CSS inserted?

    Like

  59. Kerry says:

    Could I have CSS to halve the white space between the H1? heading and image banner and also increase the point size of the menu please.

    Like

  60. farlif says:

    Hi Om,

    thanks so much for this helpful post and the comments. It already helped me a lot.

    Of course I’ve a question too … I’d like to move the featured images from the featured-image-header down to a position under the post headline. Is there a simple hack to do that?

    Best regards,
    Stefan

    Like

  61. farlif says:

    If possible, yes …

    Like

  62. farlif says:

    Hi Om,
    sorry to bother you again – on http://rauchenistbloed.de I’d like to get rid of the huge front page header image which fills the whole screen. It should appear like the more modest headers on every other post & page, e.g. http://rauchenistbloed.de/nichtraucher-motivation – there it is like I want it. Is that possible with an easy css tweak?
    Stefan

    Like

    • Hi Stefan
      please try this code
      @media only screen and (min-width: 980px) and (max-width: 20000px) {
      .home .wp-custom-header img {
      min-height: 231px;
      max-height: 231px;
      }
      .home.custom-header-media {
      height: 301px !important;
      }
      }
      let me know if it works?

      Om

      Liked by 1 person

      • farlif says:

        Hi, first of all: 1.000 Kudos to you for being so helpful. Thank you!
        Then, yes, it works – almost … 🙂
        The picture size is perfect now, thanks! But the large header still remains, now blank, with the image only on top … Hm, do you have a solution for this too?
        Best regards! Stefan

        Like

      • Hi Stefan
        the code i shared didnt effect fully i found?
        mainly this one

        .home.custom-header-media {
        height: 301px !important;
        }

        this code seems didnt effect….so have u implemented my shared code properly?
        let me know
        Om

        Like

      • farlif says:

        Hi Om,

        yes I implemented it at the end of the style.css completely and without changes.
        The result is under http://rauchenistbloed.de

        Btw. can I remove the @media restrictions without danger? I’d like to have a short header image in all media.

        But first, of course, it would be good to shorten the white frame too. 🙂
        Best,

        Stefan

        Like

      • HI Stefan
        @ media query i used not to make my code hamper the mobile view
        OM

        Like

      • farlif says:

        Hi Om, yes, I placed it in the style.css, but meanwhile I found the reason – it works with a blank after .home . Thank you! Stefan

        Like

      • that’s great 🙂 …nice to know it works
        Om

        Like

  63. Kerry says:

    Thank you OM for being so helpful to a newby like me.

    Could I have the CSS to increase menu font size please.

    Like

  64. metaneuro says:

    Thank you so much for the post, it is sooo helpful!

    Like

  65. Mio says:

    Thanks, you are awesome for creating this! Can you help me change the font color of my navigation? I used your code to put the navigation on the top but I just help on changing its color and hover color too? Thanks again for making this page!

    Like

  66. Todd says:

    *** To remove page title from twenty seventeen theme and remove gap
    .page #content {
    padding-top: 13px !important;
    }
    .page .entry-header {
    display: none !important;
    }

    Where does this code go? In the style.css file? If yes, does it go in section 13.5 for pages?

    Thanks in advance.

    Like

  67. Madeleine Mouton says:

    Hi Om,

    Your article is really useful. Thanks.

    On my website: http://madeleine-mouton.com/ all the links have a very thick underline.
    I wish to keep the underline, but I don’t want the thickness when hover. And maybe instead have a color change.
    Could you help me with code for that?

    Also, I am using the Accordion Shortcodes plugin to add content in my pages, but when you hover it acts like text and nothing shows you can click it. How could I change that?

    Thanks a million,

    Like

    • Hi Madeleine
      Regarding the border issue in links when hover try this code

      .entry-content a:hover, .entry-summary a:hover, .widget a:hover, .site-footer .widget-area a:hover, .posts-navigation a:hover, .widget_authors a strong:hover {
      border: none !important;
      -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 0 rgba(0, 0, 0, 1) !important;
      }

      Regarding your 2nd issue: would you mind to clarify me some more? sorry didn’t understand it..and share me the post/page url where you are using it

      Om

      Liked by 1 person

      • Madeleine Mouton says:

        The code worked great! Thanks.

        I have a one page site (thanks to another article you wrote) so I can’t specify a page. I use the Accordion Shortcodes plugin in all my pages.

        It’s the gray titles to the right. They are shown as “closed” and when you click on them they “open” for you to read the hidden content. As you can see nothing indicates that you can click on these gray titles. The mouse doesn’t hover or anything. How could I change that? This is the plugin i’m using : https://wordpress.org/plugins/accordion-shortcodes/

        Thanks

        Like

      • HI Madeleine
        try this code to show a cursor pointer

        .accordion-title {
        cursor: pointer !important;
        }

        let me know if it helps

        Om

        Liked by 1 person

      • Madeleine Mouton says:

        The cursor pointer works perfectly. You are my savior.
        One last thing, the white space in the footer between the widgets and copyright is huge, is there a way to reduce it ?

        Thanks again,

        Like

      • HI Madeleine
        try this

        footer .widget {
        padding-bottom: 0px !important;
        }
        .site-footer .widget-area {
        padding-bottom: 0px !important;
        padding-top: 1em !important;
        }

        Om

        Like

      • Madeleine Mouton says:

        Perfect! Thanks so much 🙂

        Like

  68. emergencia1 says:

    Implementing on my blog http://Peertopeerguide.com

    Like

  69. austeen says:

    Thanks for your great help. My blog is exactly how I want it. However the menu won’t drop down on mobile. I deactivated the plugins, deleted the twenty-seventeen theme and reinstalled it, yet the problem persist. I am on child theme and I did edit my footer.php file to rename the footer note and also my index.php to make pages have full width. I added a few css codes to. All of these I did take off and the menu still wont drop down. Please help!

    Like

  70. johanna says:

    Hi Om,
    I hope you are fine 🙂
    I entered the code of the question 24, To move Navigation menu to the top. It works well.
    Just one question, when I scroll the homepage, I have a white line just below the homepage featured image. Can you tell me how to remove it?
    I also would like to have the menu on top on mobile devices, can you help me ? Thanks
    Johanna
    url : http://www.surlinstant.com

    Like

    • Hi Johanna
      to remove the white line try this code
      .home div#content {
      padding-top: 0px !important;
      }

      for mobile menu (please check your inner pages too after using my provided code)

      @media (min-width: 240px) and (max-width: 560px) {
      .navigation-top {
      position: fixed;
      top: 0px !important;
      width: 100% !important;
      z-index: 100000000;
      }
      .custom-header {
      margin-top: 14px;
      }
      }

      Om

      Like

  71. Fiona says:

    I’d like to move the position of the social menu from default left to right.
    I’d also like to know how to write something so that it’d appear on the same line as the social menu. I have no idea where to begin.

    Like

    • Hi Fiona
      Regarding the social menu position..
      try this code

      .nc_socialPanelSide.fade {
      left: auto;
      right: 5px !important;
      }

      Regarding the 2nd issue..
      can u share me screenshot where you want to show the Text in social menu?

      Om

      Like

      • Fiona says:

        Hi thanks so much: I put the code above into the CSS Customize but nothing happened.
        This is the URL … social.whenyouliveinparadise.com

        I can’t attach screen grabs in the site it seems.

        I would like, alternatively to add a line of text after the icons – if I can’t get them to move – so on the same line. Saying Powered by Paradise and it in itself being a link to http://www.whenyouliveinparadise.com

        Thanks for your time.

        Like

      • Oh…i was checking the other site…
        try this code

        .social-navigation {
        float: right !important;
        }
        let me know if it helps
        Om

        Like

      • Fiona says:

        OH! Bazinga! It worked immediately ! Thanx .. oh if only to know these things!!

        So if I wanted to put text on the same line as the Icons (both before and/or after the icons) is there a magic snipped I could add here too ..

        Want to to say Powered by Paradise and it be a link to http://www.whenyouliveinparadise.com

        Like

      • Hi Fiona
        to put the text …i prefer you check there is widgetize section there or not in footer..otherwise footer.php file needs to be edited.

        Om

        Like

      • Fiona says:

        Thanks 🙂 Saves me puzzling over code …

        Like

      • Hi Fiona
        so you want it here?
        social.whenyouliveinparadise.com
        at the footer…right?

        i mean..in twenty seventeen theme?

        let me know..
        can u contact me in my fiverr profile? i will need to check your dashboard….
        let me know…
        Om

        Like

      • Fiona says:

        yes here —> social.whenyouliveinparadise.com at bottom. Text (and URL) to precede (or go after) the social menu.
        fiverr ? dash – no problem

        Like

      • Hi Fiona
        at the end of my post..please check there i wrote ” Pay me some.. …” there is a Click Here button..

        Om

        Like

      • Fiona the $10 you paid me in fiverr showing pending as you didn’t write Work Done in thw purchased gig page… please write it so that I get paid 🙂

        Like

  72. Hi Om ! First of all, many thanks for the great post ! I’ve used lots of your codes and they always work perfectly !!!
    Do you know a way to remove the effect from header image ? Its like a gray filter over the video/image ?

    Like

  73. Paula says:

    Hi Om,
    Your post is great, thanks!
    Can I ask how to add a border to the footer and how I would do this please?

    Thanks

    Like

  74. Hi Om, thank you for your fast answer ! I saw that you wrote the css for the Lodestar theme, but actually Im working on another website, a twenty seventeen theme, http://www.drone-lasvegas.com
    I forgot to mention that in my question ! my fault 😦

    thanks a lot
    Roberta

    Like

  75. rfqpro says:

    Thank you for your hacks. Is there a way to put our company banner (header image full width) at the top of the page above the header media. Have added css to move the menu navigation to the top above the header media now would like to add our full width company banner (jpg or png) above the menu navigation. Brand (logo, company name, etc), header menu navigation (pages) and then header media?. Thanks

    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: