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.

Or can take my personal help.

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

Read More Button Background and color change

 

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

 

Recent article Read More Background color change

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


menu and submenu background color change

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

Traction Theme Logo Image center

 

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

 

Remove post date wordpress

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

change post content and title font color size font family

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

date and comments remove wordpress

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

Sidebar widget link color ,hover color, font family change

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

footer background modification using css

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

top navigation menu background,hover color, font family and more

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

Pay me some, I will help you for CSS Issue Personally 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: