Button 2 is a theme that’s as cute as its name. With detailed accents, featured images, and a soft color palette, Button 2 is perfect for crafters and designers. So, if you want to show your Craft and Design related work in a website, then this wordpress theme is for you. You can use it for free. You can see the Demo of Button2 theme.
Download Button2 Theme by Automattic Parent Theme
Download Button 2 by Automattic Child Theme
I have shared some css customization process of Button2 theme.You can use the codes i shared to give it a new look of your own. Also you can ask question regarding any issue you are facing in comments section.
Or can take my personal help.
To change Dashed border of menus thickness and color like the screenshot
@media screen and (min-width: 40.063em)
{
.main-navigation {
border-top: 2px dashed darkred !important;
border-bottom: 2px dashed darkred !important;
}
}
To Use a background color behind menu container
nav#site-navigation {
background: green !important;
}
To change menu items hover font color and visited color
@media only screen and (min-width: 40.063em){
.main-navigation a:hover, .main-navigation a:visited:hover {
color: darkred !important;
}}
To change menu items color, font size and font family
@media only screen and (min-width: 40.063em){
.main-navigation a {
color: white !important;
font-size: 14px !important;
font-family: cursive;
}
}
To change sub menu item container background color
@media only screen and (min-width: 40.063em){
.main-navigation ul ul {
background: green !important;
}}
To change font size, color and font family of Site title
.site-title a, .site-title a:visited {
color: darkred !important;
font-size: 33px;
font-family: cursive !important;
}
If you want to use a background image just behind the Header (instead of site title and Tagline / Site Description)
header#masthead {
background: url(https://defaultcustomheadersdata.files.wordpress.com/2016/07/blur.jpg);
background-size: 100% !important;
}
.site-branding {
visibility: hidden;
}
*** Blog / Archive / Tag / Search page modification***
To change category links font color, size and font family
span.cat-links a {
font-size: 15px;
color: darkred;
font-family: cursive !important;
}
To change font size, color and font family of post titile
.entry-title, .entry-title a {
font-size: 23px;
color: darkred;
font-family: cursive;
}
If you want to use a background color just behind post title and give it a different look like the screenshot
.entry-title {
background: darkred;
color: white;
padding-top: 12px;
padding-bottom: 12px;
}
.entry-title a {
color: white !important;
}
.entry-title:after{display:none;}
To change font size, color,font family and text alignment
.entry-content {
color: black !important;
font-size: 15px;
font-family: cursive;
text-align: justify;
}
To change Widget title font color, font size, font family and font style
.widget-title {
width: 100%;
font-size: 24px;
font-style: italic;
color: darkred;
font-family: cursive;
}
To use background color behind widget title and to make the widget title centered
h1.widget-title {
background: darkred;
padding: 12px;
color: white;
text-align: center;
font-style: normal;
}
To change widget links font size, color and font family
.widget a {
color: darkred !important;
font-size: 16px;
font-family: cursive;
}
To change widget links hover color
.widget a:hover {
color: green !important;
}
To change headers like h1,h2,h3, h4, h5 and h6 font family, font weight, font style and color
h1, h2, h3, h4, h5, h6 {
font-family: cursive;
font-weight: 600;
font-style: italic;
color:black;
}
If you want to remove the text “Previous Post” and “Next Post” text (not the post titles)
.nav-links .meta-nav {
display: none !important;
}
If you want to change only the text “Previous Post” and “Next Post” font size, color and font family
.nav-links .meta-nav {
font-size: 12px !important;
color: darkred;
font-family: cursive;
}
If you want to change font size, color and font family of Previous and Next Post titles
.nav-links a {
color: blue;
font-size: 17px;
font-family: cursive;
font-style: normal;
}
If you want to change hover color of Previous and Next post titles
.nav-links a:hover {
color: green;
}
If you want to change Older Post button outline color, background color and border color
#primary #infinite-handle span button {
outline-color: darkred;
background: green !important;
border-color: yellow !important;
}
If you want to change Hover color of Older Post button
#primary #infinite-handle span button:hover {
background: darkred;
outline-color: darkred;
}
If you want to change font size (it will make the button bigger also) , color and font family of Older Post text
#primary #infinite-handle span button {
font-size: 16px !important;
color: blue;
font-family: cursive;
}
If you want to change footer copyright info or Proudly Powered By WordPress in Publication 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
© 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….
