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