fbpx

Astroid 2.4 Landed with Joomla 4 Compatibility Download Now

Welcome, Guest
Username: Password: Remember me

TOPIC: Tabs section

Tabs section 1 year 6 months ago #13172

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4033
  • Thank you received: 592
  • Karma: 104
Hello,

The Module is called JD Tabs, you can download it in the extensions zip file for JD Coax in your download section and install it wherever you like.

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

Tabs section 1 year 5 months ago #13189

Thanks for the quick reply,

I have tried this expecting a different tabs extension than the one already in Fitness but I could only find the same extension.
Did the install go wrong? Or is there lots of custom coding in your coax template tabs?
The administrator has disabled public write access.

Tabs section 1 year 5 months ago #13217

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Posts: 4033
  • Thank you received: 592
  • Karma: 104
I don't think it's custom coding so much but the config of the module.

Did you publish it? what looks different from the coax one? Obviously there must be some styles it's inheriting from the Coax template but rest should be all the same.

Thanks,
Chetan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The administrator has disabled public write access.

Tabs section 1 year 5 months ago #13325

I'm sorry Admin but what you say is just not what is reality.
The tabs I get within Fitness is the same as I get when I install the one from Coax, yet how they look in front-end is completely different.
There is just too much custom css in your templates! To even change all the yellow in Fitness to Red means I have to go find every piece of yellow in the css coding and change that. This needs improvement! What for instance gantry templates offer is a 1 click solution, no css knowledge needed. (even some of the backgrounds are css coded like in working class section, i takes people a lot of searching to find out you need to remove the custom class in order to get a new custom background going)

Please help me add the coding needed to get a similar tabs section as coax offers.
The administrator has disabled public write access.

Tabs section 1 year 5 months ago #13427

  • roshan jajoriya
  • roshan jajoriya's Avatar
Hello
Hope you are doing well !!!
Please follow these steps
1. download the latest jd_tab module and install it.
2. Then copy coax tab layout in the fitness tab layout. www.screencast.com/t/H3iN4978hszp
3. Create file " _jdtabs " in the scss\fitness\modules and add the code. i have attached below like this :- www.screencast.com/t/XVrJguZlvR
/**
* @package         JD CoaX
* @link            https://www.joomdev.com
* @copyright       Copyright © 2019 Regular Labs All Rights Reserved
* @license         http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
*/
 
/* --- Module Style -- */
.jd-tabs{
	.tab-content{
		.active{
			&.show{
				transform: scaleX(0);
				transform-origin: top;
				animation: grow-top cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
				animation-delay: 0.2s;
			}
		}
	}
	ul.nav{
		flex-wrap: inherit;
		@include media-breakpoint-down(md){
			display: block;
		}
		li{
			margin: 0 5px;
			display: flex;
			flex-wrap: wrap;
			@include media-breakpoint-down(md){
				display: block;
			}
			a{
				position: relative;
				text-align: center;
				padding: 30px 15px;
				border-radius: 0px !important;
				&:hover{
					background-color: $white;
					box-shadow: 0 15px 24px rgba(64, 90, 128, 0.05);
					&:before{
						width: 100%;
					}
				}
				&:before{
					background-color: $primary;
					content: "";
					display: block;
					height: 3px;
					left: 0;
					margin: 0 auto;
					position: absolute;
					right: 0;
					bottom: 0;
					transition: all 0.1s ease-in-out 0s;
					width: 0;
				}
				&.active{
					background-color: $white;
					box-shadow: 0 15px 24px rgba(64, 90, 128, 0.05);
					&:before{
						background-color: $primary;
						content: "";
						display: block;
						height: 3px;
						left: 0;
						margin: 0 auto;
						position: absolute;
						right: 0;
						bottom: 0;
						transition: all 0.1s ease-in-out 0s;
						width: 100%;
					}
				}
			}
		}
	}
	.media-content-wrap{
		.title{
			font-size: 20px;
			line-height: normal;
			text-align: center;
		}
		.tab-icon{
			font-size: 70px;
			color: #f02930;
		}
		//media-left
		&.jd-tab-media-left{
			display: flex;
			.tab-title{
				order: 1;
				.title{
					font-size: 15px;
				}
			}
		}
		//media-right
		&.jd-tab-media-right{
			display: flex;
			.tab-title{
				order: 0;
				.title{
					font-size: 15px;
					order: 1;
				}
			}
		}
		//media-top
		&.jd-tab-media-top{
			display: flex;
			flex-wrap: wrap;
			.tab-title{
				order: 2;
			}
			.tab-icon{
				order: 1;
				width: 100%;
			}
		}
	}
}

//jd-tab
.jd-tab-wrap{
	.jd-tab-content{
		p{
			color: $white;
		}
		h1,h2,h3,h4,h5,h6{
			color: $white;
		}
		.btn{
			color: $white;
			&.btn-outline-primary{
				border-color: $white;
			}
			&:hover{
				color: $white;
			}
		}
	}
}

#pills-tab{
	&.nav-pills{
		justify-content: center;
		li{
			a{
				padding: 25px;
				&.active{
					background: #fff;
				}
			}
		}
	}
}

//keyframes

@keyframes fade-in-top {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes grow-top {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

4. import this file in scss\fitness\modules.scss like this :- www.screencast.com/t/Bbzs9Oj0QY
5. make sure the icon or image you use in the tab its width should be under 80px or 100px or as you want. www.screencast.com/t/R76WuuuUp.
The administrator has disabled public write access.

Tabs section 1 year 5 months ago #13645

Hey roshan jajoriya,

Your solution worked great temporarily up until the update!
Now with the latest astroid and fitness template i'm back to square 1.
I have emailed my details for some hikashop issues, can you take a look at what needs to change now after the update? thank you.
The administrator has disabled public write access.

Tabs section 1 year 5 months ago #13652

  • roshan jajoriya
  • roshan jajoriya's Avatar
Hello
Can you Please send again the login info via email. I couldn't locate it in our email.

Thanks,
Last Edit: 1 year 5 months ago by admin.
The administrator has disabled public write access.

Tabs section 1 year 5 months ago #13731

Hello, I have done this but I have heard no confirmation yet.
I have got it running now, hope new updates will have a way of leaving custom changes in place.
Last Edit: 1 year 5 months ago by tienmeterdeluchtin.
The administrator has disabled public write access.

Tabs section 1 year 5 months ago #13785

  • nishtha
  • nishtha's Avatar
  • Offline
  • Moderator
  • Posts: 1269
  • Thank you received: 123
  • Karma: 16
Hi,

Yes, we got your details but like you said that the solution we provided you about the tabs is just a temporary solution which actually it is not because this module is not a part of the JD Fitness template but of Coax.

The code provided above that you need to write it in a custom.scss file such that even after update you do not lose it.
Path: templates/TEMPLATENAME/scss

Also let us know if you have any other issues and is this query resolved or not!

Thanks,
Nishtha
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.

To know more about products check out the their documentation.
Last Edit: 1 year 5 months ago by nishtha.
The administrator has disabled public write access.

Tabs section 1 year 5 months ago #13879

Hey Nishtha,

Maybe it's a good idea to make a small documentation for us n00bs to understand how to get our custom changes into the custom.scss and keeping everything safe for updates. (for instance modules.scss changes so i have to add @import jdtabs.scss again after update. How to get all this safe for updates?
Thank you.
The administrator has disabled public write access.
Moderators: chandandeep
Time to create page: 0.397 seconds