kaxigt.com

Jag skriver om webben för webben

WordPress: Twenty Nineteen Tweaks

Postad: 3 april 2021 | Wordpress | No Comments
Lästid: 2 minuter
Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil

Square Logo

.site-logo .custom-logo-link {
border-radius: 0;
}

Menu Separator

#menu li:not(:last-child):after {
content: "|";
padding-right: 5px;
color: #000;
}
.site-header.featured-image #menu li:not(:last-child):after {
	color: #fff;
}

Overlay Opacity

.site-header.featured-image {    
    opacity: 0.9;
}

Dark Filter Opacity

.site-header.featured-image:after {
opacity: 0.8;
}

Add Category Descriptions

Twenty Nineteen exekverar koden så du får två rader, dels titeln att det är kategorisidan man befinner sig på, dels namnet på själva kategorien.

För att snygga till det så enbart namnet på kategorin visas, och att den dessutom inte blir klickbar som länk, kan du följa detta exempel. Obs! Du kan ändra description till att bli något annat än ett blockcitat. Det står dig fritt.

Kopiera archive.php och spara som category.php. Leta dig fram till the_archive_title().

the_archive_title( '
<h1 class="page-title">', '</h1>
' );

Ersätt till detta

// print the categry title without a link
foreach((get_the_category()) as $category){
  echo '
<h1 class="page-title">' . $category-&gt;name . '</h1>
'; } // print the category description the_archive_description('
<blockquote class="wp-block-quote">', '</blockquote>
');

Reduce the height of the featured image

.site-header.featured-image {
min-height: 70vh;
 }

Remove the margin underneath featured image

.site-header.featured-image {
 margin-bottom: 0rem;
}

Change site title, font color, font size and font family

.site-title a {
color: changed_to-yours !important;
font-size: 2.5rem;
font-family: cursive !important;
}

Change font size, font weight, color and font family of site description

.site-description {
color: changed-to-yours !important;
font-weight: normal;
font-family: cursive !important;
font-size: 21px !important;
}

Change Menu items, font size, weight, color and font family (parent items)

.main-navigation .main-menu &gt; li &gt; a {
font-weight: 700;
font-size: 14px !important;
color: changed_to_yours !important;
font-family: cursive !important;
}

Change sub-menu down arrow font color

span.submenu-expand {
color: darkred !important;
}

Change Menu items hover color (parent items)

.main-navigation .main-menu &gt; li &gt; a:hover, .main-navigation .main-menu &gt; li &gt; a:hover + svg {
color: blue !important;
}