Traction By The Theme Foundry: Documentation, Support and Modification of Header, Footer,Sidebar, Links, Text fonts and more

A super clean magazine theme featuring built-in post thumbnail support, a featured post slider, and a robust theme options menu. You can check the Demo of Traction Theme.  If you are using wordpress.com then you can get it free in premium plan  or if you are using personal plan then you need to pay $68 to use that theme.

Here I am sharing you some css customization using which you can give the Traction theme by theme foundry a new look of your choice.

You can take my personal help in skype : om2000_cuet

Question 1 : How to change the Read More button background and hover background in Home Page Slider in Traction Theme

Answer: Use the code below to change this

.slide a.more-link {
background: red !important;
border-color: red !important;
color: white !IMPORTANT;
box-shadow: unset !important;
}

.slide a.more-link:hover {
background: green !important;
border-color: green !important;
color: white !IMPORTANT;
box-shadow: unset !important;
}

Question 2 : Home Page Recent Article’s “Read More” text font color, font size and font family

Answer: Use the following code to achieve this

.entry a.more-link {
color: red !important;
font-family:cursive !important;
font-size:14px !important;
}

to change hover font color

.entry a.more-link:hover {
color: white !important;

}

Question 3: If you want to change the category navigation menu background color

div#cat-nav {
border-radius: 6px;
background: green !important;

}

 to change the category navigation sub-menu background color

.nav li.cat-item ul.children, .nav li.cat-item ul.children li {
background: green !important;
}

to change category  sub menu items background color while hovering over them

ul.children li:hover {
background: red !important;
}

Question 4: If you want to change font color, font size and font family of category navigation menu

.nav a {
color: #ebecee;
font-size: 15px !important;
font-family: cursive !important;
}

Question 5: If you want to show the logo in the middle instead of left aligned

div.logo.logo-img img {
max-width: 100%;
line-height: 0;
margin-left: auto !IMPORTANT;
margin-right: auto;
display: block;
float: none !IMPORTANT;
}
div.logo {
float: none !important;
}

Question 6: How to remove date from homepage Recent posts in Traction By The Theme Foundry

Answer: Use the following css code to remove post date

.post .date {
display: none !important;
}

Question 7 : If you want to change Post conten’t or text’s font size, color and font family in  Traction By The Theme Foundry  (applicable for single post page too)

.entry, .entry p {
color: black !important;
font-size: 15px !important;
font-family: cursive;
text-shadow: none !important;
}

Question 8 : If you want to change post title font color, font size and font family in  Traction Theme

.entry .title, .entry .title a {
color: red !important;
text-shadow: none !important;
font-size: 22px;
font-family: cursive !important;
}

Question 9 : If you don’t want to show  post date and comment count in single post page in Traction theme

.single div#main-top .main-top-left {
visibility: hidden;
}

Question 10: How to change widget title font color, font size and font family

Answer : Try this css code

h2.widgettitle {
font-size: 17px !important;
color: #555;
font-family: cursive !important;
}

Question 11: How to change sidebar widget link color, link font and font size

Answer: Try this code

#sidebar .widget li a {
font-size: 14px !important;
color: red !important;
font-family: cursive !important;
}

To change sidebar widget link hover font color,  try the css code below

#sidebar  .widget li a:hover {
color: blue !important;
}

Question 12 :  How to change footer background color in Traction theme

Answer:  Try this css code

#footer {
background: darkred !important;
}

Question 13: To change footer widget title font color, font size and font family

#footer h2.widgettitle {
font-size: 17px !important;
color: #555;
font-family: cursive !important;
}

Question 14: How to change footer widget link’s color, font family and font size

#footer a {
color: #fff;
font-family: cursive !important;
font-size: 13px !important;
}

to change footer widget link’s hover color

#footer a:hover {
color: red !important;
}

////////////////// TOP NAVIGATION MENU STYLING ////////////////////

Question 15: How to change top  Navigation background color in traction theme

Answer : try this code

#pg-nav-bg {
background: darkred !important;
}

Question 16 : How to change top navigation menu item font color, size, weight, font family  and more

#pg-nav .nav a {
font-size: 14px !important;
font-weight: normal;
text-shadow: 0 -1px 0 #000;
color: white !important;
font-family: cursive !important;
}

Question 17 : How to change current or selected menu  or Hover menu  background color  or font color

#pg-nav .nav li:hover, #pg-nav .nav li.sfhover, #pg-nav .nav .current_page_parent, #pg-nav .nav .current_page_ancestor, #pg-nav .nav .current-cat-parent, #pg-nav .nav .current-cat, #pg-nav .nav .current_page_item, #pg-nav .nav .current_page_item a, #pg-nav .nav .current-cat a {
color: #fff !important;
background: green !important;
}

Question 18 : How to change background color of  drop down menus

#pg-nav .nav ul, #pg-nav .nav ul li {
background: darkred !important;
}

Question 19 : How to use background image instead of background color in traction theme

body {
background: url(https://tractiondemo.files.wordpress.com/2010/02/girl_51.jpg);
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-position: center !important;
}

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