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.
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 companyIf you have any issue feel free to ask me question here in comments section
OR
Contact me in Skype : om2000_cuet
Hi! Will this child theme work with Divi? Thanks! I really like this theme.
LikeLike
Hi Brenda
i don’t think so
Regards
Om
LikeLike
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.
LikeLike
You can give a try 🙂
LikeLike
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
LikeLike
Share me your post URL to check
Regards
Om
LikeLike
Hello, awesome Theme! How can I make all the buttons orange by default? They are currently gray.
LikeLike
Hi
thanks
please share me your site url to check
Regards
Om
LikeLike
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?
LikeLike
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
LikeLike
You can see the text under the Pictures: https://mobilecrab.de/black-week-monatlich-kuendbare-allnet-vertraege-10-gb-fuer-999e-20-gb-fuer-1499e-und-30-gb-fuer-1999e-dauerhaft-im-vodafone-netz-bei-dr-sim/
LikeLike
Hi TeD
would you mind to tell what change you want to do please?
Regards
Om
LikeLike
I would like a different font under the image descriptions and for the “read more” button/text.
LikeLike
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
LikeLiked by 1 person