-
Notifications
You must be signed in to change notification settings - Fork 40
Embed a Carousel into the Jumbotron banner
Thomas Kuther edited this page Oct 22, 2017
·
2 revisions
Here's the how the jumbotron banner on the Demo page is done.
- Make sure the jumbotron is enabled in Administration -> Themes -> Bootstrap Darkroom config -> Jumbotron
- Use this code in Administration -> Configuration -> Options -> Banner
<style type="text/css">
/* dimensions */
#jumbotronCarousel {
height: 200px;
}
#jumbotronCarousel .carousel-inner,
.carousel-fade .carousel-inner .carousel-item {
height: 100%;
}
#jumbotronCarousel .carousel-inner .carousel-item {
padding-left: 10%;
}
#jumbotronCarousel .carousel-inner .carousel-item h1 {
margin-top: 0px;
}
#jumbotronCarousel .carousel-control-prev,
#jumbotronCarousel .carousel-control-next {
width: 5%;
}
.jumbotron {
padding: 10px 0 10px;
}
#theHeader {
height: 100%;
}
</style>
<div id="jumbotronCarousel" class="carousel carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active ">
<h1>Bootstrap Darkroom</h1>
<p>A mobile-ready & feature-rich theme for <a href="http://piwigo.org">Piwigo</a></p>
</div>
<div class="carousel-item">
<h1>Modern features</h1>
<ul>
<li><p>Fullscreen slideshow using <a href="http://photoswipe.com">PhotoSwipe</a>. </p></li>
<li><p>Carousel album navigation on the picture page using <a href="http://kenwheeler.github.io/slick/">Slick</a></p></li>
<li><p>Build-in support for HTML5 Video content.</p></li>
</ul>
</div>
<div class="carousel-item">
<h1>100% mobile device ready</h1>
<ul>
<li><p>One Theme. All features. On all devices. No compromises.</p></li>
<li><p>Responsive layout, adjusts to the screen size.</p></li>
</ul>
</div>
<div class="carousel-item">
<h1>Customize and configure</h1>
<ul>
<li><p>More than 30 color schemes, thanks to <a href="https://bootswatch.com">Bootswatch</a> and <a href="https://fezvrasta.github.io/bootstrap-material-design/">Material Design</a></p></li>
<li><p>Most features are configurable in the backend.</p></li>
</ul>
</div>
</div>
<a class="carousel-control-prev" href="#jumbotronCarousel" role="button" data-slide="prev">
<span class="fa fa-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#jumbotronCarousel" role="button" data-slide="next">
<span class="fa fa-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
- Frequently Asked Questions
- Plugin Support Matrix
- Video support
- EXIF Metadata in PhotoSwipe
- Make it work like Smartpocket
- Add custom CSS and Javascript
- Override the Navbar style and background
- Compile your own Bootstrap
- Add primary links to the top navigation
- Add custom share buttons
- Hide image metadata by default
- Replace default mobile webapp logo icons
- Remove the "Mail to Webadmin" link in the footer
- Pre generate custom size derivatives