Karma – Common CSS Customizations

This Article outlines common CSS Customizations for the Karma WordPress Theme.

Simply grab the code below and drop it into the ‘Custom CSS’ section of Karma’s Site Options Panel: Appearance > Site Options > Custom CSS

1. Main Menu position:

#menu-main-nav {
margin-top: 30px;
}

2. Main Menu Font and Size:

#menu-main-nav a {
font-family: Georgia, serif;
font-size: 15px;
}

3. Main Menu Description text – Font and Size:

#menu-main-nav a span.navi-description {
font-family: Arial, sans-serif;
font-size: 12px;
}

4. Main Menu – Change Width of Dropdown menus

/* this is the dropdown menu itself */​
#menu-main-nav.sf-menu li ul {
width: 200px;
​​}​​​​​

/* these are the links within the dropdown */
#menu-main-nav.sf-menu li ul a {
width: 185px;
​​}​​​

5. Custom Logo Builder – Hide the text:

#header .custom-logo .logo-text,
#B_sticky_menu .custom-logo .logo-text {
display: none;
}

6. Accordion 1 Title:

.true-accordion dt {
font-size: 14px !important;
}

7. Accordion 2 Title:

.accordion .opener strong {
font-size: 14px !important;
}

8. Top Toolbar Text:

.top-block p,
.top-block ul {
color: #FFF;
}

9. Mobile Menu wrapper background:

#tt-mobile-menu-wrap {
background: #333;
}

10. Mobile Menu link background:

#tt-mobile-menu-wrap {
background: #333;
}

11. Mobile Menu link color:

#tt-mobile-menu-list li a,
#tt-mobile-menu-list li span.karma-mega-title {
color: #CCC !important;
}

12. Mobile menu link color – HOVER

#tt-mobile-menu-list li a:hover,
#tt-mobile-menu-list li.current-cat > a,
#tt-mobile-menu-list li.current_page_item > a,
#tt-mobile-menu-list li.current-menu-item > a {
color: #FFF !important;
}

13. Wider container / Full width container

Please note that the original theme was built with pixel values instead of percentages, so the CSS below is only a starting point. There will need to be miscellaneous CSS adjustments made throughout your site.

.top-block .top-holder,
#header .header-area,
.main-area,
.footer-content,
.info,
.jquery3-slider-wrap.flexslider,
.tt-container,
#content.content_full_width {
  margin: 0 auto;
  width: 1100px;
}

 

More CSS Customizations

Use Firebug to easily pinpoint and modify any CSS in your entire website. Learn more here:
http://help.truethemes.net/knowledge-base/customizing-your-theme-with-firebug/