Customize Twenty Twenty One Theme

by Engr Kh Mashiur Rahman | May 24, 2022 | IT Web Host

Customize Twenty Twenty One Theme

Change Header Color Size (Twenty Twenty One)

header#masthead {
max-width: 100% !important;
padding-left: 10%;
padding-right: 10%;
background: red !important;
padding-bottom: 2%;
padding-top: 2%;
}

header#masthead {
    max-width: 100% !important;
    padding-left: 10%;
    padding-right: 10%;
    background: #D34F73FF; !important;
    padding-bottom: 2%;
    padding-top: 2%;
}

header#masthead .site-title, header#masthead .site-title * {
    color: #ffffff !IMPORTANT;
    font-size: 27px;
    !important;
}
.site-description {
    color: #ffffff !IMPORTANT;
    font-size: 17px;
    !important;
}

@media only screen and (min-width: 482px){
.primary-navigation .primary-menu-container > ul > .menu-item > a {
    color: #ffffff !important;
    font-size: 18px !IMPORTANT;
   !important;
}
}

@media only screen and (min-width: 482px){
.primary-navigation .primary-menu-container > ul > .menu-item > a:hover {
    color: blue !IMPORTANT;
}
}

footer#colophon {
    clear: both;
    width: 100% !IMPORTANT;
    max-width: 100% !important;
    padding-left: 10% !important;
    padding-right: 10% !important;
	  background: #32373C;
	  padding-bottom: 0%;
    padding-top: 0%;
}

.site-info .powered-by {
  margin-top: initial;
  margin-right: auto;
	color:white;
}

.powered-by a {
    color: blue !IMPORTANT;
}

.site-name {
	color:white;
}

.entry-content a
{
	color:blue;
}

.ref {
	color:red;
}
/* Author Image */
.author-bio.show-avatars .avatar {
    display: none;
}

Additional CSS for Hadisquran

/*Fonts for p td */
 
@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');

p, td{
font-family: 'Amiri', serif;
		line-height:2;
}

.fnp {
	line-height: 2.1em;
	font-size: 40px;
font-family: 'Amiri', serif;
}

.fntd {
font-family: 'Amiri', serif;
}

.ref {
color: #008856;
}

.son {
color: #B551E0;
}

/* Header Background */
header#masthead {
   /* max-width: 100% !important;*/
    padding-left: 10%;
    padding-right: 10%;
    background: #666633; !important;
    padding-bottom: 2%;
    padding-top: 2%;
}

/* Header Site Title */
header#masthead .site-title, header#masthead .site-title * {
    color: #ffffff !IMPORTANT;
    font-size: 27px;
    !important; 
} */

/* Header Site Description */
.site-description {
    color: #ffffff !IMPORTANT;
    font-size: 17px;
    !important;
} */

/* Primary Navigation*/
@media only screen and (min-width: 482px){
.primary-navigation .primary-menu-container > ul > .menu-item > a {
    color: #ffffff !important;
    font-size: 18px !IMPORTANT;
   !important;
}
}

/* Primary Navigation Hover 
@media only screen and (min-width: 482px){
.primary-navigation .primary-menu-container > ul > .menu-item > a:hover {
    color: blue !IMPORTANT;
}
}

/* Footer */
footer#colophon {
    clear: both;
    width: 100% !IMPORTANT;
    max-width: 100% !important;
    padding-left: 10% !important;
    padding-right: 10% !important;
	  background: #666633;
	  padding-bottom: 0%;
    padding-top: 0%;
}

/* Footer Credential */
.site-info .powered-by {
  margin-top: initial;
  margin-right: auto;
	color:white;
}

/* Footer Credential link Colour */
.powered-by a {
    color: blue !IMPORTANT;
}

/* Site Name */
.site-name {
	color:white;
}

/* Body Link Color */
.entry-content a
{
	color:blue;
}

/*
.ref {
	color:red;
}
*/

/* Author Image */
.author-bio.show-avatars .avatar {
    display: none;
	

Change Header Font Color