Sketch is a responsive portfolio theme, perfect for showcasing your creative talent, whether it be illustration, design, or photography. The theme’s clean, light design puts the focus on your projects.
You can Download Sketch Artwork theme by Automattic from here.
Demo of Sketch theme by Automattic.
You can ask question regarding any issue you are facing.
Or can take my personal help.
1.How to change font size, family and color of site title in theme sketch By Automattic
.site-title, .site-title a {
font-size: 28px;
color: darkred !important;
font-family: !cursive important;
}
*** to change hover color of site title
.site-title a:hover {
color: green !important;
}
2. If you want to change menu colors like hover color, selected menu color, font size, font family etc
*** to change top menu items hover color
.main-navigation li:hover > a {
color: green !important;
}
*** to change top menu items font size,color and font family in theme sketch by Automattic
.main-navigation a {
color: black !important;
font-size: 14px !important;
font-family: !cursive important;
}
**** to change current page item menu color
.current_page_item a, .current-menu-item a {
color: blue !important;
}
**** if you want to use a background and bold style for selected or current menu item like the screenshot below
.current_page_item a, .current-menu-item a {
color: white;
font-weight: bold !important;
background: darkred;
padding: 5px 12px 5px 12px !important;
}
*** current menu items hover font color
.current_page_item a:hover {
color: white !important;
}
*** to show the site title top centered and navigation menu below it centered like the image attached
#site-navigation {
display: block;
margin-left: auto !important;
float: none !important;
margin-right: auto !important;
width: 42% !important;
max-width: 100% !important;
}
.site-branding {
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
float: none;
text-align: center;
}
/******* Top Featured Slider Modifications ********/
*** To change slider blackish title background color and to make it full width
.flexslider .entry-header {
width: 100% !important;
max-width: 100% !important;
background: rgba(251,51,51,.7);
}
*** to make the featured slider rotating title centered
.flexslider .entry-header h1 {
text-align: center;
}
*** to make the featured slider date also to be centered
.flexslider .entry-header .entry-meta {
text-align: center !important;
}
**** to remove the date from featured slider
.flexslider .entry-header .entry-meta {
display: none !important;
}
/******** HomePage Portfolio Project section Modifications *********/
*** To change the homepage portfolio titles font size, color and font family
.home .jetpack-portfolio .entry-title a {
color: darkred !important;
font-size: 19px !important;
}
*** To change the hover color of homepage portfolio titles
.home .jetpack-portfolio .entry-title a:hover {
color: green !important;
}
*** To show 4 portfolio instead of 3 like the image attached
.home .projects.clear article {
width: 23.5% !important;
}
.home .projects.clear article:nth-of-type(3n) {
clear: none !important;
margin-right: 2% !important;
float: left !important;
}
.home .projects.clear article:nth-of-type(3n+1) {
clear: none;
margin-left: 0px !important;
margin-right: 2% !important;
}
.home .projects.clear article:nth-of-type(4n) {
clear: none !important;
margin-right: 0px !important;
float: left !important;
}
/********* Blog / Archive / Tags / Category Page Modification ************/
*** To reduce gap between blog posts in blog / archive page
.blog article,.archive article {
margin-bottom: 12px !important;
padding-bottom: 12px !important;
}
.blog article p ,.archive article p {
margin-bottom: 12px !important;
}
*** To change font size, color, font family of post titles in blog / archive page
.blog .entry-title a,.archive .entry-title a {
font-size: 17px !important;
color: darkred !important;
font-family: !cursive important;
}
*** To change hover color of blog / archive posts title
.blog .entry-title a:hover,.archive .entry-title a:hover {
color: green !important;
}
*** To change font size, color and font family of Continue Reading in Blog / Archive pages
.more-link {
color: darkred !important;
font-size: 18px !important;
font-family: !cursive important;
}
*** To give Continue Reading a button shaped with choiceable background like the image attached
.more-link {
color: white;
font-size: 18px !important;
font-family: !cursive important;
background: darkred;
padding: 12px;
}
/********** Sidebar / Widget section Modification *************/
*** To change widget title font color, font size and font family
.widget-title {
font-size: 1.25em;
color: darkred !important;
font-family: cursive !important;
}
*** to use background color in widget title and make the title centered and also to reduce gap between widget title and widget contents (see the image below)
.widget-title {
color: white;
font-family: cursive !important;
background: darkred !important;
padding: 12px;
text-align: center;
margin: 0px !important;
margin-bottom: 0px;
font-size: 17px;
margin-bottom: 12px !important;
}
*** To change link color,font family and font size in widget section
.widget a {
color: darkred;
text-decoration: none;
font-size: 15px;
font-family: cursive;
}
*** How to change footer copyright and company info and also the Year
Answer: Go to dashboard, then Appearance > Editor (theme editor). Follow the screenshot below ( you have to edit the red bordered area)
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….
