Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Matthew Boysel
Matthew Boysel
295 Points

CSS Font Color

On this page http://doctorladybug.com/about-organic-farmer-kelsey-ca/ the font that says "About" and "Organic Farmer, Kelsey, CA" is showing up really dark. I am trying to change the color to white, but can't find which file I need to go to to change this. Thanks!

1 Answer

Shawn Jones
Shawn Jones
15,579 Points
Shawn Jones
Shawn Jones
15,579 Points

For some reason they decided to define it in the index.html file. in the head section of the page go down until you see a pair of style tags. it's on the first row. color is defined as #222222. Change that to what ever you like. I included a look of the code here for reference. it's at the very bottom of the code.

<head>
    <title>About Organic Farmer Kelsey, CADoctor Ladybug</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="icon" href="http://doctorladybug.com/wp-content/themes/BUZZBLOG-theme/favicon.ico" type="image/x-icon" />
        <link rel="pingback" href="http://doctorladybug.com/xmlrpc.php" />
    <link rel="alternate" type="application/rss+xml" title="Doctor Ladybug" href="http://doctorladybug.com/feed/" />
    <link rel="alternate" type="application/atom+xml" title="Doctor Ladybug" href="http://doctorladybug.com/feed/atom/" />
    <script type='text/javascript'>
    (function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();
</script>

<!-- This site is optimized with the Yoast WordPress SEO plugin v1.5.3.2 - https://yoast.com/wordpress/plugins/seo/ -->
<meta name="description" content="Local Organic Farmer Provides Fresh Food, Honey, Soil, and more"/>
<link rel="canonical" href="http://doctorladybug.com/about-organic-farmer-kelsey-ca/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="About Organic Farmer Kelsey, CA" />
<meta property="og:description" content="Local Organic Farmer Provides Fresh Food, Honey, Soil, and more" />
<meta property="og:url" content="http://doctorladybug.com/about-organic-farmer-kelsey-ca/" />
<meta property="og:site_name" content="Doctor Ladybug" />
<!-- / Yoast WordPress SEO plugin. -->

<link rel="alternate" type="application/rss+xml" title="Doctor Ladybug &raquo; Feed" href="http://doctorladybug.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Doctor Ladybug &raquo; Comments Feed" href="http://doctorladybug.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="Doctor Ladybug &raquo; About Comments Feed" href="http://doctorladybug.com/about-organic-farmer-kelsey-ca/feed/" />
<link rel='stylesheet' id='nextgen_gallery_related_images-css'  href='http://doctorladybug.com/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_gallery_display/static/nextgen_gallery_related_images.css?ver=3.9.1' type='text/css' media='all' />
<link rel='stylesheet' id='contact-form-7-css'  href='http://doctorladybug.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='zilla-likes-css'  href='http://doctorladybug.com/wp-content/plugins/zilla-likes/styles/zilla-likes.css?ver=3.9.1' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='http://doctorladybug.com/wp-content/themes/BUZZBLOG-theme/bootstrap.css?ver=2.3' type='text/css' media='all' />
<link rel='stylesheet' id='responsive-css'  href='http://doctorladybug.com/wp-content/themes/BUZZBLOG-theme/responsive.css?ver=2.3' type='text/css' media='all' />
<link rel='stylesheet' id='magnificpopup-css'  href='http://doctorladybug.com/wp-content/themes/BUZZBLOG-theme/css/magnificpopup.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='mainstyle-css'  href='http://doctorladybug.com/wp-content/themes/BUZZBLOG-theme/style.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='owl-css'  href='http://doctorladybug.com/wp-content/themes/BUZZBLOG-theme/css/owl.carousel.css?ver=1.0' type='text/css' media='all' />
<link rel='stylesheet' id='hs_options_stylesheets_alt_style-css'  href='http://doctorladybug.com/wp-content/themes/BUZZBLOG-theme/css/style1.css' type='text/css' media='all' />
<script type='text/javascript'>
/* <![CDATA[ */
var photocrati_ajax = {"url":"http:\/\/doctorladybug.com\/photocrati_ajax","wp_site_url":"http:\/\/doctorladybug.com","wp_site_static_url":"http:\/\/doctorladybug.com"};
/* ]]> */
</script>
<script type='text/javascript' src='http://doctorladybug.com/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ajax/static/ajax.js?ver=3.9.1'></script>
<script type='text/javascript' src='http://doctorladybug.com/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://doctorladybug.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://doctorladybug.com/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ajax/static/persist.js?ver=3.9.1'></script>
<script type='text/javascript' src='http://doctorladybug.com/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ajax/static/store.js?ver=3.9.1'></script>
<script type='text/javascript' src='http://doctorladybug.com/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ajax/static/ngg_store.js?ver=3.9.1'></script>
<script type='text/javascript' src='http://doctorladybug.com/wp-content/themes/BUZZBLOG-theme/js/modernizr.js?ver=2.0.6'></script>
<script type='text/javascript' src='http://doctorladybug.com/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/lightbox/static/lightbox_context.js?ver=3.9.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var zilla_likes = {"ajaxurl":"http:\/\/doctorladybug.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://doctorladybug.com/wp-content/plugins/zilla-likes/scripts/zilla-likes.js?ver=3.9.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://doctorladybug.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://doctorladybug.com/wp-includes/wlwmanifest.xml" /> 
<link rel='shortlink' href='http://doctorladybug.com/?p=2' />
<!-- <meta name="NextGEN" version="2.0.66" /> -->
<style type="text/css">.logo {
    margin: 50px auto;
}.top-panel-button .toggle-button {color:#afcb79}.top-panel-button {border-color:#eeeeee}.nav__primary {background:#3B2314}@media all and (min-width: 800px) {.flexnav > li > a:after {color:#3B2314}}.nav__primary {border-color:#3B2314}.logo_tagline {color:#afcb79}.header-overlay {background:#ffffff}.header-overlay {-moz-opacity: 0.85; -khtml-opacity: 0.85; opacity: 0.85;}.headerstyler { background-image:url(http://doctorladybug.com/wp-content/uploads/2014/05/doctor-lady-bug-final-300x300.jpg); background-repeat:no-repeat; background-position:center center;  background-attachment:fixed; }p {
color: #FFF;
}

a {
color:#FFF;
}</style>
<style type='text/css'>
h1 { font-weight: 400; font-style: normal; font-size: 60px; line-height: 60px; font-family: playfair_displayregular;  color:#222222; }
h2 { font-weight: 400; font-style: normal; font-size: 40px; line-height: 40px; font-family: playfair_displayregular;  color:; }
h3 { font-weight: 400; font-style: normal; font-size: 34px; line-height: 34px; font-family: playfair_displayregular;  color:; }
h4 { font-weight: 400; font-style: normal; font-size: 24px; line-height: 28px; font-family: playfair_displayregular;  color:; }
h5 { font-weight: 400; font-style: normal; font-size: 21px; line-height: 32px; font-family: playfair_displayregular;  color:; }
h6 { font-weight: 400; font-style: normal; font-size: 18px; line-height: 24px; font-family: playfair_displayregular;  color:; }
.main-holder, .mfp-wrap { font-weight: 400; font-style: normal; font-size: 20px; line-height: 31px; font-family: playfair_displayregular;  color:#525252; }
.logo_h__txt, .logo_link { font-weight: 400; font-style: normal; font-size: 73px; line-height: 45px; font-family: playfair_displayregular;  color:#222222; }
.flexnav > li > a { font-weight: 400; font-style: normal; font-size: 18px; line-height: 21px; font-family: playfair_displayregular;  color:; }
.nav.footer-nav a { font-weight: 400; font-style: normal; font-size: 13px; line-height: 22px; font-family: playfair_displayregular;  color:#667078; }
</style>

you can see it in the second style tag on the top far right. that color is the color controlling your About H1 color.