• /wp-admin/css/farbtastic-rtl.css
• /wp-admin/css/install-rtl.css

Please remove them from the list of files included in WordPress.

https://www.ads-software.com/plugins/total-security/

It does not even look like you are using it on the admin section of this plugin. I don’t see the color picker opening anywhere.

I like the plugin but loading extra css and scripts for all visitors when you only need them in the admin is poor coding IMHO.

https://www.ads-software.com/extend/plugins/getsocial/

It works, but not right away. The logo must be uploaded twice before it’ll show up and you can’t use the color picker until after you’ve typed some value in the color fields and saved.

<?php

$options = get_option('marathon');

// This file adds a "Theme Options" page under "Appearance" and allows the user to upload a logo and set colors.
add_action('admin_menu', 'create_theme_options_page');
add_action('admin_init', 'register_and_build_fields');

function create_theme_options_page() {
$page = add_theme_page('Theme Options', 'Theme Options', 'administrator', __FILE__, 'build_options_page');
add_action('admin_print_styles-' . $page, 'admin_scripts' );
}

function admin_scripts() {
wp_enqueue_style( 'farbtastic' );
wp_enqueue_script( 'farbtastic' );
wp_enqueue_script( 'marathon', get_template_directory_uri() . '/assets/theme-options.js', array( 'farbtastic', 'jquery' ) );
}

function build_options_page() {

?>
<div id="theme-options-wrap" class="wrap">
<div class="icon32" id="icon-themes">
</div>
<h2>Theme Options</h2>
<p> </p>

<?php if( isset($_GET['settings-updated']) ) {?>
<div id="message" class="updated fade">
<p><?php _e('Settings saved. Visit your site to see the changes.') ?></p>
</div>
<?php } ?>

<form method="post" action="options.php" enctype="multipart/form-data">

<?php wp_nonce_field( 'update-options' ); ?>
<?php settings_fields('marathon'); ?>
<?php do_settings_sections(__FILE__); ?>

<p class="submit"><input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" /></p>
</form>
</div><!-- theme options wrap -->
<?php
}

function register_and_build_fields(){
register_setting('marathon', 'marathon', 'validate_setting');
add_settings_section('main_section', ' ', 'section_cb', __FILE__);
add_settings_field('logo','Logo Upload','logo_setting',__FILE__,'main_section');
add_settings_field('ore_nav_links','Menu Links','navlinks_color',__FILE__,'main_section');
}

// logo
function logo_setting(){
$options = get_option('marathon');
echo "<img src='{$options['logo']}'; style='max-height: 100px; background: #454545;' />
";
echo "<input type='file' name='logo' />";
echo "<p>Your logo should be no larger than 950px wide and 125px high.</p>";
}

function navlinks_color(){
$options = get_option('marathon');
?>
<div class="colorpicker" style="position: relative;">
<input type="text" name="marathon[ore_nav_links]" value="<?php echo esc_attr( $options['ore_nav_links'] ); ?>" style="background: <?php echo esc_attr( $options['ore_nav_links'] ); ?>" id="ore_nav_links" />
Select a Color
<div style='z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;'></div>
</div>
<?php
}

function section_cb() {}

function validate_setting($marathon) {
$keys = array_keys($_FILES);
$i = 0;

foreach( $_FILES as $image ) {
// if a file was uploaded
if ( $image['size'] ) {
// is it an image?
if ( preg_match('/(jpg|jpeg|png|gif)$/i', $image['type']) ) {
$override = array('test_form' => false);
$file = wp_handle_upload($image, $override);
$marathon[$keys[$i]] = $file['url'];
}
else {
wp_die('No image was uploaded');
}
}
else {
$options = get_option('marathon');
$marathon[$keys[$i]] = $options[$keys[$i]];
}
$i++;
}

return $marathon;
}

Any suggestions to fix it?

I’m running a tech blog and I protect my wp-admin directory with an .htaccess and .htpasswd file. Worked for months with no problem.

I noticed recently on a new web browser that I was required to authenticate but it was after the main blog page loaded. I figured for some reason some part of the page was being loaded from the wp-admin directory for some reason, so I did a search in the source and found this:

<link rel=’stylesheet’ id=’farbtastic-css’ href=’https://keepingitclassless.net/wp-admin/css/farbtastic.css?ver=1.3u’ type=’text/css’ media=’all’ />

What is that, and what could be generating it?

Sorry I probably wouldn’t be able to tell you what I changed to make this appear because I’m usually authenticated when logged in to my site and therefore wouldn’t see the prompt. I only noticed it when I used a new web browser to access the site and didn’t have cached credentials.

It did take a couple of days of my time, I got hung up on using the Farbtastic color picker for all color swatches, I did get it working well in the end.

I liked the global link color changer, but not that it made a hover link of the title, and the other parts like the menu and titles I wanted more control over.

The style elements are just coded into an array, nothing special just a few lines of code, the styles use the same method as the global links, and it only works with twenty eleven as a child theme.

I built in a nice bit of code from a 2002 colors sample I found, this looks at all the colors in the selected header image and displays them with variants, so we can match the theme to our header colors.

Here is my post with an overveiw of the child theme.

Here is an overview on YouTube

Regards

David

I have had a dig in the admin files for an example, I found the background-color example, this has a script just for the one textbox, as does the header text, but I cannot find an example with multi textboxes.

I have copied the background color js and added it to pastebin:
https://digitalraindrops.pastebin.com/p4TXqL75

I can add a class (.color) to all color boxes, but I do not know how to code the following scenario.

Make the script above dynamic, so whichever textbox has the focus can set and return from the color picker.

I found this code for a .focus script which I am trying to adapt and merge with the above code.

$(document).ready(function() {
    var f = jQuery.farbtastic('#pickcolor');
    var selected;
    jQuery('.color')
      .each(function () { f.linkTo(this); })
      .focus(function() {
        if (selected) {
          jQuery(selected).removeClass('color-selected');
        }
        f.linkTo(this);
        jQuery(selected = this).addClass('color-selected');
      });
  });
 </script>

I will add a class of .color to the text boxes, and the id will be used to store the result.

If I can get some code working then I will post a good working theme options solution for all to use!

Thanks in advance!

David

jQuery.fn.farbtastic = function (callback) {
jQuery.farbtastic(this, callback);
return this;
};

Does anyone know what the problem is here?

I’m trying to figure out if there is a way to initialize each widget instance in the sidebar when it is dropped into the sidebar area. The widget works once it has been saved once, but that sucks. Anyone know enough about what’s going on in the drag/drop of the widget interface to help me tie my Farbtastic initialization code into it?

thanks!
Brandon