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.
You can take my personal help in skype : om2000_cuet
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
<div class="site-info"> <a href="https://wordpress.org/">Your site footer links and contents</a> </div>
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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
You can take my personal help in skype : om2000_cuet
Like this post?
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!
LikeLike
HI Guillaume
try to use Simple Custom Css plugins and put my code there
Om
LikeLike
Thanks!
LikeLike
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 ?
🙂
LikeLike
HI Guillaume
share me the site url where you are working on
Om
LikeLike
http://calypsoimports.com/
LikeLike
HI Guillaume
ok try this code to change font family and other styling of site description
.site-description {
color: #333B97;
font-family: cursive !important;
font-size: 23px;
}
Om
LikeLike
no luck 😦
I’ll try to dig around … Thanks for the help thought !
LikeLike
Oh wait … sorry, I forgot a } …
it works perfectly ! Thanks !!!
LikeLiked by 1 person
Great 🙂
LikeLike
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
LikeLiked by 1 person
Goodmorning Johanna
please share me the site url you are working
and in which position u want to put it?
Om
LikeLike
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
LikeLike
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
LikeLike
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… 🙂
LikeLike
HI Johanna
can you share me screenshot which section of homepage ( to reduce gap) you are talking about please?
Om
LikeLike
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?
LikeLike
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
LikeLike
Hi Om
It works very well
Thanks a lot
Johanna
LikeLiked by 1 person
thats great Johanna 🙂
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
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 !
LikeLike
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
LikeLike
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
LikeLiked by 1 person
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
LikeLike
Hello, I encounter the same problem as Johanna, my video in background does not pass on mobiles and tablets.
The video is hosted on youtube because too heavy for the server and I want it to start on all types of media. Can you help me please
LikeLike
HI
thanks
please share me the site url to check
Om
LikeLike
Hello, the url of my site is http://portail.acoeurdart.fr/
thank you in advance
LikeLike
HI
i checked your site using http://ipadpeek.com/ and i found the video background is showing properly?
please let me know
Om
LikeLike
Hello I just check on http://ipadpeek.com/ also I find that it works.
However, when I go to my site https://portail.acoeurdart.fr/ of my laptop or my tablet the video still does not turn.
LikeLike
HI
when i checked https://portail.acoeurdart.fr/ in my laptop the video is playing in background well?
which browser, and which Operating system you are using?
let me know
Om
LikeLike
Hello
On my laptop the video works well.
The problem arises for tablets (ipad …), cell phones (windows phones, samsung, iphone …)
LikeLike
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
LikeLike
HI Juan
please share me the site url where you are working
Om
LikeLike
Thank you very much!
Alex from Germany 😉
LikeLike
Pleasure Alex 🙂
LikeLike
How to reduce space between primary content and rigth sidebar.
Thanks
LikeLike
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
LikeLike
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
LikeLike
Hi Chris
thanks …sorry for the late response
would u mind to tell in which site u want to do the changes please?
also
would u mind to clarify me the issue some more please? sorry didnt get the idea of ur issue properly
Om
LikeLike
Hi Om,
It was a very quick response, thank you! What I want to do seems to be a little complicated. I would like to change the page template so that the text appears on the left side of the page, under the heading. At the moment, it appears on the right of the page. I have not launched the site yet, but the temporary sandbox site is here: rudge.philamentjournal.com/blog/. On the pages, such as the “About Chris” page (http://rudge.philamentjournal.com/blog/about/), I want to move all the text to the left. This, I think, involves changing the php in the page template page, and maybe the functions.php?
Thanks for you help!
Chris
LikeLike
HI Chris
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
LikeLike
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)
LikeLike
HI Martijn
would u mind to share me the forum page url where you want to do the changes please?
** please dont mind if i am little late to reply
Om
LikeLike
I changed the site now to ‘one clumn’ and the forum is wide (wide template) but.. this is not what I wanted.. I would like to have 2 columns with the page title column only very small (http://www.mfc-ikarus.de/wp/community/)
Next problem seems to appear in the openingsscreen (scroll down) the weather-station widget is now below the text and the widget does not appear beside the text..
LikeLike
HI Martin
sorry for the late response
would u mind to contact me here regarding the help please
https://www.fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-and-other-wordpress-issues
Om
LikeLike
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!
LikeLike
HI Jiang
thanks..sorry for the late response…
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
OM
LikeLike
Hi OM
Thanks for your reply.I have used the method and it really works well.My problem has been solved.Thank you very much!
LikeLike
Pleasure Jiang
Om
LikeLike
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
LikeLike
Pleasure Mario 🙂
LikeLiked by 1 person
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
LikeLike
Hi Ogzy
try this code please
a
{
borber-bottom:none !important;
}
LikeLike
Hi Om,
Thanks for your answer! I tried your code but it doesn’t work. The underline is still here!
Here is my website in case you want to check: sophierabia-psy.ch
Thanks a lot for your help
LikeLike
HI Ogzy
your site showing Under Construction…
would u mind to deactivate it for a day so that i can check?
and is the underline in links showing in homepage?
let me know please
Om
LikeLike
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!
LikeLike
HI Jake
would u mind to tell which site you are working on please?
OM
LikeLike
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.
LikeLike
Pleasure Erika
Om
LikeLike
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?
LikeLike
Hi Juan
thanks
please share me the site URL you are working on
OM
LikeLike
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
LikeLike
Hi Wolfe
not sure..but would u mind to try this code please?
.custom-header-media {
height: 100% !important;
}
header img {
position: relative !important;
}
let me know what u get
Om
LikeLike
Nope, not working. I even gave it a shot at placing it with the @media brackets as well as at the end of the css. And since it’s the width rather then height that is the main issue for me, I tried that as well. In fact it doesnt seem to effect it all. the @media version of the header image is unchanged for the cut off. annoying as hell.,
LikeLike
Hi
would u mind to communicate me here please? i need to check from dashboard
https://www.fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-and-other-wordpress-issues
Om
LikeLike
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!!!
LikeLike
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
LikeLike
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
LikeLike
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!
LikeLike
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…
LikeLike
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)
}
LikeLike
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
LikeLike
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
LikeLike
Hi Joe
yes..that can be done by modifying the theme file ..adding an additional menu system below the current one
Om
LikeLike
Thank you for taking the time to answer my question, Om! I do appreciate it. So, I hate to bother you more, but could you give me a little more instruction on how to do the information you’ve mentioned above? Which file would I modify? Do I look for certain information and just copy and paste a second instance right under the first one? I’m using the twenty seventeen theme if you can use that as an example. If it’s too complicated and you’d rather not tackle that much information, I surely understand. Thank you again in any case! Joe
LikeLike
Hi Joe
for this i will need admin login details to check
would u mind to communicate me here please
https://www.fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-and-other-wordpress-issues
Om
LikeLike
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?
LikeLiked by 2 people
Hi
would u mind to try this code please
div#wp-custom-header, div#wp-custom-header * {
height: 100% !important;
position: relative !important;
}
let me know if it helps
Om
LikeLike
well thanks it works
LikeLike
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
LikeLike
HI Olaf
please try this code
.home header.page-header {
display: none !important;
}
let me know if it helps you
Om
LikeLike
That worked a charm! Thanks, you are a lifesaver.
LikeLike
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]
LikeLike
Kevin
thanks
actually that type of issue need to checck dashboard…so i prefer u communicate with me here
https://www.fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-and-other-wordpress-issues
OM
LikeLike
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?
LikeLike
Hi Marco
please share me your site url to check
OM
LikeLike
http://www.bioalkimia.it
Thanks!
LikeLike
HI Marco
just checked
by center you mean..to position the logo center of the screen? i mean to position the logo in the middle from top?
please let me know
Om
LikeLike
Yes logo a center and text title below, like in mobile version…
LikeLike
I guess i solve it with media query:
@media only screen and (min-width: 768px) and (max-width: 10000px) {
.site-branding {
padding-right: 25em;
padding-left: 25em;
}
}
Can you delete link from website from my post please?
LikeLike
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
LikeLike
HI Marcel
you want to remove “Willkommen” from your homepage?
please let me know
Om
LikeLike
Hey Om,
No i want to remove for example the “Start” over the “Willkommen” from the “Willkommen”-Page.
Is that possible?
Regards
Marcel
LikeLike
Hey om,
my problem is done.
Other question is how can i give the upper menu more wide, so that all menu points are in a row?
Regards
Marcel
LikeLike
Hi Marcel
try this code
.navigation-top .wrap {
padding: 0.75em 0em !important;
}
this code is for ur site http://carport-infos.de/
also
would u mind to tell what was your previous issue and how u solved it ? sorry..ur comments went behind others…
Om
LikeLike
at the first problem, the code from your question 2 has remove the Page title. I forgot to update my page. -.- 😀
LikeLike
Ok Marcel
if u need any help, feel free to ask
Om
LikeLike
Hey Om,
thanks man 😉
Regards
Marcel
LikeLike
Second problem for me are two vertical black stripes for video on header from youtube…why?
Thanks!
LikeLike
HI Marco
your site seems in Maintenance Mode?
Om
LikeLike
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
LikeLike
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
LikeLike
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” >
LikeLike
HI Cecilia
ok..
share me the backup of ur wordpress ( zip it and give me with database)
Om
LikeLike
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 >
LikeLike
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
LikeLike
Hi again Om,
Sorry I forgot to add the link, here it is: https://www.dropbox.com/s/2uas2mhtjfdyr4p/Cecilia_smakasnack-dev_twentyseventeen%20theme.zip?dl=0
LikeLike
Hi Cecilia
share me the zip of ur modified twenty seventeen theme too
Om
LikeLike
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
LikeLike
Hi Cecilia
so u didnt modify theme file?
it would better if you share me the theme u r using
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
Cecilia
sorry for the late
allow me time I will let you know asap
LikeLike
Hello Om,
No worries, looking forward to hearing from you.
LikeLike
Hi Cecilia
sorry for the late
http://davidrev.joymaa.com/
your database was problematic but i managed it to upload
one thing is..what i found …what u wanted ( to align logo and menu)..u already have implemented it in ur dev site?
please let me know
Om
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
Hi TIA
share me your page or post url where u want it full width….
also…
have u installed Simple Custom CSS? my code should work..
please let me know
Om
LikeLike
Hi Om,
Please find the url where I want full width. Similarly I want full width in all the pages.
http://www.yourhallofframe.com/who-are-we/
No, I have not installed Simple Custom CSS. I try to avoid using many plugins. But I am using the Additional CSS option in the Customization menu.
Also let me know the solution regarding embedding videos.
Thanks.
LikeLike
Hi
for full width page (mainly to increase the content width) try this
#primary {
max-width: 100% !important;
}
.wrap {
max-width: 1000px;
padding-left: 1em !important;
padding-right: 1em !important;
}
Regarding video..
share me the page url where u used the video
Om
LikeLike
This is the page in which I want to reduce the height and width of the video window, so that I can fit three videos in a row.
http://www.yourhallofframe.com/cinematography/
LikeLike
HI
the iframe code u r using for videos..there are height and width option… u can check by reducing that prarameter
Om
LikeLike
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?
LikeLike
HI NickGritti
have u installed Simple Custom CSS to use my provided code?
let me know please
OM
LikeLike
Yes I tried with Simple custom css too…but the width of the content remain the same
LikeLike
HI
are u using any cache plugins?
if yes… please clear that cache pluigns cache first…..
if not..
i need to check the dashboard… better to contact me here
https://www.fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-and-other-wordpress-issues
Om
LikeLike
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
LikeLike
Hi Sped
the site you shared is not opening in my end?
Om
LikeLike
That’s strange – I just tried it on my friend’s computer and it worked ok… I wonder why that would be. Do I need a Gravatar account?
LikeLike
HI Aled
it is working now..sorry seems it was due to my ISP
please try this code
.home div#page {
display: none !important;
}
let me know if it helps
Om
LikeLike
Perfect! Thanks so much Om, you da best. Thanks for your fantastic page. Will come to you for any future queries.
LikeLike
Hi Om, I managed to set the slider to the correct size for my screen, but it is obviously different on different screen sizes. Do you know of a way to make the page responsive?
LikeLike
Hi ALed
just checked..i found ur slider is responsize…and it is responsive as ur site is already responsive
have u found any page which is not responsive?
let me know
Om
LikeLike
That’s interesting- I get a white band at the bottom when looking on a Mac screen – although it fits my PC laptop perfectly. If I made the image larger, would it resize automatically? Thanks Om.
LikeLike
Hi Aled
yes that white band is showing in my end too… I think by making the image to cover the full space in mobile..may not look good
Om
LikeLike
In fact could there be a bit of code that would zoom the page so that if you were viewing on a mobile device it would fill the screen? Sorry to keep bothering you!
Aled
LikeLike
umm no Aled
LikeLike
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
LikeLike
Hi Brian, would u mind to share me the site url where you are working please?
Om
LikeLike
still at localhost om. in building progress
LikeLike
HI
ok..
have u installed Simple Custom Css plugins?
try to paste my code in that plugins
OM
LikeLike
THANKS FOR the codes. i want to ask if i need to first create a child theme before making these modifications
LikeLike
Hi
Child theme is not mandatory if u use Simple Custom Css plugins…..
if u modify theme files…in that case child theme is mandatory
OM
LikeLike
I want make the slider of twenty seventeen theme header image please help
LikeLike
Hi Ramees
it will need to modify header.php file of twenty seventeen theme
OM
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
Hi Chucky
you want to make ur site to be wider in mobile view?
if yes share me your site..i will share you the code
OM
LikeLike
yes exatcly, I did put the code on #6 for the website wider; which works like a charm but it doesn’t fit to mobile http://lekadre.com
LikeLike
Hi Chucky
to make your site wider for mobile view ( twenty seventeen theme) try this code
@media only screen and (min-width: 240px) and (max-width: 580px) {
#primary {
width: 100% !important;
}
.has-sidebar #secondary {
width: 100% !important;
}
}
let me know if it helps
Om
LikeLiked by 1 person
works like a charm OM, thank you so much
LikeLike
pleasure 🙂
LikeLike
I want remove header image but i can’t.
Please help me!
LikeLike
Hi
would u mind to share me your site url please?
Om
LikeLike
topm4a.com
LikeLike
And i want hide or remove date post and “POST” character on homepage
Thank Sir!
LikeLike
Hi Tom
to remove date from homepage posts
.entry-meta {
display: none !important;
}
To remove the word “Post” from homepage post try this
header.page-header {
display: none !important;
}
*** To change the top image…
have u checked Appearance > Customize section?
Om
LikeLike
Thank Sir! i had remove “POST” and header image, but i only remove post date on homepage, don’t remove on post single. plz!
LikeLike
HI TOm
in such case replace this code
.entry-meta {
display: none !important;
}
with this
.home .entry-meta {
display: none !important;
}
let me know if it helps
Om
LikeLike
Hi Sir!
“.home .entry-meta {
display: none !important;
}”
this code is not work like i want. It is still remove all. help me more…
thank you so much!
LikeLike
Hi
have u removed my previous code?
u need to remove my previous entry-meta code to make it work for homepage only
Om
LikeLike
Oh yeah! i had removed date post. So how to remove space and change location MENU like this picture (https://i.imgur.com/azo9RVel.png) . Plz help me! thank sir!
LikeLike
Hi Tom
To reduce gap from the bottom of homepage posts try this code
.home article {
padding-bottom: 12px !important;
}
To reduce gap between sidebar widget try this code
.widget {
border-top: 2px solid black !important;
padding-bottom: 12px !important;
}
*** Regarding menu issue
it will need header php file modifications
Om
LikeLike
It is not working. plz review and header.php file modifications for me.
Sir is amazing!
LikeLike
the code i shared for reducing gap not working??
LikeLike
OMG! that’s worked. Thank sir! But i don’t no modify header.php file 😦
LikeLike
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
LikeLike
Hi Garima
have u installed “Simple Custom CSS” pluigns to use my code?
let me know
OM
LikeLike
Hi – how does one resize the image (smaller) at the top of the menu pages excluding the homepage?
LikeLike
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
LikeLike
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.
LikeLike
Hi karien
as u contacted me in fiverr..i am replying you there
Om
LikeLike
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!
LikeLike
HI John
are u searching this? please try these codes
.entry-header {
width: 100% !important;
float: left !important;
}
.entry-content {
width: 100% !important;
float: left !important;
}
*** you are showing the contents to be centered..so… the contents will be centered aligned
let me know if it helps?
Om
LikeLike
Great!! 😀
It is working!
Thank you very much!
LikeLike
Pleasure 🙂
LikeLike
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
LikeLike
Pleasure 🙂
LikeLike
This page is very helpful. Thanks for posting!
LikeLike
Pleasure Smith 🙂
LikeLike
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.
LikeLike
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
LikeLike
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 :-))
LikeLike
Hi Mctourin 🙂 ….. you will find it under Dashboard > Appearance > Custom Css
Om
LikeLike
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.
LikeLike
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
LikeLike
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
LikeLike
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
LikeLiked by 1 person
Perfect
LikeLike
Pleasure 🙂
LikeLiked by 1 person
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…
LikeLike
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
LikeLike
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
LikeLike
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
LikeLiked by 1 person
Hi OM, I want to change the font color of mobile menu drop down items… Could you help? I would also like to have the full hight of the page header image, like on the Home page. Hope you can help! Have a great weekend! Greetings, Daphne
LikeLike
Hi Daphne
to change the mobile menu font color
@media (min-width: 240px) and (max-width: 700px) {
#top-menu li.menu-item a {
color: red !important;
} }
let me know if it helps
Om
LikeLike
Hi again, I think you have missed the second part of my question on a topic above: I would also like to have the full hight of the page header image, like on the Home page. Hope you can help!
LikeLike
HI
i checked
i found your home page header image and inner pages header images are of same height?
Om
LikeLike
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
LikeLike
Goodmorning Kevin
have u tried from other computer too?
sometimes browser may have some issue..
please let me know
Om
LikeLike
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
LikeLiked by 1 person
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!
LikeLike
Hi Budsman
in which site u r working?
please share me the site url
Om
LikeLike
Thanks, it’s budsman.com
LikeLike
Hi Budsman
please try this
@media (min-width:240px) and (max-width:760px) {
#wp-custom-header img, #wp-custom-header {
object-fit: fill !important;
}}
let me know if it helps?
OM
LikeLike
Awesome, thank you! I tweaked your suggestion a little bit. The object-fit property ended up changing the aspect ratio of the image on mobile which caused it to look smushed, so instead I tried “object-position: 0 0;” and that got me exactly what I needed. Thanks again.
LikeLike
Pleasure 🙂
LikeLike
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
LikeLike
By the way, the adres of my website: https://dwimages.nl/
LikeLike
Hi Danny
would u mind to tell what help you need please?
please let me know
Om
LikeLike
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;
}
LikeLike
Hi Danny
thanks
sorry for the late reply
so you want to make your content setion wider?
please let me know
OM
LikeLike
Hi Om,
Yes, my content on my static page called ‘home’. All the other pages are fine (wider content) except my starting page….
LikeLike
Hi Danny
try this code
.wrap {
max-width: 1000px !important;
}
let me know if it helps
Om
LikeLike
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
LikeLike
Hi Dean
actually it would better if u could check the site live
Om
LikeLike
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?
LikeLike
Hi Webric
thanks
would u mind to share me the site url you are working please?
Om
LikeLike
I have set up example here http://test.masero.co.uk/
You can see any page that is not homepage the header does not display correctly.
I would appreciate any help. Here is the code I use to move menu to top:
@media screen and (min-width: 48em) {
.navigation-top {
position: absolute;
top: 0px;
width: 100%;
height: 70px;
}
}
Thank you!
LikeLike
HI Webric
would u mind to try this code please?
.custom-header {
padding-top: 70px !important;
}
Om
LikeLike
This code changes all pages including the homepage. This is fine for my website.
Thank you very much Om
.custom-header {
padding-top: 70px !important;
}
LikeLike
Pleasure 🙂
LikeLike
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?
LikeLike
Hi Yuri…just checked ur single post page and ur sidebar is showing fine? which code u used? let me know
Om
LikeLike
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.
LikeLiked by 1 person
Hi Frank
u want your pages to be full width?
please let me know
Om
LikeLike
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.
LikeLike
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
LikeLike
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;
}
}
LikeLike
Thanks Frank
so your issues are solved ?
Om
LikeLike
Yeah it was…
Thank you.
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
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
LikeLiked 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
LikeLiked by 1 person
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
LikeLike
THanks Philippe
you can do more fine tuning to the padding in header…if u tell me i can share u the code…
Om
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
Ah i see Philippe..ok.. remove it then
LikeLike
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
LikeLike
HI Philippe
the footer section is all black..and the text is white
check this please
Om
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
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
LikeLike
Like to reduce font size in text headings, also where is this CSS inserted?
LikeLike
HI Kerry
share me the site url please
and
you have to install Simple CUstom CSS plugins if you are using your own domain and hosting
if you are using wordpress.com free hosted site..then you have to purchase Custom Design plan from wordpress.com
Om
LikeLike
Id like to but Im getting loads of unsolicited emails. I purchased the URL and its paid hosting with Godaddy.
I installed your Custom CSS plug in just need the CSS code to reduce font size please.
LikeLike
HI Kerry
can u share me the site URL please?
i need to check it
Om
LikeLike
added it to my details please don’t pass on to anyone!
LikeLike
HI Kerry
try this code
.entry-title {
font-size: 1.5rem !important;
}
let me know if it helps
Om
LikeLike
Absolutely perfect, works like a charm, thank you for the assistance.
LikeLike
Pleasure 🙂
Om
LikeLike
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.
LikeLike
Hi Kerry
please try this
.site-header {
padding-bottom: 3px !important;
}
Om
LikeLike
Worked thank you, could I have the CSS to increase menu font size please.
LikeLike
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
LikeLike
Hi Stefan
would u mind to share me the page url please to check?
Om
LikeLike
Hi Om,
sure, it’s a pleasure! 🙂
A good example might be the self-mixed post-category page http://rauchenistbloed.de/rauchen-schadet/raucherkrankheiten – I set the featured-image-header on display:none, and inserted the image “by hand” into the post-editor.
But of course it would be great (and a gift for my laziness), if the featured image could take it’s position there automatically …
Stefan
LikeLike
Hi Stefan
so you want to put / show the featured image just below the Post title..right?
LikeLiked by 1 person
If possible, yes …
LikeLike
hi Stefan
actually it will need to modify the theme file… it is not fully css issue
so i can help u if you communicate me in my fiverr profile
Om
LikeLike
Ok, I see. Thank you!
LikeLike
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
LikeLike
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
LikeLiked by 1 person
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
LikeLike
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
LikeLike
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
LikeLike
HI Stefan
@ media query i used not to make my code hamper the mobile view
OM
LikeLike
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
LikeLike
that’s great 🙂 …nice to know it works
Om
LikeLike
Thank you OM for being so helpful to a newby like me.
Could I have the CSS to increase menu font size please.
LikeLike
Just checked
your site doesnt have menu i found
also..the code already shared in the post
Om
LikeLike
Thank you so much for the post, it is sooo helpful!
LikeLike
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!
LikeLike
HI Mio
ok share me your site url please
OM
LikeLike
*** 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.
LikeLike
HI Todd
i prefer you use Simple Custom Css pluigns…and use the code there
OM
LikeLike
Sorry. Your reply just popped up. Thanks.
LikeLike
Hi TOdd
hope your issues are solved now 🙂
OM
LikeLike
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,
LikeLike
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
LikeLiked by 1 person
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
LikeLike
HI Madeleine
try this code to show a cursor pointer
.accordion-title {
cursor: pointer !important;
}
let me know if it helps
Om
LikeLiked by 1 person
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,
LikeLike
HI Madeleine
try this
footer .widget {
padding-bottom: 0px !important;
}
.site-footer .widget-area {
padding-bottom: 0px !important;
padding-top: 1em !important;
}
Om
LikeLike
Perfect! Thanks so much 🙂
LikeLike
Implementing on my blog http://Peertopeerguide.com
LikeLike
great 🙂
LikeLike
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!
LikeLike
Hi Austeen
what edit you did in index.php file to make full width?
let me know
OM
LikeLike
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
LikeLike
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
LikeLike
Hi Om
Thanks a lot
It seems to work well 🙂
Have a nice day
Johanna
LikeLike
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.
LikeLike
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
LikeLike
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.
LikeLike
Oh…i was checking the other site…
try this code
.social-navigation {
float: right !important;
}
let me know if it helps
Om
LikeLiked by 1 person
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
LikeLike
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
LikeLike
Thanks 🙂 Saves me puzzling over code …
LikeLike
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
LikeLike
yes here —> social.whenyouliveinparadise.com at bottom. Text (and URL) to precede (or go after) the social menu.
fiverr ? dash – no problem
LikeLike
Hi Fiona
at the end of my post..please check there i wrote ” Pay me some.. …” there is a Click Here button..
Om
LikeLike
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 🙂
LikeLike
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 ?
LikeLike
Thanks…try this code
body:not(.no-header-image) .custom-header-image::before, .lodestar-front-page .custom-header-image::before {
background: transparent !important;
}
let me know if it helps
Om
LikeLike
please try this
.custom-header-media::before {
background: none !important;
}
let me know if it helps
Om
LikeLike
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
LikeLike
I’ve just thought of something else…is there a way to add a background image behind the first text area on the homepage? This would be directly below the menu.
If you could offer any help that would be great.
Thanks again
LikeLike
Hi Paula
share me your site URL to check
Om
LikeLike
I now have a background but it seems to have pulled through to other pages. The URL is http://www.elegancechic.co.uk
Thanks again
LikeLike
Hi Paula
when i visited to your provided site..it is showing “Coming Soon” ?
Om
LikeLike
I’ve amended now.
LikeLike
Hi Paula
ok site is live now
so.. you have managed to show background behind the text…
what changes u need now?
let me know
*** dont worry if i am little late to reply..just keep the site live to let me check
OM
LikeLike
Hi Om,
Can you tell me how to display that same background throughout the site? Also how to add a black top border on the footer?
Thanks
Paula
LikeLike
Hi Paula
please remove the background u already added…and also the panel images…
and try this code
article {
background: url(http://www.elegancechic.co.uk/wp-content/uploads/2017/04/rf-background.jpg)!important;
background-attachment: fixed !important;
}
let me know if it helps
Om
LikeLike
Hi Om,
That only worked for the Homepage, if I move to another it only displays the background in a panel.
Any other suggestions? Thanks for your help so far.
LikeLike
Hi Paula
replace my previous code with this one
article, #content {
background: url(http://www.elegancechic.co.uk/wp-content/uploads/2017/04/rf-background.jpg)!important;
background-attachment: fixed !important;
}
let me know if it helps
Om
LikeLike
Hi Om,
That seems to have done the trick.
Thank you.
LikeLike
thats great Paula 🙂
LikeLike
Hi Om, I notice that there is a white bar at the bottom of my page, is there a way to remove this. Is this due to having a background?
LikeLike
HI Paula
try this code to remove the gap
#colophon {
margin-top: 0px !important;
}
OM
LikeLike
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
LikeLiked by 1 person
Hi Roberta
please try this code
.custom-header-media::before {
display: none !important;
background: none !important;
}
let me know if it helps
Om
LikeLike
Perfect !! thanks a lot !
Roberta
LikeLike
Hi Om,
Sorry to be annoying, I’ve encountered an issue with my menu background not displaying on my mobile. Could you help?
LikeLike
HI Paula
is the gap issue solved?
and share me the site url again please
Om
LikeLike
Hi Om,
Yes, that fixed the gap issue! Thanks very much for that. I oddly wasn’t able to reply to that message.
The site URL is: http://www.elegancechic.co.uk
Thanks
LikeLike
Hi Paula
thanks..can u share me screenshot how it is looking in ur end in mobile please?
Om
LikeLike
How do I send a screen shot to you?
LikeLike
Hi Paula
your mobile should have option to capture the screen..
or if u have another mobile or camera.. take an image..upload it in ur media library and share me the link
Om
LikeLike
Thanks for that. Here it is: http://www.elegancechic.co.uk/img_5652/
LikeLike
Hi Paula
according to your screenshot you mean..the drop down background of your mobile menu is not showing the background..that is the issue..right?
let me know please
Om
LikeLike
Yes, that’s right. Is there a fix?
LikeLike
Hi Paula
thanks..sorry for the late
here is the code to try
@media (min-width: 240px) and (max-width: 660px) {
.main-navigation {
background: url(http://www.elegancechic.co.uk/wp-content/uploads/2017/04/header15-min.jpg);
}
.menu-top-menu-container, .menu-top-menu-container ul {
background: url(http://www.elegancechic.co.uk/wp-content/uploads/2017/04/header15-min.jpg);
}
}
let me know if it helps
Om
LikeLike
Amazing, worked perfectly. Thanks again
LikeLike
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
LikeLike
Hi,
seems you contacted me in my fiverr portfolio..right?
LikeLike
Hi.
Youve saved us so much work. Really appreciated. I need to do the same as RFQPRO and insert a banner at the top. I have also moved the menu to the top. Also what size should the banner be?
Thanks
LikeLike
Hi peteraldo
would u mind to share me the site url please?
Om
LikeLike
Thanks Om
Worked great on Our Staff and Contact page but made no differnce on the products page. Probably because im using eCommerce Product Catalog for WordPress plugin?
Thanks
LikeLike
Thanks
would you mind to try this code please?
@media (min-width: 760px) {
body.archive:not(.home) .custom-header {
margin-bottom: 0px !important;
padding-top: 50px;
}}
let me know if it helps
Om
LikeLike
Yep that worked fine thanks. Are we able to move the site title to the top banner right justified?
LikeLike
can u share me screenshot specifying which location u r referring please?
Om
LikeLike
Thanks Om
Sorry it didnt work. The products page is the only one im concerned about at this stage.
Peter
LikeLike
Hi Peter
would you mind to try this code
@media (min-width: 760px) {
body.archive.tax-product_cat .custom-header {
margin-bottom: -25px !important;
padding-top: 25px;
}}
let me know if it helps
Om
LikeLike
OK thanks ive attached some screenshots. see https://myflamin.files.wordpress.com/2019/05/screenshot-cemimax.jpg?resize=450%2C450
https://myflamin.files.wordpress.com/2019/05/plugins.png?resize=450%2C450
There are two issues here. One is the header text. As you can see its too high. The next is the font size under the products.
The second screenshot shows the plugins im using for the products.
Thanks for your help
Peter
LikeLike
Hi Peter
try this code for Product page header issue
.post-type-archive-product .custom-header {
margin-bottom: -25px !important;
padding-top: 25px !important;
}
let me know if it helps
Om
LikeLike
Hi OM
That worked for the product page but not for the pages in the drop down list. Sorry if i didnt make myself clear about that.
Pete
LikeLike
Hi Pete
can u share me that page url where it didnt work?
LikeLike
Thanks OM
http://cemimaxaustralia.com/?product_cat=primers-moisture-vapor-retarders
http://cemimaxaustralia.com/?product_cat=leveling-compound
http://cemimaxaustralia.com/?product_cat=patching-compounds
Pete
LikeLike
Hi Peter
for the 3 links you shared, try this code
.archive.tax-product_cat .custom-header {
margin-bottom: -25px !important;
padding-top: 25px;
}
but i think if you were using the code below..it would apply to all of the pages
.custom-header {
margin-bottom: -25px !important;
padding-top: 25px;
}
let me know please
Om
LikeLike
Thanks OM. Youre a star! All works perfectly now.
How can i contact you? I would like to donate some money for your help.
Thanks
LikeLike
you can donate me here my fiverr profile
https://www.fiverr.com/om2000_cuet/solve-your-wordpress-blogs-csshtml-and-other-wordpress-issues
LikeLike
Sorry for the delay. its cemimaxaustralia.com
The site title is ok where it is now so dont worry about that issue thanks. My issue now is that on the Our staff, Products and Contact us all show the site title too high and Id like that banner to be smaller. Can you help there? The site title on the home page is i where it is.
LikeLike
Hi
thanks,
for your inner pages
@media (min-width: 760px) {
body.page:not(.home) .custom-header {
margin-bottom: 0px !important;
padding-top: 50px;
}
}
try this code
let me know if it helps
Om
LikeLike
Sorry OM still no success.
How do I post s screenshot here? I want to show you. Thanks
LikeLike
just take a screenshot…indicate the issue (if u can)
upload it in your media library and share me the image link here
🙂
Om
LikeLike
Hello, Do you know how to remove the link from the header logo? The logo will still show, but it will not be clickable and will not be a link. Thank you!
LikeLike
Hi Shamon
in which site you are working on?
share me the url
Om
LikeLike
Thank you. I am using the default install of wordpress twenty seventeen.
LikeLike
yes..fine..what is the site url to check?
LikeLike
Hello again …
is there a snippet of code to change the sidebar from defaulting to the left. I’d like it on the right (and slightly smaller) but the main thing of importance is to change the side.
LikeLike
Hi Fiona
share me the site/page url you are working on
Om
LikeLike
http://social.whenyouliveinparadise.com
LikeLike
Hi Fiona
http://social.whenyouliveinparadise.com/ there is no sidebar?
LikeLike
No that is correct. As I just don’t want to include it as it’s on the wrong side. But you have all the details from last week to access the site. I will click it to make it show on the default .. but temporarily as I don’t want it on the left – I would like it on the right.
LikeLike
Goodmorning Fiona
ok..would u mind to contact me in my fiverr conversation section please?
Om
LikeLike
Hello there,
I’m not able to increase the width of the content section in this theme… Can you help me out in this?
LikeLike
HI Gautam
are u using wrodpress.com free site? or u have your own domain and hosting?
let me know
OM
LikeLike
Thanks for all those custom css modifications, they might come in handy. I have a simple “small business” site built on twenty eleven + child theme that needs to be updated. I’m new to Twenty seventeen but from trying it out it i kinda like it, it is more “business oriented” then earlier themes i think. So im about to move the 2011 to 2017 but i can not understand why 2017 seems to have only two footer widgets instead of the “normal” three footer widgets. They are also left-centered and leaves empty space to the right and does not look good when you view it on a pc-screen. Or is it just me not getting it it or have technical problems?
LikeLiked by 1 person
Thanks..actually it is twenty seventeen theme’s design…but if you want..i can help to add 3rd footer widget section
Om
LikeLike
Hi Om,
Thanks so much for the details and inquiries, they have really helped me a lot. Quick question in regards to the navigation bar. Once I increase the Twenty Seventeen content width (as answered on Question #6), the content doesn’t align with the pages listed on my navigation bar. If you take a look at my site, you will notice that the Blog, About sections are shifted over to the right, which is not aligning with the rest of my site. Do you have the proper CSS code I need to shift the elements more to the left to put them in alignment? Many thanks in advance!
-Lawrence
LikeLiked by 1 person
And another item just popped up as I checked my iPhone! When I increase the content width, the posts look super smashed on my mobile device. Do you know what media queries I can use to ensure that it looks good on a mobile platform as well? Thanks!
LikeLike
For mobile to make the content section wider…try this code
@media (min-width: 240px) and (max-width: 560px) {
#primary {
width: 100% !important;
}}
Om
LikeLike
Hi Lawrence
would u mind to try this please
@media (min-width: 980px) and (max-width: 1190009px) {
.navigation-top .wrap {
max-width: 1145px;
}}
Om
LikeLike
Hey Om, thanks for helping out with the issues above. I have two additional questions:
(a) When you made the post page full width as you did in Question 7, do you know of a way to instead make the width around 80%, but have everything centered? It seems to keep pushing my content over to the left instead.
(b) Is there a way I can individually target images specifically within the post page and set their max widths to a certain pixel or % amount? Also, what exactly is the pixel maximum for a full width post in this theme?
Thanks in advance for your help!
LikeLike
Hi Lawrence..
thanks..sorry for the late reply
as per your question a,
would u mind to check this code please
.single-post .wrap {
max-width: 80% !important;
text-align: center !important;
}
Question b,
every single page u can target, but for this you need good knowledge about CSS, or need to take help someone like me 🙂
Om
LikeLike
is it possible to move the top menu so that it is over the bottom part of the header image, with a transparent background?
many thanks for all your good tips
-jack
LikeLiked by 1 person
just answered my own question. i edit the site-branding.php file to insert the top menu php. then remove same from the header. of course when the theme updates all will be lost. don’t know if can put those php files in a child theme! but it looks real nice for now.
LikeLike
thats great Jack 🙂
nice to know you solved it
Om
LikeLike
Hello, thank you for your guidance.
I wanted to remove the headers from WordPress Twenty Seventeen, and using your recommended CSS code worked well:
.page .entry-header {
display: none;}
However, using this code also removed all of the titles from the blog post entries under “Blog” when you scroll down from the Home page. I would like these blog titles to remain rather than disappear.
Is there an easy way to fix this? Thank you.
LikeLike
Hi
thanks
use the code u shared, and then use this code
.blog header.entry-header {
display: block !important;
}
let me know if it helps
Om
LikeLike
Thank you for your quick reply. Unfortunately, adding that code did not change anything. The three blog entries that appear when you scroll down still don’t have their titles (they do have these titles when I just click on the “Blog” link. So it seems to have something to do with the scrolling function perhaps.
LikeLike
Would you mind to try this?
.home .recent-posts .entry-title {
display: block !important;
}
LikeLike
YES! That worked perfectly! Thanks VERY much!
LikeLike
Pleasure 🙂
LikeLike
Hi Om – I installed a mailchimp plugin. I want it to display with a sign-up field centred on the header image. (Currently, it’s in the sidebar down below as a link.)
Also want to remove the “Post” title and have the post at full page width. Can you help?
LikeLike
Hi Neluka
thanks
actually it will need to modify the theme file…only css cant help
Om
LikeLike
Hello, what do I need to do so that the header image and size on the homepage shows up exactly the same on all the pages?
LikeLike
HI Sherry
would u mind to share me the site url you are working on please?
Om
LikeLike
HI Sherry
would u mind to share me the site url you are working on please?
Om
LikeLike
Hi there, Amazing site – I would also like to know the answer to Sherry’s question. There’s a lot of advice on the WordPress.org forums, but nothing gives me the ability to change the other pages (apart from my home page) to have the same heading. I’ve created a video that I uploaded, but can’t put this into the other pages of the site. I’d like it to be the same. Or alternatively – what would actually be better is to only have the menu at the top (which I’ve already done through your advice and then delete header on all the other pages apart from the home page. That way I can insert a revolution slider and have separate images (slides) on each page. Can you maybe assist? This is not for my own page, but for a friend of mine that needs this.
LikeLike
Hi Sunet
for the issue please contact me in my fiverr profile
Om
LikeLike
How would I change the selected page in the menu to bold (or other color) in the dark theme? Thanks!
LikeLike
HI
thanks
would u mind to share me the site url to check and let me know the menu u want to make bold
Om
LikeLike
Sure thing. E.G. https://vandewaetere.be/wedding/ I would like to be able to see that the wedding page is selected in the upper menu. Thanks!
LikeLike
Hi
please check this
#menu-item-130 {
background: red !important;
}
this code is applicable for Wedding menu
is that something u r asking?
let me know
OM
LikeLike
Actually, I went for the following:
li.current-menu-item a {
text-decoration:underline;
}
Still not 100% what I was looking for (e.g. not showing blog as selected when selecting a category) but close!
Thanks!
LikeLike
Hi
thanks
you mean, you want the menu Blog to be selected (underlined) when you are viewing a Single Post (blog post) ?
let me know
Om
LikeLike
Hello! I am trying to figure how can I hide in a page a specific footer widget .
Theme bring every time the 2 i have created but I would like hide one and show others.
Thanks,
Fabio
LikeLike
HI Fabio
share me the page url and the footer widget u want to hide from that page
Om
LikeLike
Hi Om,
I was looking for your help on my menu, it has a background, on a tablet screen a white border displays. Can you tell me how to fix this please?
LikeLike
Hi Paula
your site is showing Coming Soon page?
would u mind to make your site Live to let me check?
Om
LikeLike
Sorry, Om…it’s available now.
Thanks
LikeLike
Hi Paula
please try this code
@media (min-width: 760px) and (max-width:1024px) {
.menu {
line-height: 91% !important;
}
}
Om
LikeLike
Amazing! Did the trick.
Thanks
LikeLike
Hi Om, The code for making the header display with a width of 100% and height of auto, doesn’t work. Suggestions?
LikeLike
HI Elizabeth
i just checked your site… and found the header seems ok?
what type of change you need?
let me know
Om
LikeLike
Hi Om, how are you ? Im trying to enlarge the logo in the mobile version of my website:
confreriedusabredor.us
do you know how can I do this?
thanks
Roberta
LikeLike
Hi Roberta
please try this code to make your logo larger for mobile device only
@media (min-width:240px) and (max-width:660px) {
.custom-logo {
max-width: 80% !important;
max-height: 80% !important;
}
}
let me know if it helps
Om
LikeLike
Super !!!! thank you very much !
LikeLike
Pleasure Roberta
would you mind to like my Facebook page please?
https://www.facebook.com/Wordpress-CSS-Tricks-195480307639536/
Om
LikeLike
done !
LikeLike
Pleasure
OM
LikeLike
Pleasure
OM
LikeLike
Hello, I am trying to figure out how to increase the number of blog posts displayed on the blog section of my static page beyond just three (and also include the image in the excerpt too, if possible). My website is: clearancecastlellc.com. Thanks so much for your help!
LikeLiked by 1 person
HI
thanks
are you talking about the “WE HAVE EVERYTHING YOU NEED” section in your homepage?
please let me know
Om
LikeLike
Yes, that’s right…I’d love to be able to show more than 3 posts here but don’t know how to change that or add the associated graphic there (like it is done if you choose the show latest posts option instead of static page). Thanks for your help! 🙂
LikeLike
Hi
have u set featured images for the posts? and also checked Dashboard > Settings > Reading option?
Om
LikeLike
Yes, I’ve done both, but the reading preferences don’t work when you set your main page for static page. It says in the Twenty Seventeen theme specs on WordPress that only 3 posts will be shown and I need to know how to increase that number:
“You can also select your Blog Posts page, and the panel will display your three latest blog posts.” – https://codex.wordpress.org/Twenty_Seventeen
LikeLike
Hi
would you mind to contact me in my fiverr profile?
just contact me instead of purchase…. i need to check the dashboard
Om
LikeLike
Hi, how can I add a link yo my existing image on home site. Its a twentyseventeen theme. Thank You.
LikeLike
HI Alejandro
would you mind to share me your site URL please?
also
would you mind to clarify me the issue some more please? where you want to put the link in image?
let me know
OM
LikeLike
Hi, thank you. My site is not online yet. I have a home image, and want that image to be a link to a seccion of that same website.
LikeLike
Hi Alejandro
so you want the twenty seventeen big header image to be linked to a different url?
let me know
actually it would better for me if i could check your site live too
OM
LikeLike
How do I get the page content title to show up above the content and not to the left of it?
It looks like the page has 3 columns when it should only have two including the sidebar…
LikeLike
Hi Shane
what is your site url?
please let me know
OM
LikeLike
https://www.sandbox.propertunity.co/whats-home-worth/
I’m just trying to make the pages/posts look like regular wordpress pages. Looks like twenty seventeen did some wierd stuff this time…
I also have more custom work on this theme if you are available for hire
LikeLike
Hi Shane
please try this code, let me know if it works
.entry-content {
width: 100% !important;
}
header.entry-header {
width: 100% !important;
display: block;
}
Om
LikeLiked by 1 person
Hi….I want to remove white space above and below the logo…..please help….
LikeLike
HI
share me the site url to check
Om
LikeLike
http://www.cigpa.in
LikeLike
To remove space above and below the logo try this code
.site-branding {
padding: 0em 0 !important;
}
OM
LikeLike
Thanks so much for all of this! It has been very helpful!
LikeLike
Extremely useful and bookmarked for future reference. Thank you.
LikeLike
Hi, Thank you for the wonderful page. It has really helped me out.
I am having an issue with the site header. I have a gray bar across the top of my page. Is there a way to eliminate that?
http://sitesbysarah.com/jennandlucas/
Any help would be greatly appreciated.
LikeLike
Hi Sarah
just checked your site
i am not seeing any grey bar across the top?
can u share me screenshot image which bar you are referring ?
Om
LikeLike
Someone sent me a response and I was able to remove it. Thanks for checking…
LikeLike
Hi Om,
I hope you are well. I’m finally finsihed developing my website but there is one thing I can’t figure out that I hope you can help me with. My website is: smakasnack.com (I have it still in maintenance mode but have deactivated the plugin so you can help me easier.
My menu doesn’t seem to be responsive on iPad or mobile as it’s missing the drop down with arrows and the first category under each menu is not clickable.
Thanks in advance Om.
Best regards,
Cecilia
LikeLike
Hi Cecilia
sorry..i was away for few days to reply my comments properly
i have checked your site and seems you already solved the issue?
Om
LikeLike
Hi Om,
No worries, I hope you had a nice time away!
It’s still an issue unfortunately so I was hoping you could help me with the CSS code?
The ipad version is almost the way I want both the mobile and ipad versions to look like. It shows the grey colour when hovering – but only on the categories that don’t have a drop-down menu and I would like all the categories in the menu to have the grey hover effect. It also shows the drop down menu for the categories that have it but only when you click far to the right – so if I can add an arrow there to indicate to the customer where to click to see the drop down menu.
There are two other things that I haven’t find a solution to as to yet for my website;
In my Woocommerce shop, I have a widget/sidebar – I would like the products listed there to be in another colour (green) when you are at the page for that product (tells you which product you are looking at). Is this possible with CSS?
Also, the colour of the pre-written texts in the different boxes when filling out the billing details is black and I would like to change it to grey #767676. I have managed to change to grey when you fill out the details but I would like the pre-written text to be the same. Is this possible with CSS?
Thanks, Om.
Best regards,
Cecilia
LikeLike
Hi Cecilia
it would better if you kindly contact me in my fiverr profile regarding your issue
Om
LikeLike
Good day Om,
Thanks for this great post!
Wondering if there’s a way to have a logo in the navigation at all? On the left hand side that is.
I’ve just set up the theme (http://2017.lbsafricaclub.org), moved the nav bar to the top and fixed it there with the following code:
@media (min-width: 760px) {
.navigation-top {
position: fixed;
top: 0px;
width: 100%;
height: 70px;
}
}
@media (min-width: 760px) {
.custom-header {
position: relative;
padding-top: 70px;
}
}
Any help would be truly appreciated!
Best
Matthias
LikeLike
Hi Matthias
sorry for the late reply
please try this code and let me know if it helps
.menu-image-title-hide.menu-image-not-hovered {
padding: 0px !important;
}
.menu-item a img {
width: 56%;
}
OM
LikeLike
Hello Om,
Not late at all! Thanks so much for your help, you’re a star!
You don’t happen to know how to decrease the space between logo and the first link in the navigation by any chance? This is just a ‘nice to have’, don’t worry if not.
Thanks again!
LikeLike
Hi Matthias
it seems problematic to do that using css…
i need to check dashboard for this
Om
LikeLike
Not a problem at all Om, please do not worry.
All the best!
LikeLike
Hello Om,
I sent you a message this morning, but in the mean time I changed my real site, so here is the site you can see (popfashionworld).
I have another question as well. Is it possible to change the colour of the item price ?
Thanks a lot !
I already found a lot of answers on your site.
Kind regards, Maaike
LikeLike
Hi Maaike
would you mind to share me the page url where you want to change item price?
Om
LikeLike
Hi Om,
When I just looked, the prices stayed black all the time. It probably only was in the test version of my site, I didn’t check again. I am so sorry !
But I have another question regarding the same page (http://popfashionworld.nl/tops/truien/). The text below the pictures is all in caps, can I change that to normal text?
Thank you,
Maaike
LikeLike
Hi Maikee
to make the text of titles to be normal (not capitalize)
try this code
.woocommerce-loop-product__title {
text-transform: none !important;
}
and to change the price color try this code
.woocommerce-Price-amount.amount {
color: red !important;
}
let me know if that helps
Om
LikeLike
Hello again Om,
I see now my earlier question was not posted.
I installed Simple Custom CSS in order the change the site-title font family, but it doesn’t work. I can change size, colour etc, but not the font. Do I have to install a fontfamily separately?
I used this code (copied from this site):
.site-title, .site-title a {
color: white !important;
font-family: helvetica, cursive; !important;
font-size: 36px !important;
}
Thanks,
Maaike
LikeLike
That code should work Maikee, have u pasted the code properly in simple custom css plugins?
let me know
Om
LikeLike
Hi Om,
It works ! Thank you so much for your help. Now I am finally happy with my site :).
Kind regards, Maaike
LikeLike
Pleasure Maikee 🙂
LikeLike
Hi Om,
Thank you so much for all the codes – I’ve used most of them and they work perfectly.
I have two questions I can’t find answers for and i’ve tried a lot of codes without success.
1) I wish to have the post date & author info BELOW the post title not above and nothing seems to work.
2) I can’t seem to be able to change the font size and color of tags and category at the end of each post.
I’ve tried various coding combinations for both but no luck yet.
Can you help?
Thank you
LikeLike
Hi
sorry for the late response
would u mind to tell me the site url please?
Om
LikeLike
Hi
would u mind to share me that post url please?
Om
LikeLike
Hi Om,
Here it is : http://herperfectmess.com/2017/08/05/on-adulting/
LikeLike
Hi,
try this code to change font size and color of tags and category at the end of each post
.cat-tags-links a {
font-size: 11px !important;
color:red !important;
}
let me know if it helps
Om
LikeLike
Hi Om the code you gave me worked, thank you 🙂
Now how would I get the post date & author info (in pink on the link I showed you) below the post title not above? I’ve tried a couple of things but can’t seem to get right.
Also: one last thing; I’d like to display the number of comments per post on the homepage beside the title (a little like yours only next to the title°, how can I do that?
Thank you so much for your help!
LikeLike
Thanks
to show the post date and author below the post title…needs to modify the theme file…only css cant help
Om
LikeLike
Thank you, I figured it out by changing the php code 🙂
LikeLike
Thanks for this post! So helpful! However Ive been trying some css customization on the header and im running out of wits and google results. Can you you help my non-responsive header image pls? On iphone, the site title looks too big and overlaps other contents. Can you pls check out https://thewanderwalkers.com? thank you
LikeLike
Hi Jonai
just checked your site …and found your site title is looking Ok in mobiles? have you already solved the issue? please let me know
Om
LikeLike
Hi Om, that’s because for the mean time I resorted to the theme’s default… But if you would look at the mobile version, the header is too tall, eating a lot of space in the home page. I did the code suggested here, https://wordpress.org/support/topic/mobile-header-image-doesnt-resizeunresponsive/ but as the mod mentioned, there would be a gray space below. Is it possible to make the header image smaller without having gray space below? 🙂 Thanks
LikeLike
Hi Jonai
actually it would better if i could see the issue in your site… otherwise i cant help u properly
OM
LikeLike
Hi OM, the site now shows the error because i added the code below. Hope you have a solution 😀 Thankkkksss
@media screen and (max-width: 480px) {
.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: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}
}
LikeLike
Hi JOnai
please try this css code for your header image responsive image issue for twentyseventeen theme
@media screen and (min-width:240px) and (max-width:560px) {
.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {
max-height: 168px !important;
}
.has-header-image.twentyseventeen-front-page .site-branding, .has-header-video.twentyseventeen-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding {
top: 0px !important;
}
}
let me know if it works
Om
LikeLike
It’s amazing! Although when i resize my laptop browser a little smaller, the grey under the header image still appears but it disappears when the browser becomes very small. But if there’s no solution for that, then i give up. hehe thank you so much!
LikeLike