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

Leave a Reply

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