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