Code

Discussion on Tabion - Metro Tab Accordion Switcher CSS

SOHN

SOHN supports this item

Supported

30 comments found.

Realy cool! Is it possible to place a form on a tab?

Basically, you can add any HTML content into the tab content.

Regards

Thanks I will purchase:)

Thanks.

Thanks

Thanks.

I see that changing the background color of the Tab content also changes the color of the Tab that opens it.

Is it possible to style the two seperately?

For example for the Tab content to have a white background instead of inheriting the color of the small Tab that opens it.

Hi,

Yes, the color can be changed easily by changing the color class. It’s not required to use the same color for tab and tab content.

Kind regards

Fantastic product and friendly and polite support from SOHN. Highly recommended..A++

Thanks for your purchase.

is it possible to close a tab section by tapping on the header of the tab when viewing on mobile?

Hi,

Yes, you can close tab content by creating label tags to check a radio button that does not have content.

Kind regards.

Hi, here my url: http://annie.media3r.com/portefolio/services.html

How can I set the order of the tabs?

I would like the web design tab to show first.

It seems that the marketing tabs show first.

Thanks

Hi,

To make a tab be the default tab you just simple move the “checked” attribute to the input ( radio ) of that tab.

Example: At this time the “checked” is at tab ( id=”tab4 ) so if you want to show the content of “Web Design” first you can move the “checked” from the input ( id=”tab4” ) to the input ( id=”tab1” ).

Kind regards,

Thank you so much!

Where can I change the background of the selected tab button (the navigation) to add background just like the main menu?

Thanks

Hi,

You can try to add a background class ( you can find background classes at “Background section” in the “css” file ) into the element you want it has color.

Kind regards

Hi, I want to make “active” pseudoclass, for the buttons with the same css style as hover. Any idea?

Hi,

Please email me to get a demo for making active state of tab button.

Kind regards,

I can not install the plugin … Any procedure beyond normal?

Hi,

Please read the documentation and demo files. Installing is easy, just include necessary files and follow the HTML structure.

Kind regards

I did not like install, install the plugin send the zip plugin says does not exist and the error.

Hi,

Which error do you see? After you downloaded the zip file please unzip it, then upload necessary files on your server and edit your page as I wrote in the documentation.

Kind regards

Where do I upload when I walk? which file to edit?

Hi,

You can upload files in the same folder with your page ( the page that you want to show Tabion – this is also the page you need to edit ).

Kind regards

Hi, I would like to know how to make the current button with a single background color. The other button are transparent.

And after, when you change tab, now the selected one goes a single background color while the others are transparent

here the url: http://annie.media3r.com/portefolio/services.html

thank you

So i should mostly re-install everyting (html and css) and work from there? It would be easier?

Yes, I know this may be uncomfortable But it is required for more features that the old structure can not do. In fact, it’s not hard, just little change in HTML structure.

Kind regards

Hi, thanks for creating such lovely plugin, I have a question, how many tabs can I have with a webpage of 1000px width, I have about 21 subcategory and I would like all the tab buttons to be displayed horizontally within 3 rows, so to have the first 2 rows of 9 tab buttons and the last one with 3 tab buttons, while the tab content would be respectively below all the tab buttons, is that possible to achieve?

Many thanks

Hi,

At default the plugin is designed one row for tabs if you you want to make 3 rows you can do it but it requires you have to customize css code.

The tab amount in one row is depended the tab width. If tabs have width=100px and the row width=1000px you can have 9 tabs in one row.

Kind regards

How can it be used in a Wordpress site? I tried to figure it out, but so far couldn’t.

Hi,

This is a standalone plugin, it is not a wordpress plugin so if you want to use this plugin in your wordpress sites you need to install it like the documentation in your theme source code. Then you can add the plugin HTML structure into the place you want to show the tab.

Kind regards.

This is not working on IE, that is correct?

Hi,

Tabion CSS works well on IE 9 (without effects) and IE 10+ (support effects). On IE 8 it will work with hover event. I no longer support for IE 7 and older.

Kind regards.

Awesome! The layout is very logical, which is perfect for someone rather inexperienced like me. :)

Great work!

Thank for choosing my product.

Hey there, looks like a great product and I can see all your customers are very happy with it. Is it just CSS and HTML? no JS at all? Because I’m also quite inexperienced and I’m using an AJAX for the first time and adding JS makes it so much more complicated! http://www.professionaldetailing.co.uk/example.jpg Also would I be able to customize the colours so I can have the white, bronze, silver and gold like I have in the pic dropping down? Many thanks in advance.

Regards.

I’ve already got .tabion { margin:20px 0; padding:10px 0; list-style:none; width:960px; position:relative; } .tabion > li { list-style:none; display:block; position:relative; width:960px; top:0px; } in my css file but it doesn’t seem to work, i’ve kind of solved the problem for now anyway I just put loads of     to fill it out.

Kind regards.

You should create new class if you want a special width value and you should add ”!important” for it to make sure it can overwrite the default value.

Kind regards.

Awesome thanks mate

Kind regards.

hey, i need variable height for the UL-class.

Can i try to put a div container around the plugin with height: auto? thats really important for my layout. thanks

Hi,

The Tabion CSS version does not support the dynamic height (I have noted this in the documentation). The height of tab container only accept fixed values. This is a limitation of tech at this time. If you want to set dynamic height for tab container you need the javascript solution.

Kind regards.

Hi, I like this plugin and I’d like to buy it but before I have a question, can I use both style for the tabs at same time (horizonta and vertical)?? Thanks in advance

Hi,

You can use both styles (horizontal and vertical) for the tabs at same time. You can check my demo for this:
http://demo.siterepo.com/store/css/tabion/demo-4.php


Kind regards.

pre-sale question: I have a dating plugin that I used in my wordpress site. Their tab design are so hideous and I want to change it to this tabs.. Is there a way we can integrate it? If yes. Do you accept customizaton? I am willing to pay.

Thanks

Hi,

I need to see your Wordpress dating plugin information before I can make sure about integration. Could you send me email with a demo of the dating plugin?

Kind regards.

Hi,

I checked your link. The tab in the member page has a different structure with my Tabion plugin so it is hard to integrate Tabion into it. However, if you want to customize the tab style to be better I can do it for you with my customization service: https://www.microlancer.com/explore/website-customization/5423-css-customization

Kind regards.

by
by
by
by
by
by