Homepage quote background color
If you find this tweak helpful:
Beginners
Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme. Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site.
This tweak will show you how to change the background of the homepage quote.
PHP
Locate the home.php file in /themes/chameleon/
Save an exact copy of this file to /themes/chameleon-child/
Locate the following code near line 6:
<div id="category-name">
<div id="category-inner">
<?php if ( get_option('chameleon_quote_one') <> '' ) { ?>
<h3>"<?php echo esc_html(get_option('chameleon_quote_one')); ?>"</h3>
<?php } ?>
<?php if ( get_option('chameleon_quote_two') <> '' ) { ?>
<p><?php echo esc_html(get_option('chameleon_quote_two')); ?></p>
<?php } ?>
</div>
</div> <!-- end .category-name -->
Change it to this:
<div id="category-name-home">
<div id="category-inner">
<?php if ( get_option('chameleon_quote_one') <> '' ) { ?>
<h3>"<?php echo esc_html(get_option('chameleon_quote_one')); ?>"</h3>
<?php } ?>
<?php if ( get_option('chameleon_quote_two') <> '' ) { ?>
<p><?php echo esc_html(get_option('chameleon_quote_two')); ?></p>
<?php } ?>
</div>
</div> <!-- end .category-name-home -->
CSS
Locate your style.css file in /themes/chameleon-child/
Add this code:
#category-name-home {
background: #000;
text-align: center;
width: 890px;
margin: 0 auto;
padding-top:38px;
position: relative; z-index: 1;
}
In the code above, we have changed the background color to black with this line:
background: #000;
If you want to change the style of the text, add this to your style sheet and make any changes:
#category-name-home h3 {
color: white;
font-family: 'Kreon', Arial, sans-serif;
font-weight: lighter;font-size: 28px;
}#category-name-home p {
color: #929292;
font-family: 'Kreon', Arial, sans-serif;
font-weight: lighter;
font-size: 20px; }
