Public Forums 71,145 posts

[scannergmbh Friend scannergmbhJoin date: September 2012Posts: 28Downloads:22Uploads:11 Thanked: 4 times in 1 posts]

#196019

Hi,
in the Purity III Demo, there is a slideshow in the “Corporate-layout”. Is there a possibility to make a fade-effect?

Thanks…

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#527846

It’s a slider using Twitter Bootstrap Carousel: http://getbootstrap.com/javascript/#carousel and I’m afraid that you must customize it by your self or consider to use another slideshow module like our JA Slideshow Lite (or a 3rd party slideshow module)

[scannergmbh Friend scannergmbhJoin date: September 2012Posts: 28Downloads:22Uploads:11 Thanked: 4 times in 1 posts]

#536402

Fade Effect:

—————————————–
.carousel-fade {
.carousel-inner {
.item {
opacity: 0;
transition-property: opacity;
}

.active {
opacity: 1;
}

.active.left,
.active.right {
left: 0;
opacity: 0;
z-index: 1;
}

.next.left,
.prev.right {
opacity: 1;
}
}

.carousel-control {
z-index: 2;
}
}

——————————————-
<div class=”container”>
<div id=”carousel-example-generic” class=”carousel slide carousel-fade” data-ride=”carousel”><!– Indicators –> <!– Wrapper for slides –>
<div class=”carousel-inner”>
<div class=”item active”><img src=”images/joomlart/slideshow/sl-1.jpg” alt=”Sample image” />
<div class=”carousel-caption”>
<h2>Your perfect starting template, Purity III</h2>
<p>Either it’s your first time with Joomla or you are a developer already, Purity III won’t let you down.</p>
</div>
</div>
<div class=”item”><img src=”images/joomlart/slideshow/sl-2.jpg” alt=”Sample image” />
<div class=”carousel-caption”>
<h2>This is the best FREE Joomla 3 template!</h2>
<p>We have drunken too much of the best… but this repsonsive Joomla template truly is, and IT’S FREE!</p>
</div>
</div>
<div class=”item”><img src=”images/joomlart/slideshow/sl-3.jpg” alt=”Sample image” />
<div class=”carousel-caption”>
<h2>The next generation of Purity series</h2>
<p>Sophisticated in Design, Brilliant in Features. That’s how we define Purity Series.</p>
</div>
</div>
</div>
<!– Controls –></div>
</div>

1 user says Thank You to scannergmbh for this useful post

1. Saguaros

[rgillemus Friend rgillemusJoin date: June 2014Posts: 1Downloads:0Uploads:0 Thanks: 3]

#539869

In which archive I must include the first part. In style.less or in the same module?. Sorry if the answer is obvious, but I am a completly novice. Ah.. and sorry for my awful English

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#539943

You can create a new CSS file called custom.css in this path: /templates/purity_iii/css and add custom css code there.

Please check out this documentation page for more information: http://t3-framework.org/documentation/bs3-customization#custom-css

1 user says Thank You to Saguaros for this useful post

1. rgillemus

[scannergmbh Friend scannergmbhJoin date: September 2012Posts: 28Downloads:22Uploads:11 Thanked: 4 times in 1 posts]

#539998

<em>@rgillemus 433519 wrote:</em><blockquote>In which archive I must include the first part. In style.less or in the same module?. Sorry if the answer is obvious, but I am a completly novice. Ah.. and sorry for my awful English</blockquote>

For Example, in your own new created Theme-Folder/template.less

2 users say Thank You to scannergmbh for this useful post

1. Saguaros
2. rgillemus

[Author]

Posts