A module under tabs

December '13 Joomla Template
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Fri Jun 05, 2015 4:16 pm
Reply with quote
Report this post
Hi, I working on a new site, using the Game template.
URL: www.tangsøkirkerne.dk/test2015

Here's my problem:
I have installed the JEvents component on my site, and I wanted to use the different tabs in the 'banner_left' module position to show different calendars using JEvents.

On the first tab I wanted to show a calendar slideshow, using the JEvents slideshow module.
But that has proven to be impossible as the CSS of the Game template tabs and the CSS of the JEvents slideshow module conflict.

So my question is: Can I maintain what you see on www.tangsøkirkerne.dk/test2015 with the slideshow running there, but without the slideshow being under a tab?

Can the slideshow be where it is positioned now, but not under a tab - since the tabs CSS and the JEvents css conflict?

Thank you,
Carsten.
User avatar
Fresh Boarder

teitbite
Sun Jun 07, 2015 5:55 pm
Reply with quote
Report this post
Hi

What is the css conflict when You use calendar in tabs ? Can You please set it so I'll check ? Maybe it's easy to fix.

Unfortunately I do not understand the question about slider. Slider is only capable of showing slides not modules or custom content.
User avatar
Moderator

GK User
Sun Jun 07, 2015 6:15 pm
Reply with quote
Report this post
On the frontpage of http://www.tangsøkirkerne.dk/test2015 I have the Tabs in the 'banner_left' module position, as you can see.
In the first tab ('Slideshow') I have inserted a module, called JEvents Slideshow.
The slideshow module, when working correctly, should look something like this (except that I have the date to the left, in a red bubble): http://activities.jeventsdemo.net/

But, as you can see, using the JEvents Slideshow under a Tab gives a very different result, and when I ask the JEvents programmers they say it's because the CSS of the Gavick tabs and the CSS of the JEvents slideshow conflict.

So what I am thinking is:
Is there a solution? Is it possible to either (1) edit some CSS so that the JEvents Slideshow module can still be under a Tab, or (2) is there a way to place the module where it is now, but not under a Tab (see attached example of that), but so that the other Tabs are still there to click on?

Here is the CSS of the JEvents Slideshow ('carousel') that is currently positioned under the first Tab under 'banner_left':

.jevcarousel .carousel {
position: relative;
margin-bottom: 0px;
line-height: 1;
}

.jevcarousel .carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}

.jevcarousel .carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: 0.6s ease-in-out left;
-moz-transition: 0.6s ease-in-out left;
-o-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}

.jevcarousel .carousel-inner > .item > img,
.jevcarousel .carousel-inner > .item > a > img {
display: block;
line-height: 1;
}

.jevcarousel .carousel-inner > .active,
.jevcarousel .carousel-inner > .next,
.jevcarousel .carousel-inner > .prev {
display: block;
}

.jevcarousel .carousel-inner > .active {
left: 0;
}

.jevcarousel .carousel-inner > .next,
.jevcarousel .carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}

.jevcarousel .carousel-inner > .next {
left: 100%;
}

.jevcarousel .carousel-inner > .prev {
left: -100%;
}

.jevcarousel .carousel-inner > .next.left,
.jevcarousel .carousel-inner > .prev.right {
left: 0;
}

.jevcarousel .carousel-inner > .active.left {
left: -100%;
}

.jevcarousel .carousel-inner > .active.right {
left: 100%;
}

.jevcarousel .carousel-inner img {
border-radius: 10px;
}

.jevcarousel .carousel-control {
position: absolute;
top: 50%;
left: 10px;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 60px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: url("themes.gif") no-repeat scroll left center transparent;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}

.jevcarousel .carousel-control.right {
background-position: right center;
right: 10px;
left: auto;
}

.jevcarousel .carousel-control:hover,
.jevcarousel .carousel-control:focus {
color: #ffffff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
}

.jevcarousel .carousel-indicators {
position: absolute;
bottom:10px;
left:0%;
margin-left:0%;
padding-left:0px;
width:100%;
text-align:center;
z-index: 15;
margin: 0;
list-style: none;
top:auto;
right:auto;
}

.jevcarousel .carousel-indicators li {
display:inline-block;
float: none;
width: 10px;
height: 10px;
margin-right: 5px;
text-indent: -999px;
background-color: #ccc;
background-color: rgba(255, 255, 255, 0.25);
border-radius: 5px;
cusor: pointer;
}

.jevcarousel .carousel-indicators .active {
background-color: #fff;
}

.jevcarousel .carousel-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 15px 15px 35px 15px;
background: #333333;
background: rgba(0, 0, 0, 0.75);
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}


.jevcarousel .carousel-caption h4,
.jevcarousel .carousel-caption p {
line-height: 20px;
color: #ffffff;
}

.jevcarousel .carousel-caption h4 {
margin: 0 0 5px;
}

.jevcarousel .carousel-caption p {
margin-bottom: 0;
}

.jevcarousel .jevcstart {
float:right;
}
@media (max-width: 480px) {
.jevcarousel .carousel-caption {
position: static;
}
}
User avatar
Fresh Boarder

teitbite
Tue Jun 09, 2015 1:55 pm
Reply with quote
Report this post
Hi

I see a way to adjust the code, but I will need an access to joomla panel to stop the slideshow from autorotating and to be able to add code to css.
User avatar
Moderator

GK User
Tue Jun 09, 2015 2:40 pm
Reply with quote
Report this post
I have sent you a PM
User avatar
Fresh Boarder

teitbite
Thu Jun 11, 2015 4:46 pm
Reply with quote
Report this post
Hi

I've added this code to make it similar to the example You've shown me.

Code: Select all
#gk-tabs-701 .jevcarousel .carousel-inner > .item > a > img {
    width: 100%;
}

#gk-tabs-701 .jevcarousel .carousel-indicators li:after,
#gk-tabs-701 .jevcarousel .carousel-indicators li:before {
    display: none;
}

#gk-tabs-701 .jevcarousel .carousel-indicators li {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-radius: 5px;
    display: inline-block !important;
    float: none !important;
    height: 10px !important;
    margin-right: 5px !important;
    text-indent: -999px;
    width: 10px !important;
    padding: 0 !important;
}

#gk-tabs-701 .jevcarousel .carousel-indicators .active {
    background-color: #fff !important;
}

#gk-tabs-701 .jevcarousel .carousel-caption a {
    color: #fff;
}
User avatar
Moderator

GK User
Thu Jun 11, 2015 4:57 pm
Reply with quote
Report this post
Yes! Thank you very, very much for your help.
Carsten.
User avatar
Fresh Boarder


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.