| | 200 | |
| | 201 | /** |
| | 202 | * Generates two variants of the accent color and returns all three colors as an array. |
| | 203 | * |
| | 204 | */ |
| | 205 | function twentyfourteen_generate_accent_colors( $color ) { |
| | 206 | $accent_1 = twentyfourteen_adjust_color( $color, 14 ); |
| | 207 | $accent_2 = twentyfourteen_adjust_color( $color, 71 ); |
| | 208 | |
| | 209 | return array( $color, $accent_1, $accent_2 ); |
| | 210 | } |
| | 211 | |
| | 212 | /** |
| | 213 | * Tweaks the brightness of a color by adjusting the r/g/b values by the given interval. |
| | 214 | * |
| | 215 | */ |
| | 216 | function twentyfourteen_adjust_color( $color, $steps ) { |
| | 217 | // convert shorthand to full hex |
| | 218 | if( strlen( $color ) == 3 ) { |
| | 219 | $color = str_repeat( substr( $color, 1, 1 ), 2 ) . str_repeat( substr( $color, 2, 1 ), 2 ) . str_repeat( substr( $color, 3, 1), 2 ); |
| | 220 | } |
| | 221 | |
| | 222 | // convert hex to rgb |
| | 223 | $rgb = array( hexdec( substr( $color, 1, 2 ) ), hexdec( substr( $color, 3, 2 ) ), hexdec( substr( $color, 5, 2 ) ) ); |
| | 224 | |
| | 225 | // adjust color and switch back to hex |
| | 226 | $hex = '#'; |
| | 227 | foreach ( $rgb as $c ) { |
| | 228 | $c += $steps; |
| | 229 | if( $c > 255 ) |
| | 230 | $c = 255; |
| | 231 | elseif( $c < 0 ) |
| | 232 | $c = 0; |
| | 233 | $hex .= str_pad( dechex( $c ), 2, '0', STR_PAD_LEFT); |
| | 234 | } |
| | 235 | |
| | 236 | return $hex; |
| | 237 | } |
| | 238 | |
| | 239 | /** |
| | 240 | * Outputs the css for the Theme Customizer options. |
| | 241 | * |
| | 242 | */ |
| | 243 | function twentyfourteen_customizer_styles() { |
| | 244 | list( $accent_color, $accent_1, $accent_2 ) = get_theme_mod( 'accent_color' ); |
| | 245 | |
| | 246 | // don't do anything if the current color is the default |
| | 247 | if ( $accent_color == '#24890d' ) |
| | 248 | return; |
| | 249 | |
| | 250 | $css = '/* custom accent color */ |
| | 251 | h1 a:hover, |
| | 252 | h2 a:hover, |
| | 253 | h3 a:hover, |
| | 254 | h4 a:hover, |
| | 255 | h5 a:hover, |
| | 256 | h6 a:hover, |
| | 257 | a, |
| | 258 | .primary-navigation ul ul a:hover, |
| | 259 | .entry-title a:hover, |
| | 260 | .cat-links a:hover, |
| | 261 | .site-content .post-navigation a:hover, |
| | 262 | .site-content .image-navigation a:hover, |
| | 263 | .comment-author a:hover, |
| | 264 | .comment-metadata a:hover, |
| | 265 | .comment-list .trackback a:hover, |
| | 266 | .comment-list .pingback a:hover, |
| | 267 | .content-sidebar a:hover, |
| | 268 | .paging-navigation .page-numbers.current { |
| | 269 | color: ' . $accent_color . '; |
| | 270 | } |
| | 271 | |
| | 272 | button:hover, |
| | 273 | html input[type="button"]:hover, |
| | 274 | input[type="reset"]:hover, |
| | 275 | input[type="submit"]:hover, |
| | 276 | button:focus, |
| | 277 | html input[type="button"]:focus, |
| | 278 | input[type="reset"]:focus, |
| | 279 | input[type="submit"]:focus, |
| | 280 | .header-extra, |
| | 281 | .social-links-toggle, |
| | 282 | .search-toggle, |
| | 283 | .bypostauthor .avatar, |
| | 284 | .widget-area button, |
| | 285 | .widget-area html input[type="button"], |
| | 286 | .widget-area input[type="reset"], |
| | 287 | .widget-area input[type="submit"], |
| | 288 | .widget_calendar a, |
| | 289 | .content-sidebar button:hover, |
| | 290 | .content-sidebar html input[type="button"]:hover, |
| | 291 | .content-sidebar input[type="reset"]:hover, |
| | 292 | .content-sidebar input[type="submit"]:hover, |
| | 293 | .content-sidebar button:focus, |
| | 294 | .content-sidebar html input[type="button"]:focus, |
| | 295 | .content-sidebar input[type="reset"]:focus, |
| | 296 | .content-sidebar input[type="submit"]:focus, |
| | 297 | .page-links a:hover { |
| | 298 | background-color: ' . $accent_color . '; |
| | 299 | } |
| | 300 | |
| | 301 | ::-moz-selection { |
| | 302 | background: ' . $accent_color . '; |
| | 303 | } |
| | 304 | |
| | 305 | ::selection { |
| | 306 | background: ' . $accent_color . '; |
| | 307 | } |
| | 308 | |
| | 309 | .page-links a:hover, |
| | 310 | .paging-navigation .page-numbers.current { |
| | 311 | border-color: ' . $accent_color . '; |
| | 312 | } |
| | 313 | |
| | 314 | /* generated variant of custom accent color: slightly lighter */ |
| | 315 | .social-links-toggle:hover, |
| | 316 | .search-toggle:hover, |
| | 317 | .social-links-toggle.active, |
| | 318 | .search-toggle.active, |
| | 319 | .social-links, |
| | 320 | .search-box, |
| | 321 | .widget-area button:hover, |
| | 322 | .widget-area html input[type="button"]:hover, |
| | 323 | .widget-area input[type="reset"]:hover, |
| | 324 | .widget-area input[type="submit"]:hover, |
| | 325 | .widget-area button:focus, |
| | 326 | .widget-area html input[type="button"]:focus, |
| | 327 | .widget-area input[type="reset"]:focus, |
| | 328 | .widget-area input[type="submit"]:focus, |
| | 329 | .widget-area button:active, |
| | 330 | .widget-area html input[type="button"]:active, |
| | 331 | .widget-area input[type="reset"]:active, |
| | 332 | .widget-area input[type="submit"]:active, |
| | 333 | .widget_calendar a:hover { |
| | 334 | background-color: ' . $accent_1 . '; |
| | 335 | } |
| | 336 | |
| | 337 | /* generated variant of custom accent color: lighter */ |
| | 338 | button:active, |
| | 339 | html input[type="button"]:active, |
| | 340 | input[type="reset"]:active, |
| | 341 | input[type="submit"]:active, |
| | 342 | .content-sidebar button:active, |
| | 343 | .content-sidebar html input[type="button"]:active, |
| | 344 | .content-sidebar input[type="reset"]:active, |
| | 345 | .content-sidebar input[type="submit"]:active { |
| | 346 | background-color: ' . $accent_2 . '; |
| | 347 | } |
| | 348 | |
| | 349 | a:hover, |
| | 350 | a:focus, |
| | 351 | a:active, |
| | 352 | .primary-navigation li.current_page_item > a, |
| | 353 | .primary-navigation li.current-menu-item > a, |
| | 354 | .secondary-navigation a:hover, |
| | 355 | #secondary .current_page_item > a, |
| | 356 | #secondary .current-menu-item > a, |
| | 357 | #featured-content .entry-meta a:hover, |
| | 358 | #featured-content .entry-title a:hover, |
| | 359 | #featured-content .more-link, |
| | 360 | .widget-area a:hover { |
| | 361 | color: ' . $accent_2 . '; |
| | 362 | }'; |
| | 363 | |
| | 364 | wp_add_inline_style( 'twentyfourteen-style', $css ); |
| | 365 | } |
| | 366 | add_action( 'wp_enqueue_scripts', 'twentyfourteen_customizer_styles' ); |
| | 367 | No newline at end of file |
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
