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 documentation support and customization

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.

Or can take my personal help.

*** 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;
}

theme illustratr by automattic top site title tagline and gap change
*** 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;
}

theme illustratr by automattic drop down menu border and menu item separator color
*** 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;

}

Blog archive and Tag page modifications

*** 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;
}
single post comment section modification wordpress

*** 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

footer copyright info modification

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

Pay me some, I will help you for CSS Issue Personally CLICK HERE….

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

%d bloggers like this: