WordPress Theme Natural by Organic Themes : Modifications, Styling and Documentation

Before I shared you how to make your  wordpress site secured. Now i am sharing  you customization and modification of  Theme Natural By Organic Themes.  Theme Natural  by organic themes is  a versatile business website and blog with a natural and earthy design.

Here  I am sharing you some css customization using which you can stylize your Natural theme little bit new look.

You can use my shared code and ask question in the comments section.

You can take my personal help in skype : om2000_cuet

**** *****  To Increase Width of the whole site ****** ***

.container {
max-width: 1189px !important;
padding: 0px 20px !important;
}

** Reduce Width of Single Post Container and increase width of Widget section * *

.row .eleven {
width: 63.75% !important;
}

.row .five {
width: 36.25% !important;
}

**** *****  Homepage Featured Page section modifications ****** ***

1.To change in the homepage 3 (three) featured  page’s box  Titles  (About, Company,History) font size, font family , Text shadow and more

.homepage .title {
font-size: 1.6em;
font-weight: 700;
text-transform: uppercase;
text-shadow: 2px 2px 0px rgba(0, 0, 0, .1);
letter-spacing: -1px;
line-height: 1.2;
margin: 0px;
padding: 0px;
color: darkred !important;
font-family: cursive !important;
}

2. To change the   Homepage  3 featured box’s short description font size, font family , color etc

.homepage .featured-pages p {
font-family: cursive;
color: darkred !important;
font-size: 16px !important;
}

3. To change the homepage 3 featured box’s  learn more button’s background color, font size, font family , color  in Natural theme by Organic themes

.featured-pages a.button {
display: block;
margin-bottom: 0px;
background: darkred;
font-family: cursive !important;
color: white !important;
font-size: 16px;
}

**** ****  Homepage Featured Post section modifications **** ****

4. If you want to change Homepage Featured Post title’s  hover color

*** it is applicable for all type of titles

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus, h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: #669900 !important;
text-decoration: none;
border: none;
}

5. If you want to change  Homepage Featured Post titles font color, font size and font family

.home-news .title, .home-news .title a {
font-size: 1.6em;
letter-spacing: -0.4px;
color: darkred !important;
font-family: cursive !important;
}

6. If you don’t want to show homepage Featured Post’s  Author name, post date and “Leave a comments” use this code

.featured-posts .post-author {
margin: 0px;
padding: 0px;
display: none !important;
}

*********  Single Post, sidebar widget section modifications *********

7. If you want to change Single Post or Page  title  font color, text shadow, font family

.headline {
font-size: 2.7em;
font-weight: 700;
text-transform: uppercase;
text-shadow: 3px 3px 0px rgba(0, 0, 0, .1);
line-height: 1.1;
letter-spacing: -1.4px;
margin: 0px 0px 12px 0px;
padding: 0px;
font-family: cursive;
color: darkred !important;
}

8. In single post page if you don’t want to show post date, author name and comments

.post-author {
display: none;
}

Or if you want to change color and font size of  post date, author etc

.post-author * {
color: darkred !important;
font-family: cursive;
font-size: 14px;
}

9. If you want to change the  background white color to different one in right sidebar widget section in post

.sidebar .widget {
background: darkred !important;

}

10. If you want to change sidebar widget title and footer widget title’s font color, font family and font size

.widget-title {
font-family: cursive !important;
font-size: 19px !important;
color: darkred !important;
}

11. To change Text widget font color, font size and font family , this code is also applicable for footer  text widget

.textwidget {
font-family: times new roman;
font-size: 15px !important;
color: darkblue;
}

12. If you want to change  the sidebar or footer widget links font color , font family and font size use this css

.widget li a {
font-family: cursive;
color: darkblue !important;
font-size: 17px !important;

}

If you want to change widget section links hover text color

.widget li a:hover {
color: darkblue !important;
}

*********  Single Post Related Post Section, Category modifications *********

  13.  If you don’t want to show Related post at the bottom of the post

#jp-relatedposts {
display: none !important;
}

14. To change the  Related Post title’s font color, font size and font family (showing at the bottom of single post page)

.jp-relatedposts-post-title a {
font-family: cursive !important;
color: darkblue;
font-size: 16px !important;
}

15. If you don’t want to show  Next and Previous post at the bottom of single post

.post-navigation {
display: none !important;
}

16. If you don’t  want to show category at the bottom of single post page

.post-meta.radius-full {
display: none;
}

16. To change the Portfolio post titles  In Portfolio page in Natural theme by Organic Themes

.portfolio-archive .excerpt.radius-bottom h2 a {
color: darkred !important;
font-family: cursive;
font-size: 17px;
}

*********  Footer Credit Section Modifications *********

17. To Reduce the gap at the top and bottom of  footer credit section

.footer-information {
padding: 48px;
overflow: hidden;
padding-top: 15px !important;
padding-bottom: 15px !important;
}

18.  If you  want to change background color of footer social icons

#menu-social-menu a {
background: darkred;
color: white !important;
}

19. To change the look of footer widget section something like the image above use the following code

.footer-widgets {
background: darkred !important;
}

.footer-widgets .widget * {
color: white !important;
background: transparent;
}

*** please keep in mind, this is just a demo, you can redesign it as your wish using css

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