WordPress Tricks

Theme Monet By Pro Theme Design: Customization of Header, footer, fonts , color and More

If you are a Creative Photographer then wordpress theme Monet is for you. Monet is a delicate responsive grid-layout theme targeted at photographers and other creatives. Here I am sharing you some css tricks using which you can modify the header color, fonts, font family and more. If you have any Question feel free to ask in comment section.

To change font size, color and font family of Header title in homepage

.main .post-archive article h2.entry-title {
    font-size: 26px !IMPORTANT;
    color: white !IMPORTANT;
    font-family: cursive !important;
}

To Change the font size, color and font family of Post date

.post-meta-data, .post-meta-data * {
    font-family: 'Open Sans',sans-serif !IMPORTANT;
    text-transform: uppercase;
    letter-spacing: .04em;
     font-size: 17px !IMPORTANT;
    line-height: 1.3333rem;
    color: white !IMPORTANT;
}

If you want to remove the dark shade ( images not showing their clear view) in image view

.main .post-archive article.post-has-thumbnail .thumbnail {
    opacity: 1 !important;
 }

To change the hover background color of post block in homepage (like the screenshot above)

.main .post-archive article.post-has-thumbnail .entry {
     background: rgba(240, 150, 150, 0.8) !important;
   }

To change the Site Title and Site Description font size, color and font family

h1.site-title a {
    color: red !IMPORTANT;
    font-size: 29px !IMPORTANT;
    font-weight: bold !IMPORTANT;
    font-family: cursive !IMPORTANT;
}

p.site-description {
    font-size: 23px !important;
    color: darkred !IMPORTANT;
    font-family: cursive !IMPORTANT;
}

To change menu items font size, color and font family + the hover color

.masthead .menu a {
    color: black !IMPORTANT;
    font-size: 19px;
    font-family: cursive !IMPORTANT;
}
.masthead .menu a:hover {
    color: red !IMPORTANT;
}

To change right side social icons color + Hover color

#minor-sidebar .menu-social-links a:before {
    color: darkred !important;
    border-bottom: 1px solid darkred !important;
}

#minor-sidebar .menu-social-links a:hover:before {
    color: blue !important;
}

If you want to change the top hidden widget bar background + link and text color

.sidebar.sidebar-main * {
    color: white !IMPORTANT;
}
.sidebar-main {
    background: darkred !important;
     
}

To change the top hidden widget title font size, color and font family

.sidebar .widget h3.widgettitle {
    font-family: cursive !important;
    text-transform: uppercase;
    color: white !IMPORTANT;
    opacity: 1 !important;
    font-size: 23px !IMPORTANT;
    line-height: 23px !IMPORTANT;
}

If you want to change font size, color and font family of archive title

.entry-archive-header .entry-archive-title {
    font-size: 33px !important;
    line-height: 5.3332rem;
    text-align: center;
    color: darkred;
    font-family: cursive;
}

If you want to use your own background color and text color in archive title like the above screenshot

header.entry-archive-header * {
    color: white !IMPORTANT;
}
header.entry-archive-header {
    background: darkred !important;
}

If you want to change font size, color and font family of single post content

.single-post .entry p {
    font-size: 16px !important;
    color: black !IMPORTANT;
    line-height: 24px;
    font-family: cursive !IMPORTANT;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s