Hi guys,
I'm trying to add a modification called
CSS Scanlines for the background image of
the site only (eventually I'd like to figure out how this image can change each time the page is refreshed or loaded).
I cleaned up the unnecessary stuff to focus on only applying it for the background image (
this image).
HTML cleanup of scanlines index.html file:<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS Scanlines</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="scanlines">
<li id="jpg"><div class="jpg"></div></li>
</li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
CSS cleanup of /css/style.css file:/* LIST OF FURTHER IMPROVEMENTS */
/*
currently working on :
calculation draft for keyframes steps
$scan-moving-duration: 3s;
$scan-moving-delay: 7s;
total time = 10s (duration + delay)
keyframes :
0%: wait
15%: start moving
85%: end moving & start waiting
100% : wait
(the rest later)
*/
/* REGULAR SCANLINES SETTINGS */
/* MOVING SCANLINE SETTINGS */
/* MIXINS */
/* CSS .scanlines CLASS */
.scanlines {
position: relative;
overflow: hidden;
}
.scanlines:before, .scanlines:after {
display: block;
pointer-events: none;
content: '';
position: absolute;
}
.scanlines:before {
width: 100%;
height: 2px;
z-index: 2147483649;
background: rgba(0, 0, 0, 0.3);
opacity: 0.75;
-webkit-animation: scanline 6s linear infinite;
animation: scanline 6s linear infinite;
}
.scanlines:after {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2147483648;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 51%);
background-size: 100% 4px;
-webkit-animation: scanlines 1s steps(60) infinite;
animation: scanlines 1s steps(60) infinite;
}
/* ANIMATE UNIQUE SCANLINE */
@-webkit-keyframes scanline {
0% {
-webkit-transform: translate3d(0, 200000%, 0);
transform: translate3d(0, 200000%, 0);
}
}
@keyframes scanline {
0% {
-webkit-transform: translate3d(0, 200000%, 0);
transform: translate3d(0, 200000%, 0);
}
}
@-webkit-keyframes scanlines {
0% {
background-position: 0 50%;
}
}
@keyframes scanlines {
0% {
background-position: 0 50%;
}
}
/* PRESENTATION STUFF */
ul .jpg {
width: calc(100vw - 350px);
height: 95vh;
border: none;
}
ul li {
/* display: none;
&:target {
display: inline-block;
}*/
}
.jpg {
background: url(https://aliendisc.net/images/eartherb.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: auto;
}
html {
background: url(https://aliendisc.net/images/eartherb.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: auto;
}
...I modified line 65 UBB.thread's common.css file to this:
/* initialize some default page settings */
a,div,p,td,li,span{max-height:999999em;}
html {
background: url(https://aliendisc.net/images/eartherb.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: auto;
}
.jpg {
background: url(https://aliendisc.net/images/eartherb.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: auto;
}
This is my Header Insert For All Pages related to this mod:
<meta charset='UTF-8'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
When I insert:
<!-- SCANLINES BOX -->
<ul class="scanlines">
<!-- IMG -->
<li id="jpg"><div class="jpg"></div></li>
</li>
</ul>
Into portal.tpl, the modifcation appears, however it is not behind everything. It acts as a cell?
I'm trying to find where the scanlines box code is to be inserted. I tried ubbthreads.php and various other files.
As you can see, I'm not very advanced with my understanding of these functions, any pointers would be appreciated!!
Thank you