Notes

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'bik-script', // name your script so that you can attach other scripts and de-register, etc.
get_stylesheet_directory_uri() . '/js/script.js', // this is the location of your script file
array('jquery'), // this array lists the scripts upon which your script depends
false,
true
);
}

add_action( 'admin_enqueue_scripts', 'add_admin_scripts');

function add_admin_scripts() {
// $hook_suffix to apply a check for admin page.
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'my-script-handle', get_stylesheet_directory_uri() . '/js/adminscript.js', array('jquery', 'wp-color-picker' ), false, true );

}

add_action("admin_menu", "add_theme_menu_item");

function add_theme_menu_item()
{
add_menu_page("Floating Box", "Floating Box", "manage_options", "theme-panel", "theme_settings_page", null, 99);
}

function theme_settings_page()
{
?>
<div class="wrap">
<h1>Floating Box Customization Panel</h1>
<form method="post" action="options.php">
<?php
settings_fields("section");
do_settings_sections("theme-options");
submit_button();
?>
</form>
</div>
<?php
}

function display_box_main_text_element()
{
?>
<input type="text" name="my_box_main_text" id="my_box_main_text" value="<?php echo get_option('my_box_main_text'); ?>" />
<?php
}

function display_box_sub_text_element()
{
?>
<input type="text" name="my_box_sub_text" id="my_box_sub_text" value="<?php echo get_option('my_box_sub_text'); ?>" />
<?php
}

function display_box_button_text_element()
{
?>
<input type="text" name="my_box_button_text" id="my_box_button_text" value="<?php echo get_option('my_box_button_text'); ?>" />
<?php
}

function display_box_button_uri_element()
{
?>
<input type="text" name="my_box_button_uri" id="my_box_button_uri" value="<?php echo get_option('my_box_button_uri'); ?>" />
<?php
}

function display_main_color_picker()
{
?>
<input type="text" class="my_color_picker_class" name="my_main_color_picker" value="<?php echo get_option('my_main_color_picker'); ?>" />
<?php
}

function display_secondary_color_picker()
{
?>
<input type="text" class="my_color_picker_class" name="my_secondary_color_picker" value="<?php echo get_option('my_secondary_color_picker'); ?>" />
<?php
}

function display_main_button_color_picker()
{
?>
<input type="text" class="my_color_picker_class" name="my_main_button_color_picker" value="<?php echo get_option('my_main_button_color_picker'); ?>" />
<?php
}

function display_secondary_button_color_picker()
{
?>
<input type="text" class="my_color_picker_class" name="my_secondary_button_color_picker" value="<?php echo get_option('my_secondary_button_color_picker'); ?>" />
<?php
}

function display_main_font_color_picker()
{
?>
<input type="text" class="my_color_picker_class" name="my_main_font_color_picker" value="<?php echo get_option('my_main_font_color_picker'); ?>" />
<?php
}

function display_button_font_color_picker()
{
?>
<input type="text" class="my_color_picker_class" name="my_button_font_color_picker" value="<?php echo get_option('my_button_font_color_picker'); ?>" />
<?php
}

function display_main_font_size_element()
{
?>
<input type="text" name="my_main_font_size_text" id="my_main_font_size_text" value="<?php echo get_option('my_main_font_size_text'); ?>" />
<?php
}

function display_secondary_font_size_element()
{
?>
<input type="text" name="my_secondary_font_size_text" id="my_secondary_font_size_text" value="<?php echo get_option('my_secondary_font_size_text'); ?>" />
<?php
}

function display_button_font_size_element()
{
?>
<input type="text" name="my_button_font_size_text" id="my_button_font_size_text" value="<?php echo get_option('my_button_font_size_text'); ?>" />
<?php
}

add_action("admin_init", "display_theme_panel_fields");

function display_theme_panel_fields()
{
add_settings_section("text_section", "Text Settings", null, "theme-options");
add_settings_section("button_section", "Button Settings", null, "theme-options");

add_settings_field("my_box_main_text", "Main Text", "display_box_main_text_element", "theme-options", "text_section");
add_settings_field("my_box_sub_text", "Sub Text", "display_box_sub_text_element", "theme-options", "text_section");

add_settings_field("my_box_button_text", "Button Text", "display_box_button_text_element", "theme-options", "button_section");
add_settings_field("my_box_button_uri", "Button Link", "display_box_button_uri_element", "theme-options", "button_section");

add_settings_field("my_main_color_picker", "Main Color", "display_main_color_picker", "theme-options", "text_section");
add_settings_field("my_secondary_color_picker", "Secondary Color", "display_secondary_color_picker", "theme-options", "text_section");

add_settings_field("my_main_button_color_picker", "Button Color", "display_main_button_color_picker", "theme-options", "button_section");
add_settings_field("my_secondary_button_color_picker", "Secondary Button Color", "display_secondary_button_color_picker", "theme-options", "button_section");

add_settings_field("my_main_font_color_picker", "Font Color", "display_main_font_color_picker", "theme-options", "text_section");
add_settings_field("my_button_font_color_picker", " Button Font Color", "display_button_font_color_picker", "theme-options", "button_section");

add_settings_field("my_main_font_size_text", " Main Font Size", "display_main_font_size_element", "theme-options", "text_section");
add_settings_field("my_secondary_font_size_text", " Sub Text Font Size", "display_secondary_font_size_element", "theme-options", "text_section");
add_settings_field("my_button_font_size_text", " Button Font Size", "display_button_font_size_element", "theme-options", "button_section");

register_setting("text_section", "my_box_main_text");
register_setting("text_section", "my_box_sub_text");

register_setting("button_section", "my_box_button_text");
register_setting("button_section", "my_box_button_uri");

register_setting("text_section", "my_main_color_picker");
register_setting("text_section", "my_secondary_color_picker");

register_setting("button_section", "my_main_button_color_picker");
register_setting("button_section", "my_secondary_button_color_picker");

register_setting("text_section", "my_main_font_color_picker");
register_setting("button_section", "my_button_font_color_picker");

register_setting("text_section", "my_main_font_size_text");
register_setting("text_section", "my_secondary_font_size_text");
register_setting("button_section", "my_button_font_size_text");
}

add_action('wp_footer', 'display_floating_box');

//function display_floating_box() {
// ?><!--<div id="floatingbox">-->
<!-- <a href="--><?php //echo get_option('my_button_uri', '/survey')?><!--">--><?php //echo get_option('my_button_text', 'CONTACT US')?><!--</a></div>-->
<!-- --><?php
//}

function display_floating_box() {
$fromcolor = get_option('my_main_color_picker');
$tocolor = get_option('my_secondary_color_picker');

$buttonfromcolor = get_option('my_main_button_color_picker');
$buttontocolor = get_option('my_secondary_button_color_picker');

$mainfontcolor = get_option('my_main_font_color_picker');
$buttonfontcolor = get_option('my_button_font_color_picker');

$mainfontsize = get_option('my_main_font_size_text');
$subfontsize = get_option('my_secondary_font_size_text');
$buttonfontsize = get_option('my_button_font_size_text');
?>
<div id="wrapper_box">
<div id="bouncing_box" style="<?php print_gradient($fromcolor, $tocolor); ?>">
<div id="cross_div">
<image id="cross" src="wp-contentthemesVela-childimagescross.png" />
</div>
<div id="collapse_div">
<div id="heading_div">
<h2 style="<?php print_font_style($mainfontcolor, $mainfontsize); ?>"><?php echo get_option('my_box_main_text', 'CONTACT US');?></h2>
</div>
<div id="paragraph_div">
<p style="<?php print_font_style($mainfontcolor, $subfontsize); ?> "><?php echo get_option('my_box_sub_text'); ?></p>
</div>
</div>
<!--<a href="/survey">Take me to...</a>-->
<div id="button_div" style="<?php print_gradient($buttonfromcolor, $buttontocolor);?>">
<a href="survey" id="open_survey" style="<?php print_font_style($buttonfontcolor, $buttonfontsize);?>"><?php echo get_option('my_box_button_text'); ?></a>
</div>
</div>
</div>
<?php
}


function print_gradient($fromcolor, $tocolor)
{
if(!is_null($fromcolor) && !is_null($tocolor))
{
$bg = 'background:';
$first = $bg . $fromcolor . ';';
$second = $bg . ' -webkit-linear-gradient(left top, ' . $fromcolor . ', ' . $tocolor . ');';
$third = $bg . ' -o-linear-gradient(bottom right, ' . $fromcolor . ', ' . $tocolor . ');';
$fourth = $bg . ' -moz-linear-gradient(bottom right, ' . $fromcolor . ', ' . $tocolor . ');';
$fifth = $bg . ' linear-gradient(to bottom right, ' . $fromcolor . ', ' . $tocolor . ');';

echo $first . ' ' . $second . ' ' . $third . ' ' . $fourth . ' ' . $fifth;
}
}

function print_font_style($color, $size)
{
if(!is_null($size))
echo 'font-size: ' . $size . ';';
if(!is_null($color))
echo 'color: ' . $color . ';';
}

?>