A module under tabs

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.

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.

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;
}
}

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.

I have sent you a PM

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;
}


Yes! Thank you very, very much for your help.
Carsten.