How to Change Color of .title (Headings)

Mattdim805 · April 2015

Somehow along the way of customizing my site, my headings turned to a dark green color.

How can I get my headings to change to a different color? For example: the H1 at http://www.2ndchanceinsurance.com/insurance/auto-insurance-quotes/.

Below is the current custom CSS I have on the website, should that be helpful in identifying the issue.


  #Top_bar
  #logo img { max-height: 100%;}

    @media only screen and (min-width: 960px) { 

     #Top_bar #logo img { max-width:
  190px;}

    }

    

    .page-id-1161 #ecommerce_ready .fancy_heading { text-align: left;}

    

    .page-id-1705 { background:
  url(http://themes.muffingroup.com/betheme/wp-content/uploads/2014/06/wood-texture.png);}

    

    .page-id-1748 .footer_action, .page-id-1748 .widgets_wrapper { display:
  none;}

    

    .page-id-1768 #Footer { display: none;}

    

    .page-id-1796 #Footer { background: #292929;}

    .page-id-1796 .dark .list_item.lists_2 .list_icon i { color: #fff; } 

    

    .header-classic #Top_bar { height: 120px; }

    .header-classic #Top_bar #logo img { max-height: 165px; }

    

    #Top_bar #logo { padding: 2px; height: 130px !important;

    }

    

    body:not(.home) #Top_bar .logo { position: absolute; z-index: 1; }

    

    #Action_bar .contact_details { float: right !important; }

    #Action_bar .contact_details li.slogan {color: #444444; }

    #Action_bar .contact_details li.phone { color: #444444; font-size: 14px;
  }

    #Action_bar .contact_details li.mail { color: #444444;  font-size: 14px; }

    

    #Action_bar { background-color: #FCFCFC !important; }

    

    .rev_slider {

       

       background:
  url(http://www.2ndchanceinsurance.com/wp-content/uploads/2014/09/progressive-background-e1410466783592.jpg)
  no-repeat center center !important;

       background-size: cover
  !important;

       

    }

    

    #Subheader ul.breadcrumbs { text-align: left; width: 100%; margin-top:
  10px; }

    

    #Footer .widget_mfn_menu ul li a { color: #555555; }

    

    #Footer .widget_mfn_menu ul li.current_page_item a { color: #2991d6;
  }

    

    #Footer .widget_recent_entries ul li a:hover { color: #FFFFFF; }

    

    .single #Subheader h1.title { display: none; }

    

    #Top_bar .menu li ul { border-style: solid; border-color: #BFBFBF;
  border-width: thin; }

    

    #Top_bar .menu li ul li#menu-item-2679 { background: #2991D6;
  border-top-style: solid; border-bottom-style: solid; border-color: #FFF;
  border-width: 2px; }

    

    #Top_bar .menu li ul li#menu-item-2679 a { color: #FFFFFF; }

    

    #Top_bar .menu li ul li#menu-item-2679:hover { background: #2991D6;
  border-top-style: solid; border-bottom-style: solid; border-color: #FFF;
  border-width: 2px; font-weight: bold; }

Albert · April 2015

On this example page, it's h2, not h1. But to change it's color, please use below css:

.title { color: #000 !important; }

the same you can do for the rest of headings:

h1, h2, h3, h4, h5, h6 { color: #000 !important; }

Mattdim805 · August 2015

For the record, I was talking about the H1 as well as the H2 on my site. They were both somehow having their CSS overwritten. Anyway, I tried both of your suggestions above, and neither worked. The bottom one only changed the color of the H3's and below.

I ended up modifying it to h1.title, h2.title { color: #000 !important; ), and that resolved my issue. Thanks for the guidance.

How to Change Color of .title (Headings)

Comments