onny/web-wordpress-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

set search query highlight to theme color

Browse source
This commit is contained in:
Jonas Heinrich 2020-07-21 13:12:30 +02:00
parent d9f02da9b9
commit 80844fe4eb
2 changed files with 77 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

1
kit/css/search.css
View file

@ -141,5 +141,4 @@ h2.screen-reader-text {
.tx-indexedsearch-redMarkup { .tx-indexedsearch-redMarkup {
font-weight: 400; font-weight: 400;
background-color: rgba(0, 153, 130, 0.1);
} }

110
kit/functions.php
View file

@ -217,118 +217,157 @@ add_action( 'customize_register', 'theme_customize_register' );
# Apply custom CSS settings # Apply custom CSS settings
function hex2rgba($color, $opacity = false) {
$default = 'rgb(0,0,0)';
//Return default if no color provided
if(empty($color))
return $default;
//Sanitize $color if "#" is provided
if ($color[0] == '#' ) {
$color = substr( $color, 1 );
}
//Check if color has 6 or 3 characters and get values
if (strlen($color) == 6) {
$hex = array( $color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5] );
} elseif ( strlen( $color ) == 3 ) {
$hex = array( $color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2] );
} else {
return $default;
}
//Convert hexadec to rgb
$rgb = array_map('hexdec', $hex);
//Check if opacity is set(rgba or rgb)
if($opacity){
if(abs($opacity) > 1)
$opacity = 1.0;
$output = 'rgba('.implode(",",$rgb).','.$opacity.')';
} else {
$output = 'rgb('.implode(",",$rgb).')';
}
//Return rgb(a) color string
return $output;
}
function kit_customize_css() function kit_customize_css()
{ {
$theme_color = get_theme_mod('theme_color', '#009982');
?> ?>
<style type="text/css"> <style type="text/css">
aside .aside-icon { aside .aside-icon {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
nav > ul > li:hover > a, nav > ul > li:hover > a,
nav > ul > li:active > a { nav > ul > li:active > a {
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; color: <?php echo $theme_color; ?>;
} }
/* change color on hover for language selector on mobile view */ /* change color on hover for language selector on mobile view */
.header-lang-small:hover li.active span { .header-lang-small:hover li.active span {
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; color: <?php echo $theme_color; ?>;
} }
.header-lang-small:hover .icon { .header-lang-small:hover .icon {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
.dropdown-content li:hover span { .dropdown-content li:hover span {
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; color: <?php echo $theme_color; ?>;
} }
nav > ul > li:hover > a::after, nav > ul > li:hover > a::after,
nav > ul > li:active > a::after { nav > ul > li:active > a::after {
border-bottom: 4px solid <?php echo get_theme_mod('theme_color', '#009982'); ?>; border-bottom: 4px solid <?php echo $theme_color; ?>;
} }
.header-button { .header-button {
/* background-image: linear-gradient(0deg, <?php echo get_theme_mod('theme_color', '#009982'); ?>, rgb(0,0,0,0.2)); */ /* background-image: linear-gradient(0deg, <?php echo $theme_color; ?>, rgb(0,0,0,0.2)); */
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
box-shadow: inset 0 14px 16px -16px white; box-shadow: inset 0 14px 16px -16px white;
} }
.nav-second-level-group-headline { .nav-second-level-group-headline {
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; color: <?php echo $theme_color; ?>;
} }
.opened > a { .opened > a {
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; color: <?php echo $theme_color; ?>;
} }
nav > ul > li .nav-first-level-opener::before, nav > ul > li .nav-first-level-opener::after { nav > ul > li .nav-first-level-opener::before, nav > ul > li .nav-first-level-opener::after {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
.nav-second-level .nav-second-level-opener::before, .nav-second-level .nav-second-level-opener::after { .nav-second-level .nav-second-level-opener::before, .nav-second-level .nav-second-level-opener::after {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
.headline-element h2::after { .headline-element h2::after {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
form input[type='submit'] { form input[type='submit'] {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
.tx-indexedsearch .tx-indexedsearch-searchbox form fieldset .tx-indexedsearch-search-submit button { .tx-indexedsearch .tx-indexedsearch-searchbox form fieldset .tx-indexedsearch-search-submit button {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
.tx-indexedsearch .tx-indexedsearch-browsebox ul li.current a { .tx-indexedsearch .tx-indexedsearch-browsebox ul li.current a {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
.tx-indexedsearch .tx-indexedsearch-browsebox ul li a:hover { .tx-indexedsearch .tx-indexedsearch-browsebox ul li a:hover {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
.tx-indexedsearch .tx-indexedsearch-res { .tx-indexedsearch .tx-indexedsearch-res {
border-bottom: 1px solid <?php echo get_theme_mod('theme_color', '#009982'); ?>; border-bottom: 1px solid <?php echo $theme_color; ?>;
} }
.tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-title a:hover { .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-title a:hover {
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; color: <?php echo $theme_color; ?>;
} }
.tx-indexedsearch .tx-indexedsearch-res .link-more span:hover { .tx-indexedsearch .tx-indexedsearch-res .link-more span:hover {
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; color: <?php echo $theme_color; ?>;
} }
.tx-indexedsearch .tx-indexedsearch-browsebox ul li .current { .tx-indexedsearch .tx-indexedsearch-browsebox ul li .current {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
.nav-second-level-group-headline .icon { .nav-second-level-group-headline .icon {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
.header-lang li a:hover { .header-lang li a:hover {
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; color: <?php echo $theme_color; ?>;
} }
.header-lang li.active span { .header-lang li.active span {
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; color: <?php echo $theme_color; ?>;
} }
h2::after { h2::after {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
.page-category-marker { .page-category-marker {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
.teaser-box-color-brand-secondary .teaser-box-category-marker { .teaser-box-color-brand-secondary .teaser-box-category-marker {
border-bottom-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; border-bottom-color: <?php echo $theme_color; ?>;
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; color: <?php echo $theme_color; ?>;
} }
.teaser-box-color-brand-secondary .teaser-box-category-marker:hover { .teaser-box-color-brand-secondary .teaser-box-category-marker:hover {
@ -336,20 +375,25 @@ function kit_customize_css()
} }
.teaser-box-category-marker .icon { .teaser-box-category-marker .icon {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
.teaser-box-category-marker:hover { .teaser-box-category-marker:hover {
border-bottom-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; border-bottom-color: <?php echo $theme_color; ?>;
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; color: <?php echo $theme_color; ?>;
} }
ul.catFilter li.available:hover { ul.catFilter li.available:hover {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
} }
ul.catFilter li.active { ul.catFilter li.active {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>; background-color: <?php echo $theme_color; ?>;
}
.tx-indexedsearch-redMarkup {
font-weight: 400;
background-color: <?php echo hex2rgba($theme_color,0.1); ?>;
} }
</style> </style>