Moving to Tabby from other tabs plugin: search & replace shortcodes?

The tabby link to tab add-on for tabby responsive tabs enables a link to be made anywhere on a page (inside a tab or outside of a tab group) to open a tab on the same page.

Tabby responsive tabs does not have a way to style individual tabs from the shortcodes, however each tab on a page can be targeted with CSS.

I have not tested tabby responsive tabs alongside any other tabs plugins, but I believe in most cases there should not be any conflict.

I don’t think a search and replace to change fron a different tabbs plugin would be possible without a lot of correcting the shortcodes by hand.

It would be possible to create a tabs plugin as a custom job with the required features and built in. To comply with the rules of the forum, this cannot be discussed here but if you want to discuss commissioning a custom plugin you can contact me via my webbsite’s contact page.

Thank you! Thanks, the Tabby Link to Tab looks like what I need (is it a one time fee, or is it recurrent yearly?).

I’m using Genesis, with a child theme, so all the custom CSS I put in the theme’s Customize section.

As for styling the individual tabs, I only need to differentiate between the tabs based of their “active” or inactive status.

– the “active” tab would always be white
– the non-active tabs would always be blue
– hovering on either one would show black.

But for some reason it’s not working. What would be the proper terminology to affect these elements?

.responsive-tabs__list__item .responsive-tabs__list__item--active {
background: #ffffff;
}

.responsive-tabs .responsive-tabs__list__item {
background: #0065ac;
}

.responsive-tabs .responsive-tabs__list__item--active:hover {
background: #000000;
}

So I guess I’m not using the right terminology for the targets?

The solution was to add !important to the CSS elements.

.responsive-tabs .responsive-tabs__list__item--active {
background: #ffffff !important;
color: #000000 !important;
}

.responsive-tabs .responsive-tabs__list__item {
background: #0065ac !important;
color: #ffffff !important;
}

.responsive-tabs .responsive-tabs__list__item:hover {
background: #000000 !important;
color: #ffffff !important;
}

EXCEPT, for the “active” tab, as it doesn’t change color. How would I target the ACTIVE tab to cause it to remain white with black fonts?

Thanks!

BTW, I did edit the functions.php file, adding :

//* For Tabby Tabs, prevent the built-in styles from loading 
remove_action('wp_print_styles', 'cc_tabby_css', 30); 

But it messed up the tabs. All I need is to make the ACTIVE tab a different color than the rest. I’m finding my way for the rest, by trial and error and a lot of it. ??

Thanks!

• This reply was modified 5 years, 2 months ago by styzer.

As outlined in the documentation, the remove action code removes the default styles from the tabs so you can replace the styles in the tabby.css stylesheet with your own set of styles.

The active tab has the class responsive-tabs__list__item--active

The easiest way to create a custom set of styles if you are having problems working with CSS is to use the optional customiser add-on.

If I understand, from what you are saying AND the documentation (which I read 3 times),

1- modify the functions.php file with a code to short-circuit using the (tabby.css) file.

2- modify CSS values on tabby.css and it should work.

Do you see why it’s a hard logic to follow? You short-circuit the use of a css file, BUT you still use that CSS file for styling the tabs. I shouldn’t need to disable a file I’m gonna be using, I should just need to modify the values. I really don’t understand the logic you use for this.

1- I inserted the code in the functions.php file.
2- I modified the values in tabby.css with my own.
3- I uploaded both files to their respective folders.

The result is that the list structure is now gone, the tabs are stacked vertically, they are not tabs anymore. Yet, I am using the full tabby.css file with modified value.

The tabs are blue like I achieved before, but the ACTIVE tab isn’t showing the color I assigned to it either. And there is no “tabs” to speak of visually. If I didn’t know better, I’d say that the functions.php hack basically turned the tabs into an “accordion-style” tabs.

Unless you gave me the wrong or incomplete code, I have done everything by the book. I trusted you to understand that the steps you outline are not working for me. Telling me the class of the active tab is not helpful, as I already pointed out to you. There are a few tags using this code, with :focus, :hover, etc.

I’d hate to think that you do this purposefully to force another purchase. Great plugins just work. What you are doing is blurring the lines: because YES, what you have done is creating a PRO (paid) version without calling it that. Clever, though. But a HUGE let down.

At least tell me the FULL code I need to modify, which line is it on?

– I need to change the overall colors for all tabs
– I need for them to have a :hover value
– I need to have the active tab a different color

That is simple and shouldn’t take multiple exchanges back and forth over 48 hours.

Please?

• This reply was modified 5 years, 2 months ago by styzer.
• This reply was modified 5 years, 2 months ago by styzer.

I finally found a way to have a different “active” tab color. Which I will share with others here, because it has been a costly lesson and I’m sure others have hit a similar snag.

In my example, there is no need to modify the functions.php file. Only tabby.css. So maybe this could help many of the users.

/* NEW COLOR BLUE FOR ALL TABS */
.responsive-tabs .responsive-tabs__list__item {
    background: #0065ac !important;
    color: #ffffff !important;
	border: 1px solid transparent;
	border-bottom: none;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	font-size: 18px;
	line-height: 19px;
	text-transform: inherit;
	margin: 1px 1px 0 0;
	padding: 10px 12px 10px;
	white-space: nowrap;
	float: left;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* NEW COLOR FOR ALL TABS - HOVER*/
.responsive-tabs .responsive-tabs__list__item:hover {
    background: #000000 !important;
    color: #ffffff !important;
}

/* NEW COLORS FOR ACTIVE TAB ONLY */
.responsive-tabs .responsive-tabs__list__item--active {
	background: #ffffff !important;
	border-top: 1px solid #cccccc;
		border-left: 1px solid #cccccc;
			border-right: 1px solid #cccccc;
				border-bottom: 0px;
	color: #000000 !important;
	padding-bottom: 11px;
	margin-top: 0;
	position: relative;
	top: 1px;
}

/* NEW COLORS FOR HOVER FOR ACTIVE TAB */
.responsive-tabs .responsive-tabs__list__item--active:hover {
    background: #000000 !important;
    color: #ffffff !important;
}

Modify the colors to fit your needs.

Hope this helps!

Andre

This is not a solution I would recommend, or support.

The correct way to add a custom set of styles is described in the plugin’s documentaion.

Editing the tabby.css is not recommended as a plugin update will replace the file and remove the customisations.

Also the !important declaration should only be used as a last resort. Increasing the specificity of the rule would normally work better.

Hi Michael, thank you.

The only problems with my solution is:

– I edited the tabby.css file
– I used the !important declaration to force it to work

A most helpful reply would have been:

“Andre, you’re almost there.
1- Now take all the custom code you put in the tabby.css file and copy/paste it in your child theme style.css, and get rid of all the !important declarations you have added. You won’t need those.

2- Then, it’s very important that you next restore the tabby.css file to its original state (before you modified it) and upload that to your server to replace the one you modified.

3- Then, when this is done, insert the provided code into the functions.php file and upload that to your child theme folder. It will instruct tabby to pull the styling from your child theme instead of from tabby.css. And in case of future updates, you won’t lose all your styling for tabby.

This is how you should have done it in the first place. You need to modify only 2 files: your child theme stylesheet, and the functions.php file.”

So here is now the code in my child-theme stylesheet:

/* START TABBY TABS CUSTOM STYLING */
.responsive-tabs .responsive-tabs__list__item {
    background: #0065ac;
    color: #ffffff;
	border: 1px solid transparent;
	border-bottom: none;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	font-size: 18px;
	line-height: 19px;
	text-transform: inherit;
	margin: 1px 1px 0 0;
	padding: 10px 12px 10px;
	white-space: nowrap;
	float: left;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* NEW HOVER COLOR FOR ALL TABS */
.responsive-tabs .responsive-tabs__list__item:hover {
    background: #ffffff;
    color: #000000;
		border-top: 1px solid #0065ac;
		border-left: 1px solid #0065ac;
			border-right: 1px solid #0065ac;
    			border-bottom: 0px;
}

/* NEW COLOR FOR ACTIVE TAB ONLY (using same concept as HOVER) */
.responsive-tabs .responsive-tabs__list__item--active {
	background: #ffffff;
	border-top: 1px solid #cccccc;
		border-left: 1px solid #cccccc;
			border-right: 1px solid #cccccc;
				border-bottom: 0px;
	color: #000000;
	padding-bottom: 11px;
	margin-top: 0;
	position: relative;
	top: 1px;
}

/* NEW COLORS FOR HOVER FOR ACTIVE TAB */
.responsive-tabs .responsive-tabs__list__item--active:hover {
    background: #ffffff;
    color: #000000;
}

/***** END OF TABBY TABS CUSTOM STYLES *****/

As you can see, Michael, I know my way a bit around CSS, but the missing piece was the above. For some reason, I could not see this due to the way the documentation is written at the moment, and/or the way I understood it. (May I suggest a slight rewrite of the readme file?).

I sensed your plugin could serve my client’s need, but evidently there was a failure in communication. It’s normal to have an expectation of clarity when it comes to these things. I hope this conversation will help others.

Regards,

Andre