pasteNinja

Untitled

Apr 8th, 2016
101
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.30 KB | None | 0 0
  1. 1. Upload/overwrite:
  2. js/bootstrap.js
  3. js/bootstrap.min.js
  4. js/plugins.js
  5. css/animate.min.css
  6. css/bootstrap.css
  7. css/bootstrap.min.css
  8. css/font-awesome.css
  9. css/font-awesome.min.css
  10. css/vegas.min.css
  11. fonts/ --- all files
  12.  
  13.  
  14. 2. Open style.css and find "9.0 Overlay Styles". Add new code.
  15. /*--- Code Start ---*/
  16. .overlay {
  17. position: absolute;
  18. width: 100%;
  19. height: 100%;
  20. top: 0;
  21. bottom: 0;
  22. left: 0;
  23. right: 0;
  24. z-index: 0;
  25. }
  26.  
  27. .overlay-color {
  28. position: absolute;
  29. top: 0;
  30. bottom: 0;
  31. left: 0;
  32. right: 0;
  33. background: #000A1E;
  34. background: rgba(0,10,30,0.5);
  35. opacity: 0.75;
  36. filter: alpha(opacity=40);
  37. z-index: 0;
  38. }
  39.  
  40. .overlay-image {
  41. position: absolute;
  42. top: 0;
  43. bottom: 0;
  44. left: 0;
  45. right: 0;
  46. z-index: -1;
  47. }
  48. /*--- Code End ---*/
  49.  
  50.  
  51. 3. Open your .html file and replace code for overlays.
  52.  
  53. Before:
  54. <!-- OVERLAY -->
  55. <div class="overlay"></div>
  56.  
  57. After - all .html files - without section-slideshow-background.html:
  58. <!-- OVERLAY -->
  59. <div class="overlay">
  60. <div class="overlay-color"></div>
  61. </div>
  62.  
  63. After - section-slideshow-background.html:
  64. <!-- OVERLAY -->
  65. <div class="overlay">
  66. <div class="overlay-color"></div>
  67. <div class="overlay-image"></div>
  68. </div>
  69.  
  70.  
  71. 4. Open main.js and find this code "function initPageBackground() {". Replace code:
  72.  
  73. Before:
  74. function initPageBackground() {
  75. [...]
  76. [...]
  77. [...]
  78. }
  79.  
  80. After:
  81. /*--- Code Start ---*/
  82. function initPageBackground() {
  83.  
  84. if($('body').hasClass('image-background')) { // IMAGE BACKGROUND
  85.  
  86. $('body').vegas({
  87. delay: 0,
  88. slides: [
  89. { src: "demo/bg-4.jpg" }
  90. ]
  91. });
  92.  
  93. } else if( $('body').hasClass('slide-background') ) { // SLIDESHOW BACKGROUND
  94.  
  95. $('body').vegas({
  96. delay: 5000,
  97. slides: [
  98. { src: "demo/bg-4.jpg" },
  99. { src: "demo/bg-5.jpg" },
  100. { src: "demo/bg-6.jpg" }
  101. ],
  102. timer: false
  103. });
  104.  
  105. } else if( $('body').hasClass('kenburns-background') ) { // Kenburns BACKGROUND
  106.  
  107. $('body').vegas({
  108. delay: 5000,
  109. slides: [
  110. { src: "demo/bg-4.jpg" },
  111. { src: "demo/bg-5.jpg" },
  112. { src: "demo/bg-6.jpg" }
  113. ],
  114. animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ],
  115. timer: false
  116. });
  117.  
  118. } else if($('body').hasClass('section-background')) { // SECTION BACKGROUND
  119.  
  120. $('.home .overlay-image').vegas({
  121. delay: 0,
  122. slides: [
  123. { src: "demo/bg-7.jpg" }
  124. ]
  125. });
  126.  
  127. $('.about .overlay-image').vegas({
  128. delay: 0,
  129. slides: [
  130. { src: "demo/bg-2.jpg" }
  131. ]
  132. });
  133.  
  134. $('.contact .overlay-image').vegas({
  135. delay: 0,
  136. slides: [
  137. { src: "demo/bg-3.jpg" }
  138. ]
  139. });
  140.  
  141. $('.slideshow-1 .overlay-image').vegas({
  142. delay: 3000,
  143. slides: [
  144. { src: "demo/bg-4.jpg" },
  145. { src: "demo/bg-5.jpg" },
  146. { src: "demo/bg-6.jpg" }
  147. ],
  148. timer: false
  149. });
  150.  
  151. } else if($('body').hasClass('youtube-background')) { // YOUTUBE VIDEO BACKGROUND
  152. if($('body').hasClass('mobile')) {
  153.  
  154. // Default background on mobile devices
  155. $('body').vegas({
  156. delay: 0,
  157. slides: [
  158. { src: "demo/video/video.jpg" }
  159. ]
  160. });
  161.  
  162. } else {
  163. $(".player").each(function() {
  164. $(".player").mb_YTPlayer();
  165. });
  166. }
  167. } else if($('body').hasClass('youtube-list-background')) { // YOUTUBE LIST VIDEOS BACKGROUND
  168. if($('body').hasClass('mobile')) {
  169.  
  170. // Default background on mobile devices
  171. $('body').vegas({
  172. delay: 0,
  173. slides: [
  174. { src: "demo/video/video.jpg" }
  175. ]
  176. });
  177.  
  178. } else {
  179.  
  180. var videos = [
  181. {videoURL: "0pXYp72dwl0",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true},
  182. {videoURL: "9d8wWcJLnFI",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:false},
  183. {videoURL: "nam90gorcPs",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true}
  184. ];
  185.  
  186. $(".player").YTPlaylist(videos, true);
  187.  
  188. }
  189. } else if($('body').hasClass('mobile')) { // MOBILE BACKGROUND - Image background instead of video on mobile devices
  190. if($('body').hasClass('video-background')) {
  191.  
  192. // Default background on mobile devices
  193. $("body").backstretch([
  194. "demo/video/video.jpg"
  195. ]);
  196.  
  197. }
  198. }
  199.  
  200. }
  201. /*--- Code End ---*/
  202.  
  203.  
  204. 5. Add your image url in "src".
Advertisement
Add Comment
Please, Sign In to add comment