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.

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
Contact me in Skype : om2000_cuet

14 thoughts on “Theme for Crafters and Designers : Button 2 by Automattic. Modifications, support and Customization”

  1. this is a fantastic post! I’m thinking of switching from Olsen (since it’s retired) to Button 2. Any downsides of using Button 2? I want to have a theme that is highly customizable and flexible, but has a similar look to Olsen.

    Like

      1. I switched it up but I’m not able to have a post in full width. Do you have any code for that? I tried with Elementor but the comments section disappear

        Like

      1. Its mobilecrab.de – The grey button is located at the top of the mobile page (called menü). Also, I have another question: how can I change the font for the “Read more” and “Image descriptions” block?

        Like

      2. Hi,

        To change Menu color

        button.menu-toggle {
        background: orange;
        outline-color: orange;
        }

        To change Read More font
        a.more-link {
        font-family: cursive !important;
        }

        but i am not seeing which one is Image description?

        Regards
        Om

        Like

      1. Hi TeD
        to change font for image description you need to use this

        figcaption.wp-element-caption {
        font-family: cursive !important;
        }

        just you need to change the font name with your one… and may need to install that font

        Regards
        Om

        Liked by 1 person

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 )

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