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

theme natural by organic themes

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.

Or can take my personal help.

**** *****  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 ****** ***

theme natural by organic themes homepage featured page modification

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 **** ****

theme natural by organic themes homepage-featured posts modification

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 *********

theme natural by organic themes single post modification

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 *********

theme natural by organic themes single post footer modification

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

theme natural by organic themes portfolio page modification

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 *********

theme natural by organic themes footer credit section modification

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

theme-natural-by-organic-themes-footer-social-icons-modification

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

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

theme natural by organic themes footer widget section modification

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

 


Want me to help you personally for CSS Issue?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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: