If you wont to customize this tabs color, effect, animation, steps, icon or etcetera then flow this instruction carefully...
- Step 01 - Change Tabs Color: If you need to change the tab color then you have to just change the CSS file name!! Do it very simply, like as
"tab-style-red.css" for make it red color (You can find this css file name link inside the head section). Our template other colors name are there
( black, blue, red, pink, purple, teal, green, yellow, orange, brown, cyan, lime ). Replace the name and make it awesome!!!
- Step 02 - Change Tabs Animation: If you need to change the tab animation then you have to just change the CSS class name!! Do it very simply, like as ".
fadeIn" for make it fadeIn animated (You can find this css class name inside the every step of Tab Panel). Our template other animation name that's we recommended for you
( pulse, bounce, bounceIn, bounceInUp, bounceInLeft, bounceInRight. fadeIn, fadeInUp, fadeInLeft, fadeInRight, lightSpeedIn, slideInUp, slideInLeft, slideInRight, zoomIn, zoomInDown, zoomInLeft, zoomInRight ). Replace the class name and make it awesome!!!
(NB: You can use another animation that's class name you can fine hear Animate.css Library)
- Step 03 - Change Tab Steps: If you need to Add or Remove some Tab steps from the tabs then you have to do it very simply.
A. Add or Remove some "Nav Item" inside the "nav-tabs" section.
B. Add or Remove some "Tab Panel" inside the "tab-content" section.
C. Formatting the every tab item of "Tabs Nav" by the id name like as #tab1,#tab2,#tab3 inside of
a tag: Ex:
href="#tab1" for first step.
D. Formatting the every tab item "Tab Panel" by the id name like as tab1,tab2,tab3 inside of
tabpanel div: Ex:
id="tab1" for first step.
- Step 04 - Remove Ripple Effect: If you need to Remove the tab click Effect then you have to just Remove the CSS class name from every steps of nav!! Do it very simply, Just Remove class
".ripple" (you can find it insdie the "nav-tabs" every step of nav tabs) for make it simple.
- Step 05 - Add Steps or Wizard: If you need to Add Steps or Wizard button in your tabs then you have to just Add Steps or Wizard button inside the every steps of your tabs!! Do it very simply (you can find this code inside the plugin zip folder) for make it awesome!!!
NB: Formatting every step of wizard like this
(Ex: For Tab Step-2 use
href="#tab1" to back Previous Tab and use
href="#tab3" to go Next Tab.)
NB: Don't forget to add custom js file
tab-custom.js end of the template body for perfect using the wizard system.
- Step 06 - Change Tabs Justify Layouts: If you need change the tabs Justify Layouts then you have to just Add or Remove a class!! Do it very simply, just Add or Remove
".nav-justified" class inside the "Nav tabs" for make this tab justify or normal Layout.
- Step 07 - Change Tabs Icon: If you need to change the tab Icon then you have to use Font Awesome Library. Do it very simply for make it awesome!!!
A. Go to the Font Awesome Library and find the icon that you need.
B. Click over the icon and get the iconic code below the sambol.
C. Just copy this code and paste it inside the tabs nav area.
(NB: If you don't this icon, You can Remove the icon code form there)
- Step 08 - Change Tabs Style: If you want to move a tab style to another tab Style, you can do it very simply. Just change a CSS class name for convert it!! Change the class Like as
"tab-style-1" inside the "tab-main-area" div, For make this tabs look style-1 (You can use hear tab-style-1 to tab-style-4). Replace the name and make it awesome!!!
- Step 09 - Add sub Title: If you need to Add sub-titile under the main tab Title, you can do it very simply. Just add this code
‹span›sub-titile‹/span› inside the every single tab of "Nav tabs" and make it awesome!!!
- Step 10 - Change Activate Tab: If you need to change the Activate tab then you have to just move the active class in a different tab. whose tab you want to see Activate on first loading time. Move the active class one tab to another tab form inside of "Nav tabs" and inside of "Tab panels". Do it very simply for make it awesome!!!
Note: The active class must be paste inside the same tab nav and panel. Don't use the active class inside of double tabs.
- Step 11 - Change Tabs Content: If you need to change the tab Content then you have to use Bootstrap Framework or your own HTML code!! Do it very simply for make it awesome!!!
- Step 12: Now save it. Let's go It's ready to use!
Note: Don't try to using a layout html or css file (Top Side/Left Side/Right Side) for making another layout, It's can broken your design.