Tabby Responsive Tabs - Version 1.2.0

Version Description

Added basic print styles to default stylesheet

Release Info

Developer	numeeja
Plugin	Tabby Responsive Tabs
Version	1.2.0
Comparing to
See all releases

Code changes from version 1.1.1 to 1.2.0

Files changed (4) hide show

css/tabby.css +24 -0
js/tabby.js +1 -1
readme.txt +64 -16
tabby-responsive-tabs.php +4 -2

css/tabby.css CHANGED Viewed

@@ -197,4 +197,28 @@
             		padding: 0 20px;
             		padding-top: 20px;
+            	}
+            }


197	padding: 0 20px;
198	padding-top: 20px;
199	}
200	+ }
201	+
202	+ @media print {
203	+ .responsive-tabs .responsive-tabs__list {
204	+ display: none;
205	+ }
206	+
207	+ .responsive-tabs .responsive-tabs__heading {
208	+ background: none;
209	+ border: none;
210	+ display: block;
211	+ font-size: 22px;
212	+ font-weight: bold;
213	+ text-transform: inherit;
214	+ margin: 0!important;
215	+ padding: 10px 0 0;
216	+ }
217	+
218	+ .responsive-tabs .responsive-tabs__panel {
219	+ display: block!important;
220	+ background: none;
221	+ border: none;
222	+ padding: 0;
223	+ }
224	}

js/tabby.js CHANGED Viewed

	@@ -1,5 +1,5 @@
1	/* ----------------
2	- Tabby.js 1.1.0
3
4	based on ResponsiveTabs.js 1.10
5	by Pete Love


1	/* ----------------
2	+ Tabby.js 1.2.0
3
4	based on ResponsiveTabs.js 1.10
5	by Pete Love

readme.txt CHANGED Viewed

	@@ -1,13 +1,13 @@
1	=== Tabby Responsive Tabs ===
2	Contributors: numeeja
3	Donate link: http://cubecolour.co.uk/wp
4	- Tags: tabs, responsive, shortcode, tab
5	Requires at least: 3.7
6	- Tested up to: 4.0
7	- Stable tag: 1.1.1
8	License: GPLv2 / MIT
9
10	- ~~Enables~~ ~~you to create~~ responsive tabs inside your posts, pages or custom post ~~types~~ by adding simple shortcodes inside the post editor.
11
12	== Description ==
13
	@@ -18,7 +18,9 @@ Enables you to create responsive tabs inside your posts, pages or custom post ty
18	* Aria attributes and roles aid screen reader accessibility
19	* Tabs and content are accessible via keyboard
20
21	- > ~~For~~ ~~the~~ ~~easiest~~ ~~way~~ to ~~customise~~ ~~the~~ ~~display~~ of ~~your~~ ~~tabs,~~ ~~you~~ ~~can~~ ~~now~~ ~~use~~ ~~the~~ ~~[Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-~~tabs~~-customiser/~~ ~~"Tabby~~ ~~Responsive~~ ~~Tabs Customiser") add-on from cubecolour~~. ~~This~~ ~~adds~~ a ~~settings~~ panel ~~for~~ ~~customising~~ ~~your~~ ~~tabs~~ ~~without~~ ~~editing~~ ~~any~~ ~~code.~~ ~~You~~ ~~can~~ ~~use~~ the ~~default~~ ~~tabby~~ ~~styles~~ or ~~one~~ of the ~~one~~-~~click~~ ~~style~~ ~~presets~~ as a ~~starting~~ ~~point~~ ~~for~~ ~~customisation.~~ ~~The~~ ~~add-on~~ ~~also~~ ~~enables~~ ~~you~~ ~~to load the files required to add icons to your tab titles~~.


22
23	= Usage: =
24
	@@ -28,10 +30,10 @@ There are two shortcodes which should both be used `[tabby]` and `[tabbyending]`
28
29	replace tabname with the name of your tab.
30
31	- Add the tab content after ~~that.~~ ~~It is recommended to leave a blank line before and after each tabby~~ shortcode.
32
33	Add a `[tabbyending]` shortcode after the content of the last tab in a tabgroup.
34	-
35	= Example =
36	`
37	[tabby title="First Tab"]
	@@ -66,13 +68,16 @@ If you want a specific tab other than the first tab to be open by default when t
66	`
67	[tabby title="My Tab" open="yes"]
68	`



69	Icon
70
71	The markup required to show an icon alongside a tab title can be added by using the 'icon' attribute. Tabby responsive tabs does not add the icons files, you will also need to use a theme or plugin (such as the tabby responsive tabs customiser add-on) to add the icon files:
72	`
73	[tabby title="My Tab" icon="cog"]
74	`
75	- This adds a pseudo element before the tab table with the classes "fa" and "fa-cog". Other icon font sets can be used if you ensure the CSS rules target the classes added by the plugin.
76
77	The [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") plugin can be used to add the required Font Awesome files for you.
78
	@@ -110,6 +115,13 @@ If changing the theme makes no difference, deactivate all other plugins. If Tabb
110
111	If the plugin isn't working for you, please read the documentation to check whether your issue is covered. Then review the topics in the [plugin support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum"). You may find an appropriate solution outlined in a resolved topic. If you do not find an answer that enables you to solve your issue, please post a new topic on the forum so we have an opportunity to get it working before you consider leaving a review.
112







113	= Where is the plugin's admin page? =
114
115	There isn't one. This is a lightweight plugin with no options. If you want to be able to configure your tabs using an admin page, the [Tabby Responsive Tabs Customiser plugin](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser plugin") is available.
	@@ -122,6 +134,10 @@ Yes - it should work with any well-coded responsive theme.
122
123	The plugin should also work with non-responsive Themes, however this is not really recommended; if you are using a non-responsive theme the tabs will not switch to an accordion display on a mobile device.
124




125	= How can I change the colours? =
126
127	The recommended method for experienced developers to customise how the tabs display is to copy the css rules from the plugin's stylesheet into the child theme's stylesheet and then customise the colours and other CSS as required. When using customised version of the plugin's styles in the child theme, you should also prevent the plugin's default built-in styles from loading by adding the following line to the child theme's functions.php (or a custom functionality plugin):
	@@ -133,15 +149,15 @@ If you prefer to use a settings page in your WordPress admin to set a custom tab
133
134	Yes, you'll find where that is set in the CSS. Refer to the answer above about using custom css.
135
136	- This value can also be set using the Tabby Responsive Tabs Customiser plugin's admin panel.
137
138	- = Why Doesn't my slider work in any tab except the first one? =
139
140	- Some ~~carousels~~/~~sliders~~ plugins render their content with zero height & width if the tab containing the content is not visible on page load. If you need to place a slider in a tab, I would suggest trying Meteor Slides as it seems to work reliably in my tests.
141
142	= Why Doesn't my Google Map work in any tab except the first one? =
143
144	- Some google maps plugins ~~also~~ render their content with zero height & width if the tab containing the content is not visible on page load. I would welcome any suggestions ~~for a workaround that~~ might help with this.
145
146	= Can I display multiple tab groups on a single page? =
147
	@@ -159,12 +175,35 @@ Yes, see the documentation for the usage of a 'target' URL parameter in the link
159
160	The default CSS has changed in version 1.0.2 and version 1.1.0. If your tabs now appear 'broken' after an update, this may be due to your site using customised tab styles added to your theme instead of following the recommended method of replacing the default CSS with a complete customised version. To fix this remove the CSS rules you added to your theme to target the tabs and add the custom styles using the method outlined in the documentation.
161
162	- = Can you create a customised stylesheet for me to fit in with the colours of my website? =
163
164	- ~~Unfortunately~~ ~~this~~ is beyond of the scope of the free support I ~~can~~ provide. ~~You~~ can style your tabs to match your theme using the optional [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") add-on plugin.
165
166	Plugin support for Tabby Responsive Tabs is provided at the [plugin's support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum") on WordPress.org.
167























168	= Why do you spell the word 'color' incorrectly? =
169
170	I don't, I'm from England and 'colour' is the correct spelling.
	@@ -195,19 +234,24 @@ The plugin is licenced under [GNU GPLv2](http://opensource.org/licenses/GPL-2.0
195
196	1. On a desktop browser the content is displayed within tabs.
197	2. When the browser width is below the size set in the media query, the tabs are replaced by an accordion.

198
199	== Changelog ==
200




201	= 1.1.1 =
202
203	* Improvements to default CSS
204	* Addition of 'open' shortcode attribute to allow tabs other than the first to be open when the page loads
205	- * First tab now is open by default when displayed as accordion
206	* Changed links in plugin table
207	* Get Plugin Version function
208	* Prevent tabs overlapping if there are too many
209	* Remove hard coded paragraph tags in tab content & improve
210	- * Added icon font support (Font Awesome needs to be loaded by your theme or another plugin)
211	* Added functionality to allow target url parameter to control which tab is open on page load.
212
213	= 1.0.3 =
	@@ -229,6 +273,10 @@ The plugin is licenced under [GNU GPLv2](http://opensource.org/licenses/GPL-2.0
229
230	== Upgrade Notice ==
231




232	= 1.1.1 =
233
234	* Added Support for Tabby Responsive Tabs Customiser add-on


1	=== Tabby Responsive Tabs ===
2	Contributors: numeeja
3	Donate link: http://cubecolour.co.uk/wp
4	+ Tags: tabs, jquery tabs, responsive tabs, tabs shortcode, responsive, shortcode, tab
5	Requires at least: 3.7
6	+ Tested up to: 4.0.1
7	+ Stable tag: 1.2.0
8	License: GPLv2 / MIT
9
10	+ Create responsive tabs inside your posts, pages or custom post content by adding simple shortcodes inside the post editor.
11
12	== Description ==
13

18	* Aria attributes and roles aid screen reader accessibility
19	* Tabs and content are accessible via keyboard
20
21	+ The Tabby Responsive Tabs plugin is designed to be an easy and lightweight way to add responsive tabs to your content. There is no admin panel and experienced developers should be able to easily customise how the tabs display on their site by replacing the built-in CSS rules with a customised version (see note below for more details of this).
22	+
23	+ > For the easiest way to customise the display of your tabs without editing any code, you can now use the [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") add-on from cubecolour. This adds a settings panel with several parameters for customising your tabs. You can use the default tabby styles or one of the included one-click style presets as a starting point for customisation. The add-on also enables you to easily add icons to your tab titles.
24
25	= Usage: =
26

30
31	replace tabname with the name of your tab.
32
33	+ Add the tab content after the shortcode.
34
35	Add a `[tabbyending]` shortcode after the content of the last tab in a tabgroup.
36	+
37	= Example =
38	`
39	[tabby title="First Tab"]

68	`
69	[tabby title="My Tab" open="yes"]
70	`
71	+
72	+ If you use the 'open' shortcode parameter in one of your tab shortcodes ensure that you only add it to single tab as having more than one tab open in a tab group is not supported.
73	+
74	Icon
75
76	The markup required to show an icon alongside a tab title can be added by using the 'icon' attribute. Tabby responsive tabs does not add the icons files, you will also need to use a theme or plugin (such as the tabby responsive tabs customiser add-on) to add the icon files:
77	`
78	[tabby title="My Tab" icon="cog"]
79	`
80	+ This adds a pseudo element before the tab table with the classes "fa" and "fa-cog". Other icon font sets can be used if you ensure the CSS rules target the classes added by the plugin.
81
82	The [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") plugin can be used to add the required Font Awesome files for you.
83

115
116	If the plugin isn't working for you, please read the documentation to check whether your issue is covered. Then review the topics in the [plugin support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum"). You may find an appropriate solution outlined in a resolved topic. If you do not find an answer that enables you to solve your issue, please post a new topic on the forum so we have an opportunity to get it working before you consider leaving a review.
117
118	+ = How can I get rid of extra paragraph tags at the beginning or end of the tab content? =
119	+ These can be added by the wpautop function. It is recommended to leave a blank line before and after each tabby shortcode to prevent these from appearing.
120	+
121	+
122	+ = Pasted-in shortcodes aren't working =
123	+ If you are copying & pasting the example shortcodes into the visual editor and the shortcodes don't seem to be working, try the text editor in preference to be sure that you aren't adding in any extra markup that isn't visible in the visual mode (this applies to any plugin using shortcodes).
124	+
125	= Where is the plugin's admin page? =
126
127	There isn't one. This is a lightweight plugin with no options. If you want to be able to configure your tabs using an admin page, the [Tabby Responsive Tabs Customiser plugin](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser plugin") is available.

134
135	The plugin should also work with non-responsive Themes, however this is not really recommended; if you are using a non-responsive theme the tabs will not switch to an accordion display on a mobile device.
136
137	+ = Does it work with a multisite installation of WordPress? =
138	+
139	+ Yes
140	+
141	= How can I change the colours? =
142
143	The recommended method for experienced developers to customise how the tabs display is to copy the css rules from the plugin's stylesheet into the child theme's stylesheet and then customise the colours and other CSS as required. When using customised version of the plugin's styles in the child theme, you should also prevent the plugin's default built-in styles from loading by adding the following line to the child theme's functions.php (or a custom functionality plugin):

149
150	Yes, you'll find where that is set in the CSS. Refer to the answer above about using custom css.
151
152	+ This value can also be set using the Tabby Responsive Tabs Customiser plugin's admin panel.
153
154	+ = Why Doesn't my slider or (non native WP) gallery work in any tab except the first one? =
155
156	+ Some carousel/slider/gallery plugins render their content with zero height & width if the tab containing the content is not visible on page load. If you need to place a slider in a tab, I would suggest trying Meteor Slides as it seems to work reliably in my tests. Native WordPress galleries also work with no problems.
157
158	= Why Doesn't my Google Map work in any tab except the first one? =
159
160	+ Some google maps plugins render their content with zero height & width if the tab containing the content is not visible on page load. I would welcome any suggestions might help with this.
161
162	= Can I display multiple tab groups on a single page? =
163

175
176	The default CSS has changed in version 1.0.2 and version 1.1.0. If your tabs now appear 'broken' after an update, this may be due to your site using customised tab styles added to your theme instead of following the recommended method of replacing the default CSS with a complete customised version. To fix this remove the CSS rules you added to your theme to target the tabs and add the custom styles using the method outlined in the documentation.
177
178	+ = Can you create a customised stylesheet for me to fit in with the colours or style of my website? =
179
180	+ Site-specific customisation work is beyond of the scope of the free support I am able to provide. I am happy to take on CSS work as a paid job or you can style your tabs to match your theme using the optional [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") add-on plugin.
181
182	Plugin support for Tabby Responsive Tabs is provided at the [plugin's support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum") on WordPress.org.
183
184	+ = Why can't I get the Target Parameter to Work? =
185	+
186	+ This is used just like any other URL parameter in a query string so you need to use a valid structure for the query string.
187	+
188	+ If there's already a parameter in a query string, including the one included in the url when using default ugly permalinks, subsequent parameters must be appended using an ampersand.
189	+ eg:
190	+
191	+ `
192	+ yoursite.com/?page_id=1&target=phone-numbers
193	+ `
194	+
195	+ = How will the tabs print? =
196	+
197	+ Starting with version 1.2, basic print styles are included in a print media query at the end of the plugin stylesheet. This is designed to print the tab titles and content in series. If you are using custom styles for your tabs, you can copy these print styles to the end of your custom styles and customise them.
198	+
199	+ = Are there any other free cubecolour plugins? =
200	+
201	+ If you like Tabby Responsive Tabs, you may like some of my other plugins in the WordPress.org plugins directory. These are listed on my [profile](http://profiles.wordpress.org/numeeja/ "cubecolour profile") page under the 'plugins' tab.
202	+
203	+ = Who or what is cubecolour? =
204	+
205	+ My name is Michael Atkins. Cubecolour is the name of my web design and development business in South London where I work with businesses, organisations and individuals to build and support their websites using WordPress. I like to attend local WordCamps and WordPress meetups and I am a moderator on the WordPress.org forums. When I'm not sitting in front of my MacBook I can usually be found playing bass with a blues band called Junkyard Rocket
206	+
207	= Why do you spell the word 'color' incorrectly? =
208
209	I don't, I'm from England and 'colour' is the correct spelling.

234
235	1. On a desktop browser the content is displayed within tabs.
236	2. When the browser width is below the size set in the media query, the tabs are replaced by an accordion.
237	+ 3. The basic print styles are intended to present the tab titles & content appropriately when printed out.
238
239	== Changelog ==
240
241	+ = 1.2.0 =
242	+
243	+ * Added basic print styles to default stylesheet
244	+
245	= 1.1.1 =
246
247	* Improvements to default CSS
248	* Addition of 'open' shortcode attribute to allow tabs other than the first to be open when the page loads
249	+ * First tab now is open by default when displayed as accordion
250	* Changed links in plugin table
251	* Get Plugin Version function
252	* Prevent tabs overlapping if there are too many
253	* Remove hard coded paragraph tags in tab content & improve
254	+ * Added icon font support. Note: Font Awesome needs to be loaded by your theme or another plugin (including the Tabby Responsive Tabs Customiser)
255	* Added functionality to allow target url parameter to control which tab is open on page load.
256
257	= 1.0.3 =

273
274	== Upgrade Notice ==
275
276	+ = 1.2.0 =
277	+
278	+ * Added print styles to default stylesheet
279	+
280	= 1.1.1 =
281
282	* Added Support for Tabby Responsive Tabs Customiser add-on

tabby-responsive-tabs.php CHANGED Viewed

	@@ -4,7 +4,7 @@ Plugin Name: Tabby Responsive Tabs
4	Plugin URI: http://cubecolour.co.uk/tabby-responsive-tabs
5	Description: Create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes. An easy to use admin page can be added to customise the tab styles with the optional Tabby Responsive Tabs Customiser add-on plugin.
6	Author: cubecolour
7	- Version: 1.1.1
8	Author URI: http://cubecolour.co.uk
9
10	Tabby Responsive Tabs WordPress plugin Copyright 2013-2014 Michael Atkins
	@@ -110,13 +110,15 @@ function cc_tabby_meta_links( $links, $file ) {
110	//
111	// Register & enqueue the stylesheet
112	// If you want to use custom styles, copy the content of the tabby.css to your child theme
113	- // and stop the default styles from loading by this by adding the following line to the theme's functions.php:
114	//
115	// remove_action('wp_print_styles', 'cc_tabby_css', 30);
116	//
117	// Alternatively use the tabby responsive tabs customiser plugin
118	// available from from http:cubecolour.co.uk/tabby-responsive-tabs-customiser
119	//


120	// ==============================================
121
122	function cc_tabby_css() {


4	Plugin URI: http://cubecolour.co.uk/tabby-responsive-tabs
5	Description: Create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes. An easy to use admin page can be added to customise the tab styles with the optional Tabby Responsive Tabs Customiser add-on plugin.
6	Author: cubecolour
7	+ Version: 1.2.0
8	Author URI: http://cubecolour.co.uk
9
10	Tabby Responsive Tabs WordPress plugin Copyright 2013-2014 Michael Atkins

110	//
111	// Register & enqueue the stylesheet
112	// If you want to use custom styles, copy the content of the tabby.css to your child theme
113	+ // and stop the default styles from loading by this by adding the following line to the theme's functions.php or custom site functions plugin:
114	//
115	// remove_action('wp_print_styles', 'cc_tabby_css', 30);
116	//
117	// Alternatively use the tabby responsive tabs customiser plugin
118	// available from from http:cubecolour.co.uk/tabby-responsive-tabs-customiser
119	//
120	+ // Note: wp_print_styles has been deprecated since WP v3.3, so in a future version of this plugin this will be replaced with:
121	+ // add_action( 'wp_enqueue_scripts', 'cc_tabby_css',30 );
122	// ==============================================
123
124	function cc_tabby_css() {