Twenty Eleven: theme options - see #17198

* First pass at Link Color CSS rules
 * Add new function to return default values
 * Implement better validation for hex color value
 * Fix missing esc_attr()

git-svn-id: http://svn.automattic.com/wordpress/trunk@17732 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
lancewillett 2011-04-27 23:03:27 +00:00
parent dc20019a24
commit e5425ba17a
2 changed files with 53 additions and 70 deletions

View File

@ -75,15 +75,22 @@ function twentyeleven_layouts() {
return $layout_options; return $layout_options;
} }
/**
* Return the default Twenty Eleven theme option values
*/
function twentyeleven_get_default_theme_options() {
return array(
'color_scheme' => 'light',
'link_color' => '#1b8be0',
'theme_layout' => 'content-sidebar',
);
}
/** /**
* Return the current Twenty Eleven theme options, with default values as fallback * Return the current Twenty Eleven theme options, with default values as fallback
*/ */
function twentyeleven_get_theme_options() { function twentyeleven_get_theme_options() {
$defaults = array( $defaults = twentyeleven_get_default_theme_options();
'color_scheme' => 'light',
'link_color' => '1b8be0',
'theme_layout' => 'content-sidebar',
);
$options = get_option( 'twentyeleven_theme_options', $defaults ); $options = get_option( 'twentyeleven_theme_options', $defaults );
return $options; return $options;
@ -205,7 +212,7 @@ function theme_options_do_page() {
</table> </table>
<p class="submit"> <p class="submit">
<input type="submit" class="button-primary" value="<?php _e( 'Save Options', 'twentyeleven' ); ?>" /> <input type="submit" class="button-primary" value="<?php esc_attr_e( 'Save Options', 'twentyeleven' ); ?>" />
</p> </p>
</form> </form>
</div> </div>
@ -214,25 +221,33 @@ function theme_options_do_page() {
/** /**
* Sanitize and validate input. Accepts an array, return a sanitized array. * Sanitize and validate input. Accepts an array, return a sanitized array.
*
* todo set up Reset Options action
*/ */
function twentyeleven_theme_options_validate( $input ) { function twentyeleven_theme_options_validate( $input ) {
// todo get defaults, and use insteadd of null for fallback $defaults = twentyeleven_get_default_theme_options();
// could also be used to trigger a Reset Options action
// Our color scheme option must actually be in our array of color scheme options // Color scheme must be in our array of color scheme options
if ( ! isset( $input['color_scheme'] ) ) if ( ! isset( $input['color_scheme'] ) || ! array_key_exists( $input['color_scheme'], twentyeleven_color_schemes() ) )
$input['color_scheme'] = null; $input['color_scheme'] = $defaults['color_scheme'];
if ( ! array_key_exists( $input['color_scheme'], twentyeleven_color_schemes() ) )
$input['color_scheme'] = null;
// Our link color option must be safe text with no HTML tags // Link color must be 3 or 6 hexadecimal characters
$input['link_color'] = wp_filter_nohtml_kses( $input['link_color'] ); if ( ! isset( $input[ 'link_color' ] ) ) {
$input['link_color'] = $defaults['link_color'];
} else {
if ( preg_match( '/^#?([a-f0-9]{3}){1,2}$/i', $input['link_color'] ) ) {
$link_color = $input['link_color'];
// If color value doesn't have a preceding hash, add it
if ( false === strpos( $link_color, '#' ) )
$link_color = '#' . $link_color;
} else {
$input['link_color'] = $defaults['link_color'];
}
}
// Our theme layout option must actually be in our array of theme layout options // Theme layout must be in our array of theme layout options
if ( ! isset( $input['theme_layout'] ) ) if ( ! isset( $input['theme_layout'] ) || ! array_key_exists( $input['theme_layout'], twentyeleven_layouts() ) )
$input['theme_layout'] = null; $input['theme_layout'] = $defaults['theme_layout'];
if ( ! array_key_exists( $input['theme_layout'], twentyeleven_layouts() ) )
$input['theme_layout'] = null;
return $input; return $input;
} }
@ -286,16 +301,15 @@ function twentyeleven_link_color() {
$current_link_color = $options['link_color']; $current_link_color = $options['link_color'];
// Is the link color just the default color? // Is the link color just the default color?
if ( '1b8be0' == $current_link_color ) : if ( '#1b8be0' == $current_link_color ) :
return; // we don't need to do anything then return; // we don't need to do anything then
else : else :
?> ?>
<style> <style>
/* Link color */ /* Link color */
a, a,
.entry-title a:hover { .entry-title a:hover {
color: <?php echo $current_link_color ?>; color: <?php echo $current_link_color; ?>;
} }
</style> </style>
<?php <?php

View File

@ -310,15 +310,15 @@ input[type=text] {
/* Links */ /* Links */
a { a {
color: #444; color: #1B8BE0;
text-decoration: none;
} }
a:visited { a:visited {
color: #444;
} }
a:focus, a:focus,
a:active, a:active,
a:hover { a:hover {
color: #1b8be0; text-decoration: underline;
} }
@ -454,6 +454,8 @@ a:hover {
} }
#branding #s { #branding #s {
background: url(images/search.png) no-repeat 5px 6px; background: url(images/search.png) no-repeat 5px 6px;
-moz-border-radius: 2px;
border-radius: 2px;
float: right; float: right;
font-size: 14px; font-size: 14px;
height: 22px; height: 22px;
@ -515,7 +517,6 @@ a:hover {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
letter-spacing: 0; letter-spacing: 0;
text-decoration: none;
text-transform: none; text-transform: none;
} }
.hentry { .hentry {
@ -556,14 +557,11 @@ a:hover {
line-height: 18px; line-height: 18px;
} }
.entry-meta a { .entry-meta a {
color: #222;
font-weight: bold; font-weight: bold;
text-decoration: none;
} }
.entry-meta a:focus, .entry-meta a:focus,
.entry-meta a:active, .entry-meta a:active,
.entry-meta a:hover { .entry-meta a:hover {
color: #1b8be0;
} }
.entry-content, .entry-content,
.entry-summary { .entry-summary {
@ -585,10 +583,8 @@ a:hover {
text-transform: uppercase; text-transform: uppercase;
} }
.entry-content a { .entry-content a {
color: #1b8be0;
} }
.entry-content a:hover { .entry-content a:hover {
color: #ff4b33;
} }
.entry-content table, .entry-content table,
.comment-content table { .comment-content table {
@ -642,8 +638,8 @@ dl.gallery-item {
text-decoration: none; text-decoration: none;
} }
.page-link a:hover { .page-link a:hover {
background: #1b8be0; background: #777;
color: #bfddf3; color: #fff;
font-weight: bold; font-weight: bold;
} }
.page-link span { .page-link span {
@ -729,9 +725,9 @@ dl.gallery-item {
line-height: 46px; line-height: 46px;
} }
.entry-header .comments-link a:hover { .entry-header .comments-link a:hover {
background: #1b8be0; background: #777;
border-color: #0861a5; color: #fff;
color: #bfddf3; border-color: #555;
} }
.entry-header .comments-link .leave-reply { .entry-header .comments-link .leave-reply {
font-size: 14px; font-size: 14px;
@ -766,10 +762,8 @@ dl.gallery-item {
left: 0; left: 0;
} }
.singular .entry-header a { .singular .entry-header a {
color: #1b8be0;
} }
.singular .entry-header a:hover { .singular .entry-header a:hover {
color: #ff4b33;
} }
.singular footer.entry-meta { .singular footer.entry-meta {
} }
@ -790,6 +784,7 @@ dl.gallery-item {
width: 33%; width: 33%;
} }
.singular .entry-meta .edit-link a { .singular .entry-meta .edit-link a {
color: #fff;
position: absolute; position: absolute;
bottom: auto; bottom: auto;
left: 50px; left: 50px;
@ -1218,16 +1213,13 @@ p img,
padding: 0 0 1.625em; padding: 0 0 1.625em;
} }
#content nav a { #content nav a {
color: #1b8be0;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
line-height: 2.2em; line-height: 2.2em;
text-decoration: none;
} }
#content nav a:focus, #content nav a:focus,
#content nav a:active, #content nav a:active,
#content nav a:hover { #content nav a:hover {
color: #ff4b33;
} }
#nav-above { #nav-above {
padding: 0 0 1.625em; padding: 0 0 1.625em;
@ -1292,12 +1284,11 @@ p img,
font-size: 13px; font-size: 13px;
} }
.widget a { .widget a {
color: #1b8be0;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
} }
.widget a:hover { .widget a:hover {
color: #ff4b33; text-decoration: underline;
} }
/* Search Widget */ /* Search Widget */
@ -1473,14 +1464,11 @@ section.ephemera .entry-title a span {
margin: 1.625em 0 0; margin: 1.625em 0 0;
} }
.comment-meta a { .comment-meta a {
color: #1b8be0;
text-decoration: none;
font-weight: bold; font-weight: bold;
} }
.comment-meta a:focus, .comment-meta a:focus,
.comment-meta a:active, .comment-meta a:active,
.comment-meta a:hover { .comment-meta a:hover {
color: #ff4b33;
} }
.commentlist .avatar { .commentlist .avatar {
-moz-border-radius: 3px; -moz-border-radius: 3px;
@ -1512,13 +1500,13 @@ section.ephemera .entry-title a span {
} }
.commentlist .children .bypostauthor > article .comment-meta .vcard .avatar { .commentlist .children .bypostauthor > article .comment-meta .vcard .avatar {
} }
.comment-reply-link { a.comment-reply-link {
color: #1778c2;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
text-decoration: none;
} }
.comment-reply-link:hover { .comment-reply-link:hover,
.comment-reply-link:active,
.comment-reply-link:focus {
} }
/* Post author highlighting */ /* Post author highlighting */
@ -1531,33 +1519,26 @@ section.ephemera .entry-title a span {
color: #ccc; color: #ccc;
} }
.commentlist > li.bypostauthor .comment-meta a { .commentlist > li.bypostauthor .comment-meta a {
color: #ccc;
text-decoration: none;
font-weight: bold; font-weight: bold;
} }
.commentlist > li.bypostauthor .comment-meta a:focus, .commentlist > li.bypostauthor .comment-meta a:focus,
.commentlist > li.bypostauthor .comment-meta a:active, .commentlist > li.bypostauthor .comment-meta a:active,
.commentlist > li.bypostauthor .comment-meta a:hover { .commentlist > li.bypostauthor .comment-meta a:hover {
color: #ff4b33;
} }
.commentlist > li.bypostauthor:before { .commentlist > li.bypostauthor:before {
content: url(images/comment-arrow-bypostauthor.png); content: url(images/comment-arrow-bypostauthor.png);
} }
.commentlist > li.bypostauthor .comment-content a { .commentlist > li.bypostauthor .comment-content a {
color: #1b8be0;
} }
.commentlist > li.bypostauthor .comment-content a:focus, .commentlist > li.bypostauthor .comment-content a:focus,
.commentlist > li.bypostauthor .comment-content a:active, .commentlist > li.bypostauthor .comment-content a:active,
.commentlist > li.bypostauthor .comment-content a:hover { .commentlist > li.bypostauthor .comment-content a:hover {
color: #ff4b33;
} }
.commentlist > li.bypostauthor .comment-reply-link { .commentlist > li.bypostauthor .comment-reply-link {
color: #ccc;
} }
.commentlist > li.bypostauthor .comment-reply-link:focus, .commentlist > li.bypostauthor .comment-reply-link:focus,
.commentlist > li.bypostauthor .comment-reply-link:active, .commentlist > li.bypostauthor .comment-reply-link:active,
.commentlist > li.bypostauthor .comment-reply-link:hover { .commentlist > li.bypostauthor .comment-reply-link:hover {
color: #ff4b33;
} }
/* Post Author threaded comments */ /* Post Author threaded comments */
@ -1565,12 +1546,10 @@ section.ephemera .entry-title a span {
.commentlist > li.bypostauthor .children .comment-meta, .commentlist > li.bypostauthor .children .comment-meta,
.commentlist > li.bypostauthor .children .comment-meta a, .commentlist > li.bypostauthor .children .comment-meta a,
.commentlist > li.bypostauthor .children .comment-reply-link { .commentlist > li.bypostauthor .children .comment-reply-link {
color: #333;
} }
.commentlist > li.bypostauthor .children .comment-meta a:focus, .commentlist > li.bypostauthor .children .comment-meta a:focus,
.commentlist > li.bypostauthor .children .comment-meta a:active, .commentlist > li.bypostauthor .children .comment-meta a:active,
.commentlist > li.bypostauthor .children .comment-meta a:hover { .commentlist > li.bypostauthor .children .comment-meta a:hover {
color: #ff4b33;
} }
.commentlist .children > li.bypostauthor { .commentlist .children > li.bypostauthor {
background: #222; background: #222;
@ -1581,8 +1560,6 @@ section.ephemera .entry-title a span {
color: #ccc; color: #ccc;
} }
.commentlist .children > li.bypostauthor > article .comment-meta a { .commentlist .children > li.bypostauthor > article .comment-meta a {
color: #ccc;
text-decoration: none;
font-weight: bold; font-weight: bold;
} }
.commentlist .children > li.bypostauthor > article .comment-reply-link { .commentlist .children > li.bypostauthor > article .comment-reply-link {
@ -1594,7 +1571,6 @@ section.ephemera .entry-title a span {
.commentlist .children > li.bypostauthor > article .comment-reply-link:focus, .commentlist .children > li.bypostauthor > article .comment-reply-link:focus,
.commentlist .children > li.bypostauthor > article .comment-reply-link:active, .commentlist .children > li.bypostauthor > article .comment-reply-link:active,
.commentlist .children > li.bypostauthor > article .comment-reply-link:hover { .commentlist .children > li.bypostauthor > article .comment-reply-link:hover {
color: #ff4b33;
} }
.commentlist .children > li.bypostauthor > article .comment-content a { .commentlist .children > li.bypostauthor > article .comment-content a {
color: #1b8be0; color: #1b8be0;
@ -1602,7 +1578,6 @@ section.ephemera .entry-title a span {
.commentlist .children > li.bypostauthor > article .comment-content a:focus, .commentlist .children > li.bypostauthor > article .comment-content a:focus,
.commentlist .children > li.bypostauthor > article .comment-content a:active, .commentlist .children > li.bypostauthor > article .comment-content a:active,
.commentlist .children > li.bypostauthor > article .comment-content a:hover { .commentlist .children > li.bypostauthor > article .comment-content a:hover {
color: #ff4b33;
} }
/* Comment Form */ /* Comment Form */
@ -1618,12 +1593,10 @@ section.ephemera .entry-title a span {
width: 68.9%; width: 68.9%;
} }
#respond a { #respond a {
color: #ccc;
} }
#respond a:focus, #respond a:focus,
#respond a:active, #respond a:active,
#respond a:hover { #respond a:hover {
color: #ff4b33;
} }
#respond input[type="text"], #respond input[type="text"],
#respond textarea { #respond textarea {
@ -1686,9 +1659,6 @@ section.ephemera .entry-title a span {
font-size: 13px; font-size: 13px;
} }
#respond .logged-in-as a { #respond .logged-in-as a {
color: #478fa2;
font-weight: bold;
text-decoration: none;
} }
#respond p { #respond p {
margin: 10px 0; margin: 10px 0;
@ -1816,7 +1786,6 @@ p.comment-form-comment {
text-align: center; text-align: center;
} }
#site-generator a { #site-generator a {
text-decoration: none;
font-weight: bold; font-weight: bold;
} }
#site-generator a:focus, #site-generator a:focus,