Would appreciate any help with adding a second layer to my torque map in cartodb using createlayer. Sorry I'm obviously just learning and know just enough to be dangerous the following is a bootstrap page I'm messing with. Zombie Outbreak ;) Thanks in advance....
<!DOCTYPE html>
<html>
<head>
<title>OUTBREAK</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="img/tecKEY.ico">
<link href='http://fonts.googleapis.com/css?family=Share+Tech+Mono' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Map takes up full browser window -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
<style type="cartocss/text" id="cartocss">
/** torque visualization */
Map {
-torque-frame-count:303;
-torque-animation-duration:30;
-torque-time-attribute:"permit_dat";
-torque-aggregation-function:"count(tot_assess)";
-torque-resolution:3;
-torque-data-aggregation:cumulative;
}
#sfr_master2{
comp-op: lighter;
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-width: 0;
marker-line-opacity: 1;
marker-type: ellipse;
marker-width: 6;
marker-fill: #ff5c00;
[value < 12] { /* if 6 <= value < 12, color the marker red */
marker-fill: #FF5C00;
}
[value < 6 ] { /* if 3 <= value < 6, color the marker purple */
marker-fill: #FF5C00;
}
[value < 3 ] { /* if value < 3, color the marker blue */
marker-fill: #FF5C00;
}
}
#sfr_master2[frame-offset=1] {
marker-width:8;
marker-fill-opacity:0.45;
}
#sfr_master2[frame-offset=2] {
marker-width:10;
marker-fill-opacity:0.225;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
</head>
<body>
<!-- Navigation -->
<header>
<nav class="navbar navbar-inverse navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img style="max-width:100px; padding-right: 10px; margin-top: -7px;" src="img/teckey_logosmall.png">
<a class="navbar-brand topnav" href="#">Map of Infection</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</header>
<div id="map"></div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
<!-- place your code below -->
<script>
function main() {
// Instantiate new map object, place it in 'map' element
var map = new L.Map('map', {
center: [37.976029, -87.587514], // Western Egypt
zoom: 13,
scrollWheelZoom: true
});
// setup layer
var layerSource = {
type: 'torque',
options: {
user_name: 'rkey', // replace with your user name
table_name: 'sfr_master2',
cartocss: $("#cartocss").html()
}
}
var layer = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB'
});
map.addLayer(layer);
// put torque layer on top of basemap
cartodb.createLayer(map, layerSource)
.addTo(map)
.done(function(layer) {
// do stuff
})
.error(function(err) {
console.log("Error: " + err);
});
}
window.onload = main;
</script>
<div class="container-fluid">
<div id="dumbo" class="jumbotron">
<h1>Zombie Outbreak 2015</h1>
<h2>Confirmed Infection Locations</h2>
<p>Use scroll wheele or the + - buttons top left to zoom in or out, click on a location point to view info window</p>
<p><a class="btn btn-danger btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</body>
</html>
CSS
html, body {
font-family: 'Share Tech Mono', ;
height: 100%;
padding: 70;
margin: 0;
overflow:hidden;
background-color: black
}
div.cartodb-timeslider {
position: absolute;
display: inline-block;
height: 40px;
width: auto!important;
margin-bottom: 30px;
padding: 0;
-webkit-box-shadow: rgba(0,0,0,.2) 0 0 4px 2px;
-moz-box-shadow: rgba(0,0,0,.2) 0 0 4px 2px;
box-shadow: rgba(0,0,0,.2) 0 0 4px 2px;
background: rgba(153, 153, 153, 0.19)!important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
border: 1px solid #9f3700!important;
text-align: left;
z-index: 105;
}
div.cartodb-timeslider .ui-slider .ui-slider-range {
position: absolute;
z-index: 100;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
background-color: #9f3700!important;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
}
div.cartodb-timeslider .slider-wrapper {
display: inline-block;
zoom: 1;
vertical-align: top;
width: 275px!important;
height: 4px;
padding: 18px 15px;
}
div.cartodb-timeslider p {
width: 120px;
height: 40px;
margin: 0;
padding: 0 5px 0 0;
line-height: 40px;
font-size: 13px;
font-weight: 700;
font-family: Helvetica,Arial;
text-align: center;
color: rgb(159, 55, 0)!important;
}
.navbar-inverse {
border-bottom: 1px solid rgb(159, 55, 0);
font-size: 24px;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #9f3700;
background-color: transparent;
}
.navbar-inverse .navbar-brand {
color: #9d9d9d;
font-size: 24px;
}
.navbar-inverse .navbar-brand:hover {
color: rgb(159, 55, 0);
}
#map {
border: 1px solid rgb(159, 55, 0);
height: 460px;
width: 100%;
margin: 60px 0px 1px 0px;
}
#dumbo {
display: table;
width: 100%;
padding: 0 0;
text-align: center;
color: rgb(159, 55, 0);
position: relative;
background: url(img/dark%20grunge.jpg) no-repeat center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
z-index: 16;
}
#dumbo:after {
content: "";
background: url(img/Overlays/14.png) repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
opacity: 1.0;
z-index: -1;
}
.btn-danger {
color: #070707;
background-color: rgb(82, 82, 82);
border-color: black;
}
.btn-danger:hover {
color: #ffffff;
background-color: rgb(159, 55, 0);
border-color: black;
}
You are missing one important bit of specification. You always need to specify the height and width of the div that will play the role of the container for your map otherwise it will get zero height.
Since a significant part of your screen will be used by the bootstrap nav and jumbotron, you will need to specify height less than 100%.
Add the following lines to your page at the bottom of the head block.
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map { width: 100%; height:60%; background: black;}
</style>
Also consider moving the map below the jumbotron to avoid the map controls being overflown by the top navigation.
Finally there is one little problem brought to you by bootstrap CSS. Bootstrap uses a box sizing model that is different from the default (see box-sizing in CSS TR). This breaks the computation of the cartodb timeslider width. You can quickly fix this by adding an extra CSS clause:
<style>
div.cartodb-timeslider .slider-wrapper {box-sizing: content-box;}
</style>
Update: With the CSS provided by the OP that already has all the necessary clauses and tweaks the page has a street network from CartoDB standard basemap, a set of blots from the custom layer, a jumbotron and a menu from bootstrap.
Related
I am using laravel version 9 for doing my project. and there is a feature that needs to let the user export the event ticket. I try to use the package barryvdh/laravel-dompdf . right now I encounter the error of
Call a member function get_cellmap() on null
I tried to read others' posts with a similar issue, but I found out most of them are using the for the view so seems like the solution working for them is not appropriate for me.here is my code :
controller
public function GenerateTicket($id)
{
$tickets = GiftGivingBeneficiaries::where('gift_giving_id', $id)->get();
# Retrieve the last batch no. from the gift giving.
$batch_no = GiftGiving::findOrFail($id)->batch_no;
GiftGiving::findOrFail($id)->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download('event_tickets.pdf');
}
View Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from bootdey.com #bootdey on twitter -->
<!-- All snippets are MIT license http://bootdey.com/license -->
<title>Genearate Ticket</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<section class="container">
<h1>Event Tickets</h1>
#foreach ($tickets as $key=> $ticket)
<table>
</table>
<div class="row">
<input type="hidden" value="{{$key + 1}} ">
<article class="card fl-left">
<section class="date">
<time datetime="23th feb">
<span>Ticket No.</span><br>
<span>{{ $ticket->ticket_no }}</span>
</time>
</section>
<section class="card-cont">
<small>Event Name:{{ $ticket->GiftGiving->name }}</small>
<h3>{{ $ticket->name }}</h3>
<div class="even-date">
<i class="fa fa-calendar"></i>
<time>
<span>{{ $ticket->GiftGiving->start_at }}</span>
</time>
</div>
<div class="even-info">
<i class="fa fa-map-marker"></i>
<p>
{{ $ticket->GiftGiving->venue }}
</p>
</div>
Batch No.{{ $ticket->GiftGiving->batch_no }}
</section>
</article>
</div>
#if ( $key == 5 )
<div style="page-break-before:always;"> </div>
#endif
#endforeach
</div>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Oswald');
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box
}
body {
background-color: #dadde6;
font-family: arial
}
.fl-left {
float: left
}
.fl-right {
float: right
}
h1 {
text-transform: uppercase;
font-weight: 900;
border-left: 10px solid #fec500;
padding-left: 10px;
margin-bottom: 30px
}
.row {
overflow: hidden
}
.card {
display: table-row;
width: 100%;
background-color: #fff;
color: #989898;
margin-bottom:20px;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
border-radius: 4px;
position: relative;
border: #2b2b2b 1px solid;
}
.card+.card {
margin-left: 2%
}
.date {
display: table-cell;
width: 45%;
position: relative;
text-align: center;
border-right: 2px dashed #dadde6
}
.date:before,
.date:after {
content: "";
display: block;
width: 30px;
height: 30px;
background-color: #DADDE6;
position: absolute;
top: -15px;
right: -15px;
z-index: 1;
border-radius: 50%
}
.date:after {
top: auto;
bottom: -15px
}
.date time {
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.date time span {
display: block
}
.date time span:first-child {
color: #2b2b2b;
font-weight: 600;
font-size: 150%
}
.date time span:last-child {
text-transform: uppercase;
font-weight: 600;
margin-top: -10px
}
.card-cont {
display: table-cell;
width: 75%;
font-size: 100%;
padding: 10px 10px 30px 50px
}
.card-cont h3 {
color: #3C3C3C;
font-size: 130%
}
.row:last-child .card:last-of-type .card-cont h3 {
text-decoration: line-through
}
.card-cont>div {
display: table-row
}
.card-cont .even-date i,
.card-cont .even-info i,
.card-cont .even-date time,
.card-cont .even-info p {
display: table-cell
}
.card-cont .even-date i,
.card-cont .even-info i {
padding: 5% 5% 0 0
}
.card-cont .even-info p {
padding: 30px 50px 0 0
}
.card-cont .even-date time span {
display: block
}
.card-cont a {
display: block;
text-decoration: none;
width: 80px;
height: 30px;
background-color: #D8DDE0;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 2px;
position: absolute;
right: 10px;
bottom: 10px
}
.row:last-child .card:first-child .card-cont a {
background-color: #037FDD
}
.row:last-child .card:last-child .card-cont a {
background-color: #F8504C
}
#media screen and (max-width: 860px) {
.card {
display: block;
float: none;
width: 50%;
margin-bottom: 10px
}
.card+.card {
margin-left: 0
}
.card-cont .even-date,
.card-cont .even-info {
font-size: 75%
}
}
.page-break {
page-break-after: always;
}
</style>
<script type="text/javascript">
</script>
</body>
</html>
also, this is what my view looks like. Hope to know what part did I miss for it,every answer is highly appreciated.
Not sure if this will help but the way I execute this in my app is like so:
Maybe try storing it first then accessing it? Then delete them after 1 hour?
$pdf = PDF::setOptions(['isHtml5ParserEnabled' => true, 'isRemoteEnabled' => true])->loadView('charity.gifts.generate_ticket', compact('tickets'));
$pdf->setPaper('a4', 'landscape');
Storage::disk('reports')->put('tickets'. '.pdf', $pdf->output());
$url = Storage::disk('reports')->url('tickets'. '.pdf');
I have an issue with Dompdf not positioning images correct.
The output in browser is ok, but the images are to close to the title in the PDF.
They should also render over the blue bar. I thought this should be possible with either a negative margin-top or a position absolute. But from what I read is that position:absolute inside a position:relative container is (still) not working.
HTML and expected output:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<style>
#page { margin: 0px; }
body
{
font-family: 'Lato';
font-size: 13px;
margin: 0px;
padding: 0px;
}
.container
{
padding: 0px 30px;
}
.top_container
{
position: relative;
}
.subgroep
{
color: #2e4660;
font-weight: 700;
padding-top: 30px;
}
.top_container .balk_blauw
{
/*position: absolute;*/
/*bottom: 0px;*/
/*left: 0px;*/
height: 60px;
width: 100%;
background: #2e4660;
margin-top: -60px;
}
.top_container .images
{
position: relative;
z-index: 99;
}
.top_container .images img
{
width: 230px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="top_container">
<div class="container">
<div class="subgroep">Wijnklimaatkast</div>
<div class="images">
<img src="https://www.lhis.nl/producten/WTes1672-21_dicht_gevuld.png" class="image1">
<img src="https://www.lhis.nl/producten/WTes1672-21_open_leeg.png" class="image2">
</div>
</div>
<div class="balk_blauw"></div>
</div>
</body></html>
PDF renders as follows:
Screenshot
PHP Code:
$dompdf_options = new \Dompdf\Options();
$dompdf_options->set('isRemoteEnabled', true);
$dompdf_options->set('chroot', $dirname);
$dompdf = new \Dompdf\Dompdf($dompdf_options);
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream();
This is an issue with how Dompdf aligns element within a line box. There is an ongoing effort to address the issue (WIP).
With the current release you can work around the issue by moving your image block down using relative positioning. You'll also want to set z-indexing a bit differently to better accommodate how Dompdf renders elements.
Try the following:
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<style>
#page { margin: 0px; }
body
{
font-family: 'Lato';
font-size: 13px;
margin: 0px;
padding: 0px;
}
.container
{
padding: 0px 30px;
z-index: 99;
}
.top_container
{
position: relative;
}
.subgroep
{
color: #2e4660;
font-weight: 700;
padding-top: 30px;
}
.top_container .balk_blauw
{
/*position: absolute;*/
/*bottom: 0px;*/
/*left: 0px;*/
height: 60px;
width: 100%;
background: #2e4660;
margin-top: -60px;
}
.top_container .images
{
position: relative;
top: 40px;
z-index: 99;
}
.top_container .images img
{
width: 230px;
margin-top:20px;
}
</style>
</head>
<body>
<div class="top_container">
<div class="container">
<div class="subgroep">Wijnklimaatkast</div>
<div class="images">
<img src="https://www.lhis.nl/producten/WTes1672-21_dicht_gevuld.png" class="image1">
<img src="https://www.lhis.nl/producten/WTes1672-21_open_leeg.png" class="image2">
</div>
</div>
<div class="balk_blauw"></div>
</div>
</body></html>
Follow your issue for updates
This one should make many scratch their head...
Could someone let me know why my <div> element (id 'container') is shifting down when the overflow-y is set to "scroll" in Microsoft Edge? Seems to work just fine in Firefox.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8" />
<style>
body {
border: 3px dotted red;
position: fixed;
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
overflow: hidden;
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="height: 95%; border: 2px dotted orange; background-color: blue; overflow: hidden;">
<div id="container" style="overflow-y: scroll; width: 60vmin; height: 95%; background-color: silver;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
for (var i = 0; i < 500; i++) {
$('#container').append('<div style="border: 1px solid silver;">Hello World!</div>');
}
</script>
</body>
</html>
Here are the screenshots for both Firefox and Microsoft Edge:
Firefox:
Edge:
Try to modify your code as below(demo):
<style type="text/css">
body {
border: 3px dotted red;
position: fixed;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;
overflow: hidden;
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
<div style="height: 95%; width: 60vmin; border: 2px dotted orange; background-color: blue; overflow: hidden; margin-right:20px ; margin-top:20px; float:right">
<div id="container" style="overflow-y: scroll; width: 60vmin; height: 100%; background-color: silver;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
for (var i = 0; i < 500; i++) {
$('#container').append('<div style="border: 1px solid silver;">Hello World!</div>');
}
});
</script>
The result in Microsoft Edge browser as below:
I'm making an image slider, and everything works so far but my previous and next buttons are not centering vertically on the main image. I'm trying to make it responsive as well.
I tried everything but I don't know what I'm missing. The absolute position with top: 50% doesn't seem to do the trick. Here's the codepen.
$('#imgDetail li img').click(function(){
$('#unidoor').attr('src',$(this).attr('src'));
});
$('#next').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').next().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:first').attr('src')): $('#unidoor').attr('src',nextSrc);
});
$('#prev').on('click',function(){
var imgSrc = $('#unidoor').attr('src');
var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').prev().find('img').attr('src');
console.log(nextSrc);
nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:last').attr('src')): $('#unidoor').attr('src',nextSrc);
});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
}
.header{
margin: 0 auto;
width: 100%;
background-color: #333;
padding: 30px 0 0 0;
}
.header h1{
margin: 0;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.header ul {
list-style-type: none;
margin: 0;
/* padding: 0; */
overflow: hidden;
padding: 20px 0px 30px 0;
text-align: center;
}
.header li {
display: block;
display: inline-block;
/* border-right: 1px solid #bbb; */
border-right: 1px solid #bbb;
height: 25px;
}
.header li:last-child{
border-right: none;
}
.header li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 0px 40px;
font-size: 1em;
}
.header li a:hover{
color: #7bbe9a;
/* color: #80b198; */
}
#green-room {
background: #333 !important;
}
#unidoor {
position: relative;
width: 90%;
margin: 0 auto;
display: block;
}
#prev {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-10%, -50%);
}
#next {
position: absolute;
top: 50%;
right: 10%;
transform: translate(-10%, -50%);
}
/* .previous {left: 10%;}
.next {right: 10%;} */
/* .prev-next-button a {
position: absolute;
left: 20%;
top: 20%;
} */
#imgDetail ul {
margin: 0 auto;
display: block;
width: 50%;
}
.thumb {
width: 25%;
height: auto;
margin: 15px 5px 0 5px;
}
#imgDetail li {
display: inline; margin-right: 10px;
}
#imgDetail a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
#imgDetail a:hover {
background-color: #7bbe9a;
color: white;
opacity: 1;
}
.previous {
background-color: #fff;
opacity: 0.5;
color: black;
}
.next {
background-color: #fff;
opacity: 0.5;
color: black;
}
/* .round {
border-radius: 50%;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="header">
<div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div>
<nav id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="imgDetail">
<br>
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" alt="" id="unidoor" />
‹
›
<ul>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="thumb" /></li>
<li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="thumb" /></li>
</ul>
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>
Hello there you can wrap the <div id="imgDetail"> in an outer div class for instance <div class="slideshow-container"> and then add your CSS which would look like this:
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
You can get the changes on codepen. Happy coding :)
I am working on developing a custom theme for a website project on which I am currently working. I have been able to put the zip file together, upload it, and successfully install the template in Joomla. The theme with content shows up beautiful. However, I am not able to click on any buttons in any of the components or modules or even the edit button in the component. In the past, I have created and used a couple themes, and I have never had this issue, so I am not certain as to why I am having this problem now. I am including my index.php and custom.css files for reference. Any suggestions would be greatly appreciated from any Joomla gurus! Thank you much.
index.php
<?php
/**
* #package Joomla.Site
* #subpackage Templates.shamrocktours
*
* #copyright Copyright (C) 2016 Paradimensional Technology. All rights reserved.
*/
// Check if template is being installed in Joomla
defined('_JEXEC') or die;
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load Bootstrap CSS
JHtml::_('bootstrap.loadCss', true);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Shamrock Tours Web Site">
<jdoc:include type="head" />
<!--[if lt IE 9]>
<script src="<?php echo JUri::root(true); ?>/media/jui/js/html5.js"></script>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=IM+Fell+French+Canon" rel="stylesheet" type="text/css">
<link href="templates/shamrocktours/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<header role="banner" class="row-fluid">
<div class="span8">
<img src="templates/shamrocktours/images/site_logo.png" alt="Shamrock Tours, click for home." id="headerimage">
</div>
<div class="span4">
<jdoc:include type="modules" name="usermenu" style="none" />
</div>
</header>
<nav role="navigation" class="row-fluid">
<div class="span12">
<jdoc:include type="modules" name="nav" style="none" />
</div>
</nav>
<div role="main" id="innerbody">
<div class="row-fluid">
<aside class="span3">
<jdoc:include type="modules" name="side" style="none" />
</aside>
<article class="span9">
<jdoc:include type="message" />
<jdoc:include type="component" />
</article>
</div>
</div>
</body>
</html>
custom.css
#charset "utf-8";
/* Main Styles for Shamrock Tours Website */
/* CSS Reset */
a,
article,
aside,
body,
h1,
h2,
h3,
h4,
h5,
h6,
html,
img {
margin: 0;
padding: 0;
}
/* General Element Styling */
html {
background: #0D8330;
}
body {
border: 5px double #000;
border-radius: 10px;
box-sizing:border-box;
font-family: "IM Fell French Canon";
background: transparent;
font-size: 1em;
}
h1,
h2,
h3 {
font-weight: bold;
}
h1 {
font-size: 2.25em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
h4 {
font-size: 1.125em;
}
/* Header */
header {
margin: 25px 25px 0;
}
#headerimage {
float: left;
width: 41%;
margin-left: 10px;
line-height: 2;
}
header h1 {
position: relative;
top: -10px;
left: 150px;
width: 500px;
text-shadow: 1px -1px #fff;
text-align: center;
}
/* Navigation */
nav {
position: relative;
top: -65px;
left: 397px;
width: 75% !important;
height: 75px;
border-radius: 10px;
box-shadow: 0 4px #666;
background: rgba(8,138,43,0.9);
line-height: 2;
}
/* Content */
#innerbody {
position: relative;
top: -99px;
width: 95%;
min-height: 450px;
margin: 0 auto;
padding: 75px 15px;
border-radius: 10px;
background: #fff;
z-index: -1;
}
article {
float: right;
width: 70%;
}
article h2 {
margin: 1.05em 0;
text-shadow: 1px 1px #666;
}
article h3 {
line-height: 1.2;
}
aside {
text-align: center;
}
/* Footer */
#footercontainer {
position: relative;
}
footer {
position: absolute;
bottom: 0;
font-size: 0.875em;
}
Just remove the z-index: -1 from the #innerbody:
#innerbody {
position: relative;
top: -99px;
width: 95%;
min-height: 450px;
margin: 0 auto;
padding: 75px 15px;
border-radius: 10px;
background: #fff;
/*z-index: -1;*/
}