Simple Banner - Version 1.0.1

Version Description

  • Fixed readme and added logo.
Download this release

Release Info

Developer rpetersen29
Plugin Icon 128x128 Simple Banner
Version 1.0.1
Comparing to
See all releases

Version 1.0.1

Files changed (4) hide show
  1. readme.txt +59 -0
  2. simple-banner.css +15 -0
  3. simple-banner.js +4 -0
  4. simple-banner.php +182 -0
readme.txt ADDED
@@ -0,0 +1,59 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Simple Banner ===
2
+ Contributors: rpetersen29
3
+ Donate link:
4
+ Tags: cta, banner, announcement, notification, bar, free, hello bar, hellobar
5
+ Requires at least: 3.0.1
6
+ Tested up to: 4.2.2
7
+ Stable tag: 1.0.1
8
+ License: GPLv2 or later
9
+ License URI: http://www.gnu.org/licenses/gpl-2.0.html
10
+
11
+ Display a simple banner/bar at the top of your website.
12
+
13
+ == Description ==
14
+
15
+ This plugin makes it easy to display a simple announcement banner or bar at the top of your website. You can easily customize the color of the links, text, and background of the bar from within the settings. You can also customize to your heart's desire by adding your own custom CSS. There's also a fancy preview section within the settings so you can see your changes before you save them.
16
+
17
+ == Installation ==
18
+
19
+ = From your WordPress dashboard =
20
+
21
+ 1. Visit 'Plugins > Add New'
22
+ 2. Search for 'Simple Banner'
23
+ 3. Activate 'Simple Banner' from your Plugins page.
24
+ 4. Visit 'Simple Banner' in the sidebar to create a new banner.
25
+
26
+ = From WordPress.org =
27
+
28
+ 1. Download 'Simple Banner'.
29
+ 2. Upload the 'simple-banner' directory to your '/wp-content/plugins/' directory, using your favorite method (ftp, sftp, scp, etc...)
30
+ 3. Activate 'Simple Banner' from your Plugins page.
31
+ 4. Visit 'Simple Banner' in the sidebar to create a new banner.
32
+
33
+ == Frequently Asked Questions ==
34
+
35
+ = Can I create my own CSS for the banner? =
36
+
37
+ Yes.
38
+
39
+ == Screenshots ==
40
+
41
+ 1. This is the first screen shot.
42
+ 2. This is the second screen shot.
43
+ 2. This is the third screen shot.
44
+
45
+ == Changelog ==
46
+
47
+ = 1.0.1 =
48
+ * Fixed readme and added logo.
49
+
50
+ = 1.0.0 =
51
+ * First Version.
52
+
53
+ == Upgrade Notice ==
54
+
55
+ = 1.0.1 =
56
+ Just updated some stuff for the readme. No functionality change.
57
+
58
+ = 1.0.0 =
59
+ This is the first version.
simple-banner.css ADDED
@@ -0,0 +1,15 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .simple-banner {
2
+ width: 100%;
3
+ background: #024985;
4
+ text-align: center;
5
+ display: none; }
6
+ @media only screen and (min-width: 901px) {
7
+ .simple-banner {
8
+ display: block; } }
9
+ .simple-banner .simple-banner-text {
10
+ color: #ffffff;
11
+ font-size: 1.1em;
12
+ font-weight: 700;
13
+ padding: 10px; }
14
+ .simple-banner .simple-banner-text a {
15
+ color: #f16521;}
simple-banner.js ADDED
@@ -0,0 +1,4 @@
 
 
 
 
1
+ $(document).ready(function() {
2
+ $('<div id="simple-banner" class="simple-banner"></div>')
3
+ .prependTo('body');
4
+ });
simple-banner.php ADDED
@@ -0,0 +1,182 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Plugin Name: Simple Banner
4
+ * Plugin URI: https://github.com/rpetersen29/simple-banner
5
+ * Description: Display a simple banner at the top of your website.
6
+ * Version: 1.0.1
7
+ * Author: Ryan Petersen
8
+ * Author URI: http://rpetersen29.github.io/
9
+ * License: GPL2
10
+ *
11
+ * @package Simple Banner
12
+ * @version 1.0.1
13
+ * @author Ryan Petersen <rpetersen@arcwebtech.com>
14
+ */
15
+
16
+ add_action( 'wp_enqueue_scripts', 'simple_banner' );
17
+ function simple_banner() {
18
+ // Enqueue the style
19
+ wp_register_style('simple-banner-style', plugin_dir_url( __FILE__ ) .'simple-banner.css');
20
+ wp_enqueue_style('simple-banner-style');
21
+ // Enqueue the script
22
+ wp_register_script('simple-banner-script', plugin_dir_url( __FILE__ ) . 'simple-banner.js');
23
+ wp_enqueue_script('simple-banner-script');
24
+ }
25
+
26
+ //add custom CSS colors
27
+ add_action( 'wp_head', 'simple_banner_custom_color');
28
+ function simple_banner_custom_color()
29
+ {
30
+ if (get_option('simple_banner_color') != ""){
31
+ echo '<style type="text/css" media="screen">.simple-banner{background:' . get_option('simple_banner_color') . "};</style>";
32
+ }
33
+
34
+ if (get_option('simple_banner_text_color') != ""){
35
+ echo '<style type="text/css" media="screen">.simple-banner .simple-banner-text{color:' . get_option('simple_banner_text_color') . "};</style>";
36
+ }
37
+
38
+ if (get_option('simple_banner_link_color') != ""){
39
+ echo '<style type="text/css" media="screen">.simple-banner .simple-banner-text a{color:' . get_option('simple_banner_link_color') . "};</style>";
40
+ }
41
+
42
+ if (get_option('simple_banner_custom_css') != ""){
43
+ echo '<style type="text/css" media="screen">.simple-banner{'. get_option('simple_banner_custom_css') . "};</style>";
44
+ }
45
+ }
46
+
47
+ //add custom banner text
48
+ add_action( 'wp_head', 'simple_banner_custom_text');
49
+ function simple_banner_custom_text()
50
+ {
51
+ if (get_option('simple_banner_text') != ""){
52
+ echo '<script type="text/javascript">$(document).ready(function() {
53
+ var bannerSpan = document.getElementById("simple-banner");
54
+ bannerSpan.innerHTML = "<div class=' . "simple-banner-text" . '><span>' . get_option('simple_banner_text') . '</span></div>"
55
+ });
56
+ </script>';
57
+ }
58
+ }
59
+
60
+ add_action('admin_menu', 'simple_banner_menu');
61
+ function simple_banner_menu() {
62
+ add_menu_page('Simple Banner Settings', 'Simple Banner', 'administrator', 'simple-banner-settings', 'simple_banner_settings_page', 'dashicons-admin-generic');
63
+ }
64
+
65
+ add_action( 'admin_init', 'simple_banner_settings' );
66
+ function simple_banner_settings() {
67
+ register_setting( 'simple-banner-settings-group', 'simple_banner_color' );
68
+ register_setting( 'simple-banner-settings-group', 'simple_banner_text_color' );
69
+ register_setting( 'simple-banner-settings-group', 'simple_banner_link_color' );
70
+ register_setting( 'simple-banner-settings-group', 'simple_banner_text' );
71
+ register_setting( 'simple-banner-settings-group', 'simple_banner_custom_css' );
72
+ }
73
+
74
+ function simple_banner_settings_page() {
75
+ ?>
76
+
77
+ <div class="wrap">
78
+ <h2>Simple Banner Settings</h2>
79
+ <p>Use Hex color values for the color fields.</p>
80
+ <p>Links in the banner text must be typed in with HTML <code>&lt;a&gt;</code> tags with single quoted links.
81
+ <br />e.g. <code>&lt;a href=&#39;http:&#47;&#47;www.wordpress.com&#39;&gt;Link to Wordpress&lt;&#47;a&gt;</code>.</p>
82
+
83
+ <!-- Preview Banner -->
84
+ <div id="preview_banner" class="simple-banner" style="width: 100%;background: <?php echo ((get_option('simple_banner_color') == '') ? '#024985' : esc_attr( get_option('simple_banner_color') )); ?>;text-align: center;">
85
+ <div id="preview_banner_text" class="simple-banner-text" style="color: <?php echo ((get_option('simple_banner_text_color') == '') ? '#ffffff' : esc_attr( get_option('simple_banner_text_color') )); ?>;font-size: 1.1em;font-weight: 700;padding: 10px; }">
86
+ <span>This is what your banner will look like with a <a id="preview_banner_link" style="color:<?php echo ((get_option('simple_banner_link_color') == '') ? '#f16521' : esc_attr( get_option('simple_banner_link_color') )); ?>;" href="/">link</a>.*</span>
87
+ </div>
88
+ </div>
89
+ <span><b>*Note: Font and text styles subject to change based on chosen theme CSS.</b></span>
90
+
91
+ <!-- Settings Form -->
92
+ <form method="post" action="options.php">
93
+ <?php settings_fields( 'simple-banner-settings-group' ); ?>
94
+ <?php do_settings_sections( 'simple-banner-settings-group' ); ?>
95
+ <table class="form-table">
96
+ <!-- Background Color -->
97
+ <tr valign="top">
98
+ <th scope="row">Simple Banner Background Color<br><span style="font-weight:400;">(Leaving this blank sets the color to the default value #024985)</span></th>
99
+ <td style="vertical-align:top;">
100
+ <input type="text" id="simple_banner_color" name="simple_banner_color" placeholder="Hex value"
101
+ value="<?php echo esc_attr( get_option('simple_banner_color') ); ?>"
102
+ onchange="(document.getElementById('simple_banner_color').value == '') ? document.getElementById('simple_banner_color_show').value = '#024985' : document.getElementById('simple_banner_color_show').value = document.getElementById('simple_banner_color').value;
103
+ document.getElementById('preview_banner').style.background = ((document.getElementById('simple_banner_color').value == '') ? '#024985' : document.getElementById('simple_banner_color').value);" />
104
+ <input style="height: 30px;width: 100px;" type="color" id="simple_banner_color_show"
105
+ value="<?php echo ((get_option('simple_banner_color') == '') ? '#024985' : esc_attr( get_option('simple_banner_color') )); ?>"
106
+ onchange="javascript:document.getElementById('simple_banner_color').value = document.getElementById('simple_banner_color_show').value;
107
+ document.getElementById('preview_banner').style.background = document.getElementById('simple_banner_color_show').value;">
108
+ </td>
109
+ </tr>
110
+ <!-- Text Color -->
111
+ <tr valign="top">
112
+ <th scope="row">Simple Banner Text Color<br><span style="font-weight:400;">(Leaving this blank sets the color to the default value white)</span></th>
113
+ <td style="vertical-align:top;">
114
+ <input type="text" id="simple_banner_text_color" name="simple_banner_text_color" placeholder="Hex value"
115
+ value="<?php echo esc_attr( get_option('simple_banner_text_color') ); ?>"
116
+ onchange="javascript:(document.getElementById('simple_banner_text_color').value == '') ? document.getElementById('simple_banner_text_color_show').value = '#ffffff' : document.getElementById('simple_banner_text_color_show').value = document.getElementById('simple_banner_text_color').value;
117
+ document.getElementById('preview_banner_text').style.color = ((document.getElementById('simple_banner_text_color').value == '') ? '#ffffff' : document.getElementById('simple_banner_text_color').value);" />
118
+ <input style="height: 30px;width: 100px;" type="color" id="simple_banner_text_color_show"
119
+ value="<?php echo ((get_option('simple_banner_text_color') == '') ? '#ffffff' : esc_attr( get_option('simple_banner_text_color') )); ?>"
120
+ onchange="javascript:document.getElementById('simple_banner_text_color').value = document.getElementById('simple_banner_text_color_show').value;
121
+ document.getElementById('preview_banner_text').style.color = document.getElementById('simple_banner_text_color_show').value;">
122
+ </td>
123
+ </tr>
124
+ <!-- Link Color-->
125
+ <tr valign="top">
126
+ <th scope="row">Simple Banner Link Color<br><span style="font-weight:400;">(Leaving this blank sets the color to the default value #f16521)</span></th>
127
+ <td style="vertical-align:top;">
128
+ <input type="text" id="simple_banner_link_color" name="simple_banner_link_color" placeholder="Hex value"
129
+ value="<?php echo esc_attr( get_option('simple_banner_link_color') ); ?>"
130
+ onchange="javascript:(document.getElementById('simple_banner_link_color').value == '') ? document.getElementById('simple_banner_link_color_show').value = '#f16521' : document.getElementById('simple_banner_link_color_show').value = document.getElementById('simple_banner_link_color').value;
131
+ document.getElementById('preview_banner_link').style.color = document.getElementById('simple_banner_link_color').value;
132
+ document.getElementById('preview_banner_link').style.color = ((document.getElementById('simple_banner_link_color').value == '') ? '#f16521' : document.getElementById('simple_banner_link_color').value);" />
133
+ <input style="height: 30px;width: 100px;" type="color" id="simple_banner_link_color_show"
134
+ value="<?php echo ((get_option('simple_banner_link_color') == '') ? '#f16521' : esc_attr( get_option('simple_banner_link_color') )); ?>"
135
+ onchange="javascript:document.getElementById('simple_banner_link_color').value = document.getElementById('simple_banner_link_color_show').value;
136
+ document.getElementById('preview_banner_link').style.color = document.getElementById('simple_banner_link_color_show').value;">
137
+ </td>
138
+ </tr>
139
+ <!-- Text Contents -->
140
+ <tr valign="top">
141
+ <th scope="row">Simple Banner Text<br><span style="font-weight:400;">(Leaving this blank removes the banner)</span></th>
142
+ <td><textarea style="height: 150px;width: 265px;resize: none;" name="simple_banner_text"><?php echo get_option('simple_banner_text'); ?></textarea></td>
143
+ <td style="color:blue;">Remember to only use single quotes with the href links.</td>
144
+ </tr>
145
+ <!-- Custom CSS -->
146
+ <tr valign="top">
147
+ <th scope="row">Simple Banner Custom CSS
148
+ <br><span style="font-weight:400;">Styles will be applied directly to the <code>simple-banner</code> class.</span>
149
+ <br><span style="font-weight:400;color:red;">Be very careful, bad CSS can break the banner.</span></th>
150
+ <td><textarea id="simple_banner_custom_css" style="height: 150px;width: 265px;resize: none;" name="simple_banner_custom_css"><?php echo get_option('simple_banner_custom_css'); ?></textarea>
151
+ </td>
152
+ </tr>
153
+ </table>
154
+
155
+ <!-- Save Changes Button -->
156
+ <?php submit_button(); ?>
157
+ </form>
158
+ </div>
159
+
160
+ <script type="text/javascript">
161
+ var style = document.createElement('style');
162
+ var style_dynamic = null;
163
+
164
+ style.type = 'text/css';
165
+ style.id = 'preview_banner_custom_stylesheet'
166
+ style.appendChild(document.createTextNode('.simple-banner{'+document.getElementById('simple_banner_custom_css').value+'}'));
167
+ document.getElementsByTagName('head')[0].appendChild(style);
168
+
169
+ document.getElementById('simple_banner_custom_css').onblur=function(){
170
+ var child = document.getElementById('preview_banner_custom_stylesheet');
171
+ if (child){child.innerText = "";child.id='';}
172
+
173
+ var style_dynamic = document.createElement('style');
174
+ style_dynamic.type = 'text/css';
175
+ style_dynamic.id = 'preview_banner_custom_stylesheet';
176
+ style_dynamic.appendChild(document.createTextNode('.simple-banner{'+document.getElementById('simple_banner_custom_css').value+'}'));
177
+ document.getElementsByTagName('head')[0].appendChild(style_dynamic);
178
+ };
179
+ </script>
180
+ <?php
181
+ }
182
+ ?>