Trying to accomplish Data-set workflow, and display the dataset feed in nice looking HTML
however, for some reason, the background (1920x1080) is not showing in ful screen, despite the layout is 1920x1080, the window with the ticker is also 1920x1080
here is the html code, and below a screenshot from xibo cms, the green area is the BG…
tried also using llarger image, and expanding the bg (112.jpg) larger then 1080px height…
any thoughts?
<style type="text/css">body{
margin: 0px;
padding: 0px;
width: 1920px;
height: 1080px;
background-image: url("112.jpg");
}
.title{position: absolute; right: 10px; top:200px}
.footer_table{position: absolute; bottom: 0px;}
.box{background-image: url(EventUnit.png); width:460px; height:555px; direction:rtl;}
.lamp{position: absolute; left: -150px; bottom:20px; z-index: 10;}
.box_title {direction: rtl;}
.box_1{position: absolute; bottom:100px;; right: 750px; width:200px;}
.box_2{position: absolute; bottom:100px;; right: 450px; width:200px;}
.box_3{position: absolute; bottom:100px;; right: 150px; width:200px;}
.box_event_details{background-image: url("102.png");
display:block;
position:relative;
z-index: 10;
background-repeat:no-repeat;
background-size:50% 50%;
height:433px;
width:433px;
}
</style>
<div class="footer_table"><img src="112.jpg" style="width: 1920px; height: 1200px;" /></div>
<div class="title"><img src="103.png" style="width: 980px; height: 158px;" /></div>
<div class="lamp"><img src="106.png" style="width: 574px; height: 912px;" /></div>
<div class="box box_1">
<div class="box_title">אירוע מספר 1<br />
> שם אירוע</div>
<div class="box_event_details">
<div class="event_title"> </div>
<div class="event_image"> </div>
<div class="event_text"> </div>
</div>
</div>
<div class="box box_2">
<div class="box_title">אירוע מספר 2<br />
> שם אירוע</div>
<div class="box_event_details">
<div class="event_title"> </div>
<div class="event_image"> </div>
<div class="event_text"> </div>
</div>
</div>
<div class="box box_3">
<div class="box_title">אירוע מספר 3<br />
> שם אירוע</div>
<div class="box_event_details">
<div class="event_title"> </div>
<div class="event_image"> </div>
<div class="event_text"> </div>
</div>
</div>
Peter
December 6, 2017, 2:30pm
2
is the background image also 1920x1080?
If you set it as a layout background, does that work better then?
If you want to, you can send me your layout with the dataSet via private message and I can take a look at it.
Yes, BG image is 1920x1080.
sending the layout and dataset shortly…
I was able to overcome this by enlarging the image and the CSS width and using the optional stylesheet …however im facing new issue that happens only on Android player (1.8 B102)
I have .footer image, static.
compared it with windows client 1.7.9 where everything seems to be fine.
Exported layout
<div class="title"><img src="103.png" /></div>
<div class="lamp"><img src="106.png" /></div>
<div class="box box_1">
<div class="box_title">ירוע מספר 1<br />
שם אירוע</div>
<div class="box_event_details">
<div class="event_title">[כותרת אירוע 1|1]</div>
<div class="event_image1">[תמונה אירוע 1|5]</div>
<div class="event_text"> </div>
</div>
</div>
<div class="box box_2">
<div class="box_title">אירוע מספר 2<br />
שם אירוע</div>
<div class="box_event_details">
<div class="event_title">[כותרת אירוע 2|2]</div>
<div class="event_image">[תמונה אירוע 2|6]</div>
<div class="event_text"> </div>
</div>
</div>
<div class="box box_3">
<div class="box_title">אירוע מספר 3<br />
שם אירוע</div>
<div class="box_event_details">
<div class="event_title">[כותרת אירוע 3|4]</div>
<div class="event_image">[תמונה אירוע 3|13]</div>
<div class="event_text"> </div>
</div>
</div>
<div class="footer"> </div>
optonal Stylesheet
.event_image img {width: 456px; height: 330px; padding-top: 50px; background-size: cover;}
.event_image1 img {width: 456px; height: 330px; padding-top: 71px; background-size: cover;}
.lamp{width: 574px; height: 912px;background-image: url(106.png); background-size: cover; position: absolute; left: -100px; bottom: 20px; z-index: 10;}
/*.background {
width: 2040px;
height: 1200px;
padding: 0px;
background-image: url(141.png);
background-size: cover;
background-size:2040px 1200px
}*/
.title {position: absolute; left: 980px; bottom:850px;}
.box_1{position: absolute; bottom:-25px; right: -120px; width:660px;}
.box_2{position: absolute; bottom:-25px; right: 430px; width:660px;}
.box_3{position: absolute; bottom:-25px; right: 970px; width:660px;}
.box_event_details{background-image: url("102.png");
display:block;
position:relative;
z-index: 10;
background-repeat:no-repeat;
background-size:100% 100%;
height: 590px;
width: 510px;}
.footer{position: absolute; bottom: -120px; width: 2040px;background-image: url(147.png); background-size: cover; z-index: 1; height:212px; animation-name: footer_static;}
@keyframes footer_static {
from {
margin-left: 0%;
}
to {
margin-left: 0%;
}
}
.box_title {direction: rtl; margin-right: 220px; margin-bottom: 10px;}
.title {
animation-duration: 3s;
animation-name: title_slidein;
}
@keyframes title_slidein {
from {
margin-left: 100%;
}
to {
margin-left: 0%;
}
}
.lamp{
animation-duration: 3s;
animation-name: lamp_slidein;
}
@keyframes lamp_slidein{
from {
left: -1000px;
}
to {
left: -100px;
}
}
.box_1 .box_event_details{
animation-duration: 3s;
animation-name: box_slidein1;
}
.box_2 .box_event_details{
animation-duration: 3s;
animation-name: box_slidein2;
}
.box_3 .box_event_details{
animation-duration: 3s;
animation-name: box_slidein3;
}
@keyframes box_slidein3{
from {
right: -3000px;
}
to {
right: 0px;
}
}
@keyframes box_slidein2{
from {
right: -2000px;
}
to {
right: 0px;
}
}
@keyframes box_slidein1{
from {
right: -1000px;
}
to {
right: 0px;
}
}
.box_1 .box_title, .box_2 .box_title, .box_3 .box_title{
animation-duration: 3s;
animation-name: box_title_slideup;
animation-fill-mode:forwards;
visibility: hidden;
}
.box_1 .box_title{
animation-delay: 1s;
}
.box_2 .box_title{
animation-delay: 1.5s;
}
.box_3 .box_title{
animation-delay: 2s;
}
@keyframes box_title_slideup{
from {
margin-bottom: -30%;
}
to {
margin-bottom:: 0%;
visibility: visible;
}
}
