Hi bcoadmin,
You will find in a lot of our Templates we use Highlight Color options in the Template Manager. When we do this and want to assign the color to multiple elements we do so with a php echo in the index.php and assign multiple areas (such as the #s5_footer_area1) to it. Doing it this way allows the user to simply change the color in the back end without having to manually edit any CSS files.
That looks like this:.jdGallery .carousel .carouselInner .active, .button, .readmore a, .readon, button, .S5_submenu_item:hover, .S5_grouped_child_item .S5_submenu_item:hover, .readon.dark:hover, .success_area_number, .s5_tab_show_slide_button_active, .progress_bar2, #s5_pos_custom_6, .s5_ls_readmore, .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-list > .active > a, .nav-list > .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .btn-group.open .btn-primary.dropdown-toggle, .btn-primary, .item-page .dropdown-menu li > a:hover, .blog .dropdown-menu li > a:hover, .item .dropdown-menu li > a:hover, .btn, .pagenav a, .readmore a, .s5_masonry_inactive, #s5_footer_area1, #s5_accordion_menu h3:hover, #s5_accordion_menu h3.s5_am_open, #s5_register, #s5_login, .module_round_box-highlight1, .module_round_box-highlight1_dark_title, .s5_pricetable_column.recommended .s5_title {
background:#<?php echo $s5_highlightcolor1; ?> !important;
}
So all the classes and id's above will take the background color selection from Highlight1 in the Template Manager using a !important call. You can also see here for a more detailed explanation of CSS specificity and what happens in the event of a coding conflict between 2 elements (which gets used).
http://www.standardista.com/css3/css-specificity/Regards,