Custom WordPress Twenty Seventeen

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

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

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

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

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

 

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

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

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

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

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

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

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

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

twenty seventeen proudly powered by wordpress modification

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

twenty seventeen gap reduction

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

#content {
padding-top: 35px;
}

 

Question 6 : How to increase Twenty seventeen content section width

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

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

 

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

#primary {
width: 70% !important;
}

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

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

twenty seventeen content and sidebar width increase

 

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

 

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

.single-post #primary {

width: 100% !important;
}

twenty seventeen sidebar remove full width post

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

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

 

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

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

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

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

 

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

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

 

twenty seventeen category page modification

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

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

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

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

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

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

}

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

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

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

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

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

#comments {
display: none !important;
}

Twenty Seventeen footer section background

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

#colophon {
background: darkred;
}

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

 

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

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

twenty seventeen widget title background and centralize title

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

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

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

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

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

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

button background color twenty seventeen

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

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

more info see      https://allaboutbasic.com

Twentyseventeen WordPress Simple And Powerfull

Beautiful designs, powerful features, and the freedom to build anything you want. WordPress is both free and priceless at the same time.

Meet WordPress

WordPress is open source software you can use to create a beautiful website, blog, or app.

Trusted by the Best

27% of the web uses WordPress, from hobby blogs to the biggest news sites online.

Extend WordPress with over 45,000 plugins to help your website meet your needs. Add an online store, galleries, mailing lists, forums, analytics, and much more.

News From Our Blog

WordPress 4.7.2 Security Release

WordPress 4.7.2 is now available. This is a security release for all previous versions and we strongly encourage you to update your sites immediately. WordPress versions 4.7.1 and earlier are affected by three security issues: The user interface for assigning taxonomy terms in Press This is shown to users who do not have permissions to use it.

Get Started with WordPress

Over 60 million people have chosen WordPress to power the place on the web they call “home” — join the family.

Community

Hundreds of thousands of developers, content creators, and site owners gather at monthly meetups in 363 cities worldwide.