Layout Colors In WebWorks Reverb 2.0 Skins
In the file _colors.scss, a convention has been created to allow for ease of use and user friendliness. The file makes use of Layout Colors that are defined at the top of the page. Every other color value in the layout inherits from these layout colors, so with this logic, you could change the color value of one layout color, and this value would be applied to many aspects of the layout. For the best results, the designer should take a top-down approach, first changing the values of colors at the top level, and then changing individual values for items that need minor adjustments.
For reference, we have created a table for each skin that details every variable that inherits from a certain layout color. These tables may seem like a lot, but just remember, the fact that one Layout Color affects so many values means that for the designer, the workload in the end is greatly reduced.
Neo
Layout Color
Inherited By
$_layout_color_1
$back_to_top_background_color, $footer_link_color, $link_default_color, $menu_toc_item_current_highlight_color, $mini_toc_entry_background_color_hover, $modal_icon_color, $page_breadcrumbs_link_color, $page_breadcrumbs_link_color_hover, $progress_bar_background_color, $related_topics_entry_text_color, $toolbar_background_color, $toolbar_button_background_color, $toolbar_button_home_background_color, $toolbar_button_menu_background_color, $toolbar_button_next_background_color, $toolbar_button_previous_background_color, $toolbar_button_search_background_color, $toolbar_logo_section_background_color, $toolbar_search_section_background_color, $unsupported_browser_heading_text_color
$_layout_color_2
$back_to_top_caret_color, $menu_index_link_color, $menu_index_text_color, $menu_index_title_color, $menu_nav_buttons_icon_color, $menu_text_color, $menu_toc_item_icon_color, $menu_toc_item_text_color, $menu_toc_title_text_color, $mini_toc_entry_text_color, $mini_toc_entry_text_color_visited, $modal_close_button_color, $modal_retry_button_background_color, $modal_text_color, $page_dropdown_arrow_color, $page_toolbar_icon_divider_color, $page_toolbar_social_icon_color, $page_toolbar_social_icon_facebook_color, $page_toolbar_social_icon_google_color, $page_toolbar_social_icon_linkedin_color, $page_toolbar_social_icon_twitter_color, $page_toolbar_tool_icon_color, $related_topics_title_text_color, $search_filter_message_text_color, $search_plain_text_color, $search_result_count_message_text_color, $search_result_icon_color, $search_result_summary_highlight_text_color, $search_result_summary_text_color, $search_title_text_color, $toolbar_button_home_icon_color, $toolbar_button_icon_color, $toolbar_button_menu_icon_color, $toolbar_button_next_icon_color, $toolbar_button_previous_icon_color, $toolbar_button_search_icon_color, $toolbar_icon_color, $toolbar_logo_link_text_color, $toolbar_logo_text_color, $toolbar_search_scope_option_text_color, $toolbar_search_scope_options_text_color, $toolbar_search_scope_selector_icon_color, $toolbar_search_scope_selector_text_color, $toolbar_text_color, $unsupported_browser_message_text_color
$_layout_color_3
$disqus_background_color, $footer_text_color, $menu_background_color, $menu_index_background_color, $menu_nav_buttons_background_color, $menu_toc_background_color, $menu_toc_item_background_color, $mini_toc_background_color, $toolbar_search_scope_option_background_color, $toolbar_search_scope_options_background_color, $toolbar_search_scope_selector_background_color
$_layout_color_4
$mini_toc_entry_text_color_hover, $mini_toc_entry_text_color_visited_hover, $modal_retry_button_text_color, $no_javascript_text_color, $page_breadcrumbs_text_color
$_layout_color_5
$footer_background_color, $page_breadcrumbs_background_color
$_layout_color_6
$modal_background_color, $page_background_color, $search_background_color, $search_result_background_color
Classic
Layout Color
Inherited By
$_layout_color_1
$footer_link_color, $link_default_color, $mini_toc_entry_background_color_hover, $modal_icon_color, $progress_bar_background_color, $related_topics_entry_text_color, $toolbar_button_home_icon_color_click, $toolbar_button_home_icon_color_hover, $toolbar_button_menu_icon_color_click, $toolbar_button_menu_icon_color_hover, $toolbar_button_next_icon_color_click, $toolbar_button_next_icon_color_hover, $toolbar_button_previous_icon_color_click, $toolbar_button_previous_icon_color_hover, $toolbar_button_search_icon_color_click, $toolbar_button_search_icon_color_hover, $unsupported_browser_heading_text_color
$_layout_color_2
$back_to_top_caret_color, $menu_nav_buttons_icon_color, $menu_text_color, $menu_toc_item_icon_color, $menu_toc_title_text_color, $mini_toc_entry_text_color, $mini_toc_entry_text_color_visited, $modal_close_button_color, $modal_retry_button_background_color, $modal_text_color, $page_dropdown_arrow_color, $page_toolbar_icon_divider_color, $page_toolbar_social_icon_color, $page_toolbar_social_icon_facebook_color, $page_toolbar_social_icon_google_color, $page_toolbar_social_icon_linkedin_color, $page_toolbar_social_icon_twitter_color, $page_toolbar_tool_icon_color, $related_topics_title_text_color, $search_filter_message_text_color, $search_plain_text_color, $search_result_count_message_text_color, $search_result_icon_color, $search_result_summary_highlight_text_color, $search_result_summary_text_color, $search_title_text_color, $toolbar_button_home_icon_color, $toolbar_button_icon_color, $toolbar_button_menu_icon_color, $toolbar_button_next_icon_color, $toolbar_button_previous_icon_color, $toolbar_button_search_icon_color, $toolbar_icon_color, $toolbar_logo_link_text_color, $toolbar_logo_text_color, $toolbar_search_scope_option_text_color, $toolbar_search_scope_options_text_color, $toolbar_search_scope_selector_icon_color, $toolbar_search_scope_selector_text_color, $toolbar_text_color, $unsupported_browser_message_text_color
$_layout_color_3
$disqus_background_color, $footer_text_color, $menu_background_color, $menu_index_background_color, $menu_nav_buttons_background_color, $menu_toc_background_color, $menu_toc_item_background_color, $mini_toc_background_color, $toolbar_search_scope_option_background_color, $toolbar_search_scope_options_background_color, $toolbar_search_scope_selector_background_color
$_layout_color_4
$menu_nav_buttons_icon_color_click, $menu_nav_buttons_icon_color_hover, $menu_toc_item_current_icon_color, $menu_toc_item_current_icon_color_click, $menu_toc_item_current_icon_color_hover, $menu_toc_item_current_text_color, $menu_toc_item_current_text_color_click, $menu_toc_item_current_text_color_hover, $menu_toc_item_icon_color_click, $menu_toc_item_icon_color_hover, $menu_toc_item_text_color_click, $menu_toc_item_text_color_hover, $mini_toc_entry_text_color_hover, $mini_toc_entry_text_color_visited_hover, $modal_retry_button_text_color, $no_javascript_text_color, $page_breadcrumbs_link_color, $page_breadcrumbs_link_color_hover, $page_breadcrumbs_link_color_visited, $page_breadcrumbs_link_color_visited_hover, $page_breadcrumbs_text_color, $toolbar_search_scope_option_text_color_hover, $toolbar_search_scope_selector_icon_color_hover, $toolbar_search_scope_selector_text_color_hover
$_layout_color_5
$footer_background_color, $footer_copyright_message_text_color, $footer_hr_color, $page_breadcrumbs_background_color
$_layout_color_6
$modal_background_color, $page_background_color, $search_background_color, $search_result_background_color
$_layout_color_7
$back_to_top_background_color, $back_to_top_background_color_hover, $menu_toc_item_current_highlight_color, $toolbar_background_color, $toolbar_button_background_color, $toolbar_button_home_background_color, $toolbar_button_home_background_color_click, $toolbar_button_home_background_color_hover, $toolbar_button_menu_background_color, $toolbar_button_menu_background_color_click, $toolbar_button_menu_background_color_hover, $toolbar_button_next_background_color, $toolbar_button_next_background_color_click, $toolbar_button_next_background_color_hover, $toolbar_button_previous_background_color, $toolbar_button_previous_background_color_click, $toolbar_button_previous_background_color_hover, $toolbar_button_search_background_color, $toolbar_button_search_background_color_click, $toolbar_button_search_background_color_hover, $toolbar_logo_section_background_color, $toolbar_search_section_background_color
$_layout_color_8
$menu_toc_item_current_background_color, $menu_toc_item_current_background_color_click, $menu_toc_item_current_background_color_hover
$_layout_color_9
$menu_nav_buttons_background_color_click, $menu_nav_buttons_background_color_hover, $menu_toc_item_background_color_click, $menu_toc_item_background_color_hover, $toolbar_search_scope_option_background_color_hover, $toolbar_search_scope_selector_background_color_hover
$_layout_color_10
$menu_index_link_color, $menu_index_text_color, $menu_index_title_color, $menu_toc_item_text_color
Corporate
Layout Color
Inherited By
$_layout_color_1
$mini_toc_entry_background_color_hover, $modal_icon_color, $page_breadcrumbs_link_color, $page_breadcrumbs_link_color_hover, $page_breadcrumbs_link_color_visited, $page_breadcrumbs_link_color_visited_hover, $progress_bar_background_color, $related_topics_entry_text_color, $unsupported_browser_heading_text_color
$_layout_color_2
$back_to_top_caret_color, $menu_nav_buttons_icon_color, $menu_nav_buttons_icon_color_click, $menu_nav_buttons_icon_color_hover, $menu_text_color, $modal_close_button_color, $modal_retry_button_background_color, $modal_text_color, $page_toolbar_icon_divider_color, $page_toolbar_social_icon_color, $page_toolbar_social_icon_facebook_color, $page_toolbar_social_icon_google_color, $page_toolbar_social_icon_linkedin_color, $page_toolbar_social_icon_twitter_color, $page_toolbar_tool_icon_color, $related_topics_title_text_color, $toolbar_button_home_icon_color, $toolbar_button_home_icon_color_click, $toolbar_button_home_icon_color_hover, $toolbar_button_icon_color, $toolbar_button_menu_icon_color, $toolbar_button_menu_icon_color_click, $toolbar_button_menu_icon_color_hover, $toolbar_button_next_icon_color, $toolbar_button_next_icon_color_click, $toolbar_button_next_icon_color_hover, $toolbar_button_previous_icon_color, $toolbar_button_previous_icon_color_click, $toolbar_button_previous_icon_color_hover, $toolbar_button_search_icon_color, $toolbar_button_search_icon_color_click, $toolbar_button_search_icon_color_hover, $toolbar_icon_color, $toolbar_logo_link_text_color, $toolbar_logo_text_color, $toolbar_text_color
$_layout_color_3
$disqus_background_color, $footer_text_color
$_layout_color_4
$menu_index_link_color, $menu_index_text_color, $menu_index_title_color, $menu_toc_title_text_color, $mini_toc_entry_text_color, $mini_toc_entry_text_color_visited, $modal_retry_button_text_color, $no_javascript_text_color, $page_breadcrumbs_text_color, $page_dropdown_arrow_color, $search_filter_message_text_color, $search_plain_text_color, $search_result_count_message_text_color, $search_result_icon_color, $search_result_summary_highlight_text_color, $search_result_summary_text_color, $search_title_text_color, $toolbar_search_scope_option_text_color, $toolbar_search_scope_option_text_color_hover, $toolbar_search_scope_options_text_color, $toolbar_search_scope_selector_icon_color, $toolbar_search_scope_selector_icon_color_hover, $toolbar_search_scope_selector_text_color, $toolbar_search_scope_selector_text_color_hover, $unsupported_browser_message_text_color
$_layout_color_5
$toolbar_button_home_background_color_hover, $toolbar_button_menu_background_color_hover, $toolbar_button_next_background_color_hover, $toolbar_button_previous_background_color_hover, $toolbar_search_section_background_color_hover
$_layout_color_6
$menu_background_color, $menu_index_background_color, $menu_nav_buttons_background_color, $menu_toc_background_color, $menu_toc_item_background_color, $mini_toc_background_color, $modal_background_color, $page_background_color, $page_breadcrumbs_background_color, $search_background_color, $search_result_background_color, $toolbar_search_scope_option_background_color, $toolbar_search_scope_options_background_color, $toolbar_search_scope_selector_background_color
$_layout_color_7
$back_to_top_background_color, $back_to_top_background_color_hover, $menu_toc_item_current_highlight_color, $toolbar_background_color, $toolbar_button_background_color, $toolbar_button_home_background_color, $toolbar_button_menu_background_color, $toolbar_button_next_background_color, $toolbar_button_previous_background_color, $toolbar_button_search_background_color, $toolbar_button_search_background_color_click, $toolbar_button_search_background_color_hover, $toolbar_logo_section_background_color, $toolbar_search_section_background_color
$_layout_color_8
$toolbar_button_home_background_color_click, $toolbar_button_menu_background_color_click, $toolbar_button_next_background_color_click, $toolbar_button_previous_background_color_click
$_layout_color_9
$menu_nav_buttons_background_color_click, $menu_nav_buttons_background_color_hover
$_layout_color_10
$mini_toc_entry_text_color_hover, $mini_toc_entry_text_color_visited_hover
$_layout_color_11
$menu_toc_item_current_icon_color, $menu_toc_item_current_icon_color_click, $menu_toc_item_current_icon_color_hover, $menu_toc_item_current_text_color, $menu_toc_item_current_text_color_click, $menu_toc_item_current_text_color_hover, $menu_toc_item_icon_color, $menu_toc_item_icon_color_click, $menu_toc_item_icon_color_hover, $menu_toc_item_text_color, $menu_toc_item_text_color_click, $menu_toc_item_text_color_hover
$_layout_color_12
$footer_background_color, $footer_copyright_message_text_color, $footer_hr_color
Metro
Layout Color
Inherited By
$_layout_color_1
$back_to_top_background_color, $footer_link_color, $link_default_color, $mini_toc_entry_background_color_hover, $modal_icon_color, $page_breadcrumbs_link_color, $page_breadcrumbs_link_color_hover, $progress_bar_background_color, $related_topics_entry_text_color, $unsupported_browser_heading_text_color
$_layout_color_2
$back_to_top_caret_color, $menu_toc_item_current_text_color, $menu_toc_item_current_text_color_click, $menu_toc_item_current_text_color_hover, $menu_toc_item_text_color_click, $menu_toc_item_text_color_hover, $mini_toc_entry_text_color, $mini_toc_entry_text_color_visited, $modal_close_button_color, $modal_retry_button_background_color, $modal_text_color, $page_dropdown_arrow_color, $page_toolbar_icon_divider_color, $page_toolbar_social_icon_color, $page_toolbar_social_icon_facebook_color, $page_toolbar_social_icon_google_color, $page_toolbar_social_icon_linkedin_color, $page_toolbar_social_icon_twitter_color, $page_toolbar_tool_icon_color, $related_topics_title_text_color, $search_filter_message_text_color, $search_plain_text_color, $search_result_count_message_text_color, $search_result_icon_color, $search_result_summary_highlight_text_color, $search_result_summary_text_color, $search_title_text_color, $toolbar_logo_link_text_color, $toolbar_logo_text_color, $toolbar_search_scope_option_text_color, $toolbar_search_scope_options_text_color, $toolbar_search_scope_selector_icon_color, $toolbar_search_scope_selector_text_color, $toolbar_text_color, $unsupported_browser_message_text_color
$_layout_color_3
$disqus_background_color, $footer_text_color, $menu_index_link_color, $menu_index_text_color, $menu_index_title_color, $menu_nav_buttons_background_color_click, $menu_nav_buttons_icon_color, $menu_nav_buttons_icon_color_hover, $menu_text_color, $menu_toc_item_current_icon_color, $menu_toc_item_current_icon_color_click, $menu_toc_item_current_icon_color_hover, $menu_toc_item_icon_color_click, $menu_toc_item_icon_color_hover, $menu_toc_item_text_color, $menu_toc_title_text_color, $mini_toc_background_color, $toolbar_button_home_background_color_click, $toolbar_button_menu_background_color_click, $toolbar_button_next_background_color_click, $toolbar_button_previous_background_color_click, $toolbar_search_scope_option_background_color, $toolbar_search_scope_options_background_color, $toolbar_search_scope_selector_background_color
$_layout_color_4
$mini_toc_entry_text_color_hover, $mini_toc_entry_text_color_visited_hover, $modal_retry_button_text_color, $no_javascript_text_color, $page_breadcrumbs_text_color, $toolbar_button_home_icon_color, $toolbar_button_home_icon_color_hover, $toolbar_button_icon_color, $toolbar_button_menu_icon_color, $toolbar_button_menu_icon_color_hover, $toolbar_button_next_icon_color, $toolbar_button_next_icon_color_hover, $toolbar_button_previous_icon_color, $toolbar_button_previous_icon_color_hover, $toolbar_button_search_icon_color, $toolbar_button_search_icon_color_hover, $toolbar_icon_color
$_layout_color_5
$footer_background_color, $menu_toc_item_current_highlight_color, $page_breadcrumbs_background_color, $toolbar_background_color
$_layout_color_6
$modal_background_color, $page_background_color, $search_background_color, $search_result_background_color
$_layout_color_7
$menu_background_color, $menu_index_background_color, $menu_nav_buttons_background_color, $menu_nav_buttons_background_color_hover, $menu_toc_background_color, $menu_toc_item_background_color, $toolbar_button_background_color, $toolbar_button_home_background_color, $toolbar_button_home_background_color_hover, $toolbar_button_menu_background_color, $toolbar_button_menu_background_color_hover, $toolbar_button_next_background_color, $toolbar_button_next_background_color_hover, $toolbar_button_previous_background_color, $toolbar_button_previous_background_color_hover, $toolbar_logo_section_background_color, $toolbar_search_section_background_color
$_layout_color_8
$menu_toc_item_background_color_click, $menu_toc_item_background_color_hover
$_layout_color_9
$menu_toc_item_current_background_color, $menu_toc_item_current_background_color_click, $menu_toc_item_current_background_color_hover
Social
Layout Color
Inherited By
$_layout_color_1
$back_to_top_background_color, $footer_link_color, $link_default_color, $menu_toc_item_current_highlight_color, $mini_toc_entry_background_color_hover, $modal_icon_color, $page_breadcrumbs_link_color, $page_breadcrumbs_link_color_hover, $progress_bar_background_color, $related_topics_entry_text_color, $toolbar_background_color, $toolbar_button_background_color, $toolbar_button_home_background_color, $toolbar_button_menu_background_color, $toolbar_button_next_background_color, $toolbar_button_previous_background_color, $toolbar_button_search_background_color, $toolbar_logo_section_background_color, $toolbar_search_section_background_color, $unsupported_browser_heading_text_color
$_layout_color_2
$back_to_top_caret_color, $menu_index_link_color, $menu_index_text_color, $menu_index_title_color, $menu_nav_buttons_icon_color, $menu_text_color, $menu_toc_item_icon_color, $menu_toc_item_text_color, $menu_toc_title_text_color, $mini_toc_entry_text_color, $mini_toc_entry_text_color_visited, $modal_close_button_color, $modal_retry_button_background_color, $modal_text_color, $page_breadcrumbs_text_color, $page_dropdown_arrow_color, $page_toolbar_icon_divider_color, $page_toolbar_social_icon_color, $page_toolbar_social_icon_facebook_color, $page_toolbar_social_icon_google_color, $page_toolbar_social_icon_linkedin_color, $page_toolbar_social_icon_twitter_color, $page_toolbar_tool_icon_color, $related_topics_title_text_color, $search_filter_message_text_color, $search_plain_text_color, $search_result_count_message_text_color, $search_result_icon_color, $search_result_summary_highlight_text_color, $search_result_summary_text_color, $search_title_text_color, $toolbar_search_scope_option_text_color, $toolbar_search_scope_options_text_color, $toolbar_search_scope_selector_icon_color, $toolbar_search_scope_selector_text_color, $unsupported_browser_message_text_color
$_layout_color_3
$disqus_background_color, $footer_text_color, $menu_background_color, $menu_index_background_color, $menu_nav_buttons_background_color, $menu_toc_background_color, $menu_toc_item_background_color, $mini_toc_background_color, $toolbar_search_scope_option_background_color, $toolbar_search_scope_options_background_color, $toolbar_search_scope_selector_background_color
$_layout_color_4
$mini_toc_entry_text_color_hover, $mini_toc_entry_text_color_visited_hover, $modal_retry_button_text_color, $no_javascript_text_color, $toolbar_button_home_icon_color, $toolbar_button_home_icon_color_click, $toolbar_button_home_icon_color_hover, $toolbar_button_icon_color, $toolbar_button_menu_icon_color, $toolbar_button_menu_icon_color_click, $toolbar_button_menu_icon_color_hover, $toolbar_button_next_icon_color, $toolbar_button_next_icon_color_click, $toolbar_button_next_icon_color_hover, $toolbar_button_previous_icon_color, $toolbar_button_previous_icon_color_click, $toolbar_button_previous_icon_color_hover, $toolbar_button_search_icon_color, $toolbar_button_search_icon_color_click, $toolbar_button_search_icon_color_hover, $toolbar_icon_color, $toolbar_logo_link_text_color, $toolbar_logo_text_color, $toolbar_text_color
$_layout_color_5
$footer_background_color
$_layout_color_6
$modal_background_color, $page_background_color, $page_breadcrumbs_background_color, $search_background_color, $search_result_background_color
$_layout_color_7
$toolbar_button_icon_color_disabled, $toolbar_button_menu_icon_color_disabled