WordPress Tricks

Theme for Crafters and Designers : Button 2 by Automattic. Modifications, support and Customization

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.

Button 2 by Automattic Modifications support and customization css

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

menu border thickness and color change

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

Menu and Sub Menu style modification

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

Button 2 by Automattic use background image instead of site title and description tagline

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

Button 2 by Automattic use background color just behind the post title

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

Button 2 by Automattic widget title centered and background color

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

Button 2 by Automattic widget links font size color and font family hover color change

To change widget links hover color

.widget a:hover {
color: green !important;
}

Button 2 by Automattic Previous and Next Post text and titles

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

Button 2 by Automattic Older Post button Modification

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

Button 2 by Automattic proudly powered by wordpress modifications

© 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