WordPress: Twenty Seventeen Tweaks
Postad: 3 februari 2020 | Wordpress | No Comments
Lästid: 5 minuter
Temat Twenty Seventeen skiljer sig avsevärt från tidigare teman. Header fyller hela skärmen ned till ”vecket” och navigeringen hittar vi längst ned i header. Det har diskuterats en hel del om det verkligen är bra utifrån ett SEO-perspektiv att placera den där. Tursamt nog så går det utmärkt att flytta den överst om man så vill. Här listar jag en del finurliga knep att tweaka Twenty Seventeen, och som jag tidigare har skrivit så rekommenderar jag att du använder ett barntema för med varje uppdatering av modertemat försvinner annars dina förändringar.
Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att göra en backup av din stilmall och funktionsfil innan du gör det.
Change Header image on computer screen
/*To change the height of the header image*/
.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
height: 1200px;
height: 50vh;
max-height: 100%;
overflow: hidden;}Remove the scroll arrow in navigation bar
@media screen and (min-width: 48em) {
.site-header .menu-scroll-down {display: none;}
}Change the height of the header
/*Computer screen */
@media screen and (min-width: 48em) {
.twentyseventeen-front-page.has-header-image .custom-header-image {
/*height: 1200px;*/
/*height: 100vh;*/
height: 50vh;
/*max-height: 100%;*/
/*overflow: hidden;*/
}
}
/* Mobile screen*/
.has-header-image.twentyseventeen-front-page .custom-header {
/*display: table;*/
/*height: 300px;*/
/*height: 75vh;*/
height: 50vh;
/*width: 100%;*/
}
/* Computer screen with logged in user and admin bar showing on front end*/
@media screen and (min-width: 48em) {
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
/*height: calc(100vh - 32px);*/
height: calc(50vh - 32px);
}
}Change the height of the front page panel images
/* Mobile view*/
.panel-image {
/*background-position: center center;*/
/*background-repeat: no-repeat;*/
/*-webkit-background-size: cover;*/
/*background-size: cover;*/
/*position: relative;*/
height: 25vh;
}
/*Full screen laptop/computer screen view*/
@media screen and (min-width: 48em) {
.panel-image {
/*height: 100vh;*/
height: 25vh;
/*max-height: 1200px;*/
}
}Change the front page panel shaded gradient
.panel-image:before {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+100 */ /* FF3.6-15 */
background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10-25,Safari5.1-6 */
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9)));
background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#E6000000", GradientType=0); /* IE6-9 */
/* bottom: 0; */
/* content: ""; */
/* left: 0; */
/* right: 0; */
/* position: absolute; */
/* top: 100px; */
}Make Twenty Seventeen full width
.wrap {
max-width: 100%; /* your custom width */
}
@media screen and (min-width: 48em) {
.wrap {
max-width: 100%; /* your custom width */
}
}
.page.page-one-column:not(.twentyseventeen-front-page) #primary {
max-width: 100%;
}
@media screen and (min-width: 30em) {
.page-one-column .panel-content .wrap {
max-width: 100%; /* your custom width */
}
}Fullwidth Home Page
@media screen and (min-width: 48em) {
.home .wrap {
max-width: 100%!important;
/* padding-left: 3em; */
/* padding-right: 3em; */
}
}Make a fullwidth template
fullwidth-template.php
<?php /* Template Name: Fullwidth-template */ get_header(); ?>
/* in stylesheet */
body.page-template-page-full-width #primary .entry-header .entry-title {
font-size: 3rem;
font-size: 48px;
}
@media screen and (min-width: 48em) {
body.page-template-page-full-width #primary .page-full-width .entry-content {
width: 100%;
}
body.page-template-page-full-width #primary .page-full-width .entry-header {
width: 100%;
}
body.page-template-page-full-width #primary .entry-header .entry-title {
font-size: 5rem;
font-size: 80px;
}
}Move navigation to top on Home Page – alternative 1
@media screen and (min-width: 48em){
.home .navigation-top {
top: 0;
bottom:auto;
}
}Move navigation to top on Home Page – alternative 2
@media (min-width: 760px) {
.navigation-top {
position: absolute;
top: 0px;
width: 100%;
height: 70px;
}
}
/* the inner page header image may be overlapped, so use this code too */
@media (min-width: 760px) {
.custom-header {
position: relative;
padding-top: 70px;
}
}Modify data CSS tool tip on Home/Front Page
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 150%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
font-weight:100;
font-family:'Oswald', sans-serif!important;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 150%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid #000;
border-top: 5px solid hsla(0, 0%, 20%, 0.9);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/* In template-parts/navigation/navigation-top.php */
<?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && has_custom_header() ) : ?> <a class="menu-scroll-down" href="#content" data-tooltip="here comes your text"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></a><?php endif; ?>Show only logo and tagline – hide site title
/* To hide site title */
.site-title {display: none;}Make logo larger
/* To double logo in size */
.custom-logo-link img {max-width: 700px; max-height: 160px;}Add a header widget area
*/ in functions.php */
function my_widgets_init() {
register_sidebar( array(
'name' => 'Custom Header Widget Area',
'id' => 'custom-header-widget',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>'
) ); }
add_action( 'widgets_init', 'my_widgets_init' );
*/ Code in the header */
<?php if ( is_active_sidebar( 'custom-header-widget' ) ) : ?> <?php dynamic_sidebar( 'custom-header-widget' ); ?> <?php endif; ?>
CSS-example for the header widget area
div#custom-header-widget {
width: 100%;
background-color: #f5f5f5;
border-bottom:1px solid #eeeeee;
text-align: center;
}
h2.custom-header-widget-title {
margin-top: 0px;
text-align: left;
text-transform: uppercase;
font-size: small;
background-color: #feffce;
width: 130px;
padding: 5px;
}Reduce gap just above the content section
#content {
padding-top: 35px;
}Increase content section width
.wrap {
max-width: 1145px;
padding-left: 3em;
padding-right: 3em;
}
#primary {
width: 70%!important;
}
.has-sidebar #secondary {
width: 26%!important;
}Remove sidebar from single post page and make post page full width
.single-post #secondary {
display: none!important;
}
.single-post #primary {
width: 100%!important;
}Move sidebar to the left
@media screen and (min-width: 48em) {
.has-sidebar #secondary {
float: left;
}
.has-sidebar #primary {
float: right;
}
.has-sidebar:not(.error404) #primary {
float: right;
}
}Remove Post date and post author
.entry-meta {
display: none!important;
}Change category name at the top of archive or category page
.archive .page-header h1.page-title {
color:#999!important;
font-size:1rem;
font-size: 16px important;
}Hide or remove the category name at the top of category or archive page
.archive .page-header h1.page-title {
display:none!important;
}Remove Featured image from single post page
.single-post .single-featured-image-header {
display: none!important;
}How to change background color of footer widget
#colophon {
background:#666;
}
#colophon * {
color: white!important;
list-style: none!important;
border: none!important;
box-shadow: none!important;
}Change sidebar widget title’s font color, font size and font family
.widget-title {
font-size: 14px!important;
color: #666!important;
font-family: ;
}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;
}Change submit or other button background color
button, input[type=”button”], input[type=”submit”] {
background-color:#000!important;
}Panel Image
/* Mobile view*/
.panel-image {
/*background-position: center center;*/
/*background-repeat: no-repeat;*/
/*-webkit-background-size: cover;*/
/*background-size: cover;*/
/*position: relative;*/
height: 25vh;
}
/*Full screen laptop/computer screen view*/
@media screen and (min-width: 48em) {
.panel-image {
/*height: 100vh;*/
height: 50vh; /* reduced to 50% height */
/*max-height: 1200px;*/
}
}Centered top menu
#top-menu {
text-align: center;
}Make the menu main not sticky
.site-navigation-fixed.navigation-top {
/* bottom: auto; */
position: relative;
/* left: 0; */
/* right: 0; */
/* top: 0; */
/* width: 100%; */
/* z-index: 7; */
}Make the widget/content areas equal width
/* Footer 1 content */
@media screen and (min-width: 48em) {
.site-footer .widget-column.footer-widget-1 {
/* float: left; */
width: 47%;
}
}
/* Footer 2 content */
@media screen and (min-width: 48em) {
.site-footer .widget-column.footer-widget-2 {
/* float: right; */
width: 47%;
}
}
/* Social icons */
@media screen and (min-width: 48em) {
.social-navigation {
/* clear: left; */
/* float: left; */
/* margin-bottom: 0; */
width: 47%;
}
}
/* Site info (Proudly powered by WordPress) */
@media screen and (min-width: 48em) {
.site-info {
/* float: right; */
width: 47%;
}
}Center the header logo, site title & description
#masthead .wrap {
/* position: relative; */
text-align: center;
}Make the menu width full screen
.navigation-top .wrap {
max-width: 100%;
/* padding: 0; */
}
@media screen and (min-width: 48em) {
.navigation-top .wrap {
max-width: 100%;
/* padding: 0.75em 3.4166666666667em; */
}
}The content and sidebar area full screen
.wrap {
/* margin-left: auto; */
/* margin-right: auto; */
max-width: 100%;
/* padding-left: 2em; */
/* padding-right: 2em; */
}
@media screen and (min-width: 48em) {
.wrap {
max-width: 100%;
/* padding-left: 3em; */
/* padding-right: 3em; */
}
}
.page.page-one-column:not(.twentyseventeen-front-page) #primary {
/*margin-left: auto;*/
/*margin-right: auto;*/
max-width: 100%;
}
@media screen and (min-width: 30em) {
.page-one-column .panel-content .wrap
{
max-width: 100%;
}
}Wider the home post
.blog:not(.has-sidebar) #primary article,
.archive:not(.page-one-column):not(.has-sidebar) #primary article,
.search:not(.has-sidebar) #primary article,
.error404:not(.has-sidebar) #primary .page-content,
.error404.has-sidebar #primary .page-content,
body.page-two-column:not(.archive) #primary .entry-content,
body.page-two-column #comments {
width: 90%;
}