Small Business owner wordpress theme : create website and modify theme Business by automattic

If you are Running a small business or if you are a small entrepreneur then Business theme by Automattic is for you. Using this theme you can create your website for your small business.  Here I am sharing some css modifications using which you can give Business theme by Automattic a new look.

You can download Business Theme by Automattic (Parent theme)

also

You can download Business Child theme ( to modify theme file…like  footer.php)

You can ask question regarding any issue you are facing.

You can take my personal help in skype : om2000_cuet

*** Post date and post author, category and Tag modification ***

If you want to change post date font size, color and font family  

span.posted-on, span.posted-on * {
font-size: 13px !important;
color: darkred !important;
font-family: cursive !important;
}

 ALso to change post author font size, color and font family  

span.byline, span.byline * {
font-size: 13px !important;
color: darkred !important;
font-family: cursive !important;
}

To change category links font color, font size and family

span.cat-links, span.cat-links * {
color: darkred !IMPORTANT;
font-size: 16px !important;
font-family: cursive !important;
}

To change Tag Links font size, color and font family

span.tags-links, span.tags-links * {
font-size: 15px !important;
color: darkred !IMPORTANT;
font-family: cursive !important;
}

***  Single Post Modifications ***

 single post title font size, color and font family modifications

.single h1.entry-title {
color: darkred !important;
font-family: cursive;
font-size: 23px !important;
}

 single post content font size, color and font family modifications

.entry-content {
font-size: 16px !important;
color: black !important;
font-family: cursive !important;
}

To increase the width of single post content section in Business theme by Automattic

.single h1.entry-title {
padding-left: 0px !important;
padding-right: 0px !important;
margin: 0px !important;
margin-right: 0px !IMPORTANT;
}

.single .entry-meta {
margin-left: 0px !important;
margin-right: 0px !important;
}
.single .entry-content, .single .entry-content p {
margin-left: auto;
margin-right: auto;
max-width: 1025px !important;
width: 1025px !important;
}
.single footer.entry-footer {
max-width: 1025px !important;
}

*** Footer section Modification ***

To reduce gap or change height of footer section

.site-info {
padding-top: 10px !important;
padding-bottom: 10px !important;
}

To use a background color behind the footer section

footer#colophon {
background: darkred !important;
}

To change font color, size and font family of footer  text

p.site-credits {
color: white !important;
font-size: 16px !important;
font-family: cursive !important;
}

To change footer jetpack social icons color from black to another

.jetpack-social-navigation ul.menu li a {
fill: red !important;
}

To change Hover color of jetpack social icons

.jetpack-social-navigation ul.menu li a svg:hover {
fill: green !important;
}

*** Site Title, Description and Menu Modifications ****

** To make the site title italic and also to change font size, color and font family

.site-title a {
font-size: 23px !important;
color: darkred !important;
font-family: cursive !important;
font-style: italic !important;
}

** To show the  Site Title, Site Description and Tagline one below another

.site-header-wrapper {
display: block !important;
width: 100% !important;
}
.site-identity {
display: block !important;
width: 100% !important;
max-width: 100% !important;
text-align: center;
}
nav#site-navigation {
text-align: center;
margin-top: 0px !important;
}
.site-identity {
display: block !important;
width: 100% !important;
max-width: 100% !important;
text-align: center;
margin-bottom: 0px !important;
}

*** Header and Menu Modifications ***

To change font color, size and font family of menus

.main-navigation>div>ul>li a {
color: black !important;
font-size: 15px !important;
font-family: cursive !important;
}

To change the hover color of menu items

.main-navigation>div>ul>li a:hover {
color: green !IMPORTANT;
}

If you want to use a background color behind header section

header#masthead {
background: darkred;
}

*** Blog page modification ***

To make the blog post title to be italic and also to change font size, color and font family

.blog .entry-title a {
color: red !important;
font-size: 23px !important;
font-family: cursive !important;
font-style: italic !important;
}

To change hover color of site title in blog page

.blog .entry-title a:hover {
color: green !important;
}

To change “Continue Reading” font size, color and font family

a.more-link {
font-size: 23px !important;
color: darkred !important;
font-family: cursive !important;
}

To change Hover color of “Continue Reading” in blog page

a.more-link:hover {
color: green !important;
}

To use background color behind the “Continue Reading”  and make it look like a button

a.more-link {
background: darkred !important;
padding: 2%;
display: block;
color: white !important;
max-width: 196px;
}

If you want to use footer copyright info or  Proudly Powered By WordPress in Business 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
You can take my personal help in skype : om2000_cuet
Like this post?
Tweet
Email
WhatsApp
Print
Like this:
Like Loading...


	
Related