Theme Illustratr by Automattic a minimalist portfolio theme: Modification of Header, footer, space, font, sidebar, content, images using css and documentation

Theme Illustratr by Automattic is a minimalist portfolio theme that helps to create a strong but beautiful online presence. It is primarily created for designers and photographers, it is a simple, powerful, and flexible theme. Here I have shared some css styling using which you can reshape the theme with your own style.

You can see the original demo of Theme Illustratr by Automattic.

Download Theme Illustratr by Automattic to use it in your own hosting.

You can ask question regarding any issue you are facing.

You can take my personal help in skype : om2000_cuet

*** Question 1: To change font size, color and font family of top site title

.site-title a {
font-family: !cursive important;
font-size: 30px !important;
color: darkred !important;
}

*** Question 2: To change font size, color and font family of site description / tagline of Theme Illustratr by Automattic

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

*** Question 3: If you want to reduce gap just above the top of site title of Theme Illustratr by Automattic

#masthead {
padding-top: 10px !important;
}

/**** Top Menu Modifications ****/

*** Question 4 : To change current or selected menu’s font color

.main-navigation ul .current_page_item > a, .main-navigation ul .current-menu-item > a {
color: darkred !important;
}

*** Question 5 : To change font size, color and font family of menu link items

.main-navigation ul li a {
font-size: 14px !important;
color: blue !important;
font-family: cursive;
}

*** Question 6 : To change menu items hover font color of menu items

.main-navigation ul li a:hover {
color: darkred !important;
}

*** Question 7 : To change drop down menu light grey border color to a different one

.main-navigation ul ul {
border: 1px solid darkred !important;
}

*** Question 8 : To change drop down menu / sub menu item separator color to a different one

.main-navigation ul ul li {
border-bottom: 1px solid darkred !important;
}
.main-navigation ul ul li:last-child
{
border-bottom:0 !important;
}

/**** Blog / Archive / Category / Tage Page Modifications ****/

*** Question 9 : To reduce gap between posts in Blog page, tag or archive pages

.page-header + .hentry, .hentry + .hentry {
padding-top: 20px !important;
margin-top: 10px !important;
}

.entry-meta {
margin-top: 0px !important;
}

*** Question 10 : To change font size, color and font family of Blog / tag / archive page contents

.blog .entry-content, .archive .entry-content {

color: black !important;
font-size: 16px !important;
font-family: !cursive important;

}

*** Question 11 : To change color of separator showing below the post title of Blog / tag / archive pages

.page-header::after, .entry-header::after {
background: darkred !important;
}

/**** Single Post Modifications ****/

*** Question 12 : To reduce gap between Single Post Content and Comments Section

.comments-area, .comment-list + .comment-respond {
padding-top: 11px !important;
margin-top: 11px !important;
}

*** Question 13 : If you don’t want to show comments date in post comments section

.comment-meta-time {
display: none;
}

*** Question 14: If you want to change font size, color and font family of comments Author

.comment-meta .fn a {
color: darkred !important;
font-size: 15px;
font-family: !cursive important;
}

*** Question 15: If you want to change font size, color and font family of comments text

.comment-content p {
font-size: 17px !important;
color: black !important;
font-family: !times new roman important;
}

*** Question 16: If you want to reduce gap between two comments

.comment-content p {
margin-bottom: 0px !important;
}
li.comment {
margin-top: 0px !important;
margin-bottom: 44px;
padding-top: 8px !important;
padding-bottom: 1px;

}

/**** Footer Modifications ****/

*** Question 17: If you want to change footer background color

.site-footer {
background: darkred !important;
}

*** Question 18: If you want to change footer copyright info font color, font size and font family

.site-footer, .site-footer * {
font-size: 18px !important;
color: white !important;
font-family: !cursive important;
}

*** Question 19: How to change footer copyright info in Illustratr theme by Automattic

Go to your dashboard. Then Appearance > Editor > footer.php . Please check the screenshot for better understanding and use the code i shared below the screenshot to change copyright info

Use this code below

				© Copyright 2018 or 2019
				<span class="sep"> | </span>
                Message about your company

If you have any issue feel free to ask me question here in comments section
OR
You can take my personal help in skype : om2000_cuet
Like this post?
Tweet
Email
WhatsApp
Print
Like this:
Like Loading...


	
Related