josweb supports this item


44 comments found.

Hello Josweb,

In the features section you write that ART23 is using “Media Boxes – $16”.

I am a bit confused, is it “Media Boxes Portfolio – Responsive Grid” which is listed at $18 or “Ultimate Grid Responsive Gallery” which you refer to in another post?

By the way, I’m the guy (from the Flati comments) that needs self -hosted HTML5 video in a lightbox and the author of the “Media Boxes Portfolio – Responsive Grid” has confirmed that it’s possible with some minor tweaks, so I hope you are using it here.

Regards, BCMorris

Actually, I stayed up all night and I have just finished the update. :) It’s now in the review queue.

New version has now been approved and ready to go. :)

You are awesome, and I am your new customer. Just bought it and looking forward to setting it up. Thanks :-)

Hello, I have 2 questions regarding the Single Image (index3) page.

1) I wanted to change the height of the Slider so I added “height:700px;” to the (theme.css > FLEXSLIDER – SINGLE IMAGE – INDEX 3>.single_image) area. Its seems to work, is this the correct way.

2) Do I just use s with padding to control the placement of the intro text? They are a not centered after I added an arrow icon and button to the home slider .

Thanks for any replies, Brian

Sorry I should be more specific, I was meaning the top to bottom center and using padding in the divs get the job done…thanks.

Yes you can use padding, it’s difficult for me to say without seeing it.

It’s fixed and working. Thanks! but now a new problem (see new tread)

Okay…I am real close to finishing and uploading the site but there is a issue with some custom content displaying incorrectly in IE 11.

I have a Unity Web game that I would like to embed into a template page, with just the navigation header and the footer. I got it working perfectly in Firefox, but in IE the content is displaying in front of the navigation header. Here is the code with the content embedded into a template page and also some links to to how the standard setup works. Sorry I’m not sure where the problem is so I pasted the whole page.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>bcmorris_Unity_Sickness</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!-- Google Fonts --> <link href=',400,700' rel='stylesheet' type='text/css'> <link href=',500,600,700,800,900' rel='stylesheet' type='text/css'> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/font-awesome.min.css" rel="stylesheet"> <link href="css/hover.css" rel="stylesheet" type="text/css"/> <link href="css/theme.css" rel="stylesheet"> <link href="css/colour.css" rel="stylesheet"> <!--[if lt IE 9]> <script src=""></script> <![endif]--> <script src="js/modernizr.custom.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Unity Web Player | The Sickness That is You Build 15</title> <script type='text/javascript' src='CubeClicker_1024x768/jquery.min.js'></script> <script type="text/javascript"> <!-- var unityObjectUrl = "CubeClicker_1024x768/UnityObject2.js"; if (document.location.protocol == 'https:') unityObjectUrl = unityObjectUrl.replace("http://", "https://ssl-"); document.write('<script type="text\/javascript" src="' + unityObjectUrl + '"><\/script>'); --> </script> <script type="text/javascript"> <!-- var config = { width: 1024, height: 768, params: { enableDebugging:"0" } }; var u = new UnityObject2(config); jQuery(function() { var $missingScreen = jQuery("#unityPlayer").find(".missing"); var $brokenScreen = jQuery("#unityPlayer").find(".broken"); $missingScreen.hide(); $brokenScreen.hide(); u.observeProgress(function (progress) { switch(progress.pluginStatus) { case "broken": $brokenScreen.find("a").click(function (e) { e.stopPropagation(); e.preventDefault(); u.installPlugin(); return false; }); $; break; case "missing": $missingScreen.find("a").click(function (e) { e.stopPropagation(); e.preventDefault(); u.installPlugin(); return false; }); $; break; case "installed": $missingScreen.remove(); break; case "first": break; } }); u.initPlugin(jQuery("#unityPlayer")[0], "CubeClicker_1024x768/CubeClicker_1024x768.unity3d"); }); --> </script> <style type="text/css"> <!-- body { font-family: Helvetica, Verdana, Arial, sans-serif; background-color: black; color: white; text-align: center; } a:link, a:visited { color: #bfbfbf; } a:active, a:hover { color: #bfbfbf; } p.header { font-size: small; } p.header span { font-weight: bold; } p.footer { font-size: x-small; } div.content { margin: auto; width: 1024px; } div.broken, div.missing { margin: auto; position: relative; top: 50%; width: 193px; } div.broken a, div.missing a { height: 63px; position: relative; top: -31px; } div.broken img, div.missing img { border-width: 0px; } div.broken { display: none; } div#unityPlayer { cursor: default; height: 768px; width: 1024px; } --> </style> </head> <header> <!-- Navbar --> <div class="navbar navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <!-- COLLAPSE BUTTON --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <i class="fa fa-bars fa-2x" /> </button> <!-- LOGO --> <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="" /></a> </div> <div class="navbar-collapse collapse"> <!-- MENU --> <ul class="nav navbar-nav navbar-right"> <li> <a href="index.html">Home</a> </li> <li><a href="#">About</a> <ul class="drop-down"> <li><a href="about.html">About</a></li> <li><a href="Skills.html">Skills</a></li> <li><a href="Education.html">Education</a></li> <li><a href="accolades.html">Accolades</a></li> </ul> </li> <li><a class="active" href="#">Portfolio</a> <ul class="drop-down"> <li><a href="BrianMorris_Portfolio1.html">Main Gallery</a></li> <li><a href="FineArtGallery_4columns_2.html">FineArt Gallery</a></li> </ul> </li> <li><a class="active" href="#">Tutorials</a> <ul class="drop-down"> <li><a href="Tutorials_case_study.html">Page 1</a></li> </ul> </li> <li class="pulse-grow"> <a href="contact.html">Contact</a> </li> </ul> </div> </div> </div> </header> <!-- //HEADER --> <div class="container pad15" /> <div class="col-md-12"> <div class="content"> <div id="unityPlayer"> <div class="missing"> <a href="" title="Unity Web Player. Install now!"> <img alt="Unity Web Player. Install now!" src="" width="193" height="63" /> </a> </div> </div> </div> </div> <div class="col-md-12 pad5"> <h2>CubeClicker_1024x768</h2> </div> <div class="col-md-12"> <h4>JUST A TEST</h4> </div> <div class="container pad15" /> <!--//page--> <!-- FOOTER SECTION --> <section id="footer" class="ss-style-invertedrounded"> <div class="container"> <div class="col-lg-12"> <p class="copyright pad1"> Artwork © 2014 Brian C. Morris or noted otherwise - <a href="#"><i class="fa fa-facebook marg-left5 marg-right5" /></a> <a href="#"><i class="fa fa-twitter marg-right5" /></a> <a href="#"><i class="fa fa-dribbble marg-right5" /></a> <a href="#"><i class="fa fa-linkedin marg-right5" /></a> - © 2014 art23 Template by <a href="">Spiral Pixel</a> <!-- up to top --> <a href="#"><i class="go-top fa fa-angle-double-up" /></a> </p> </div> </div> </section> <!-- //END --> <!-- SCRIPTS --> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <!--[if lte IE 8]> <script src="js/respond.min.js"></script> <![endif]--> <script src="js/retina.js"></script> <script type="text/javascript" src="js/parallax.js"></script> <script type="text/javascript" src="js/scripts.js"></script> <script type="text/javascript" src="js/jquery.appear.js"></script> <script src="js/jquery.nivo.slider.pack.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { $('.nivoSlider').nivoSlider({ effect: 'fade', animSpeed: 500, pauseTime: 3000, directionNav: true, controlNav: false, pauseOnHover: true }); }); //]]> </script>

Here is link to a example game embedded in a generic html page.

how it should work

The problem in IE

Any help would be appreciated, Brian

Hummm. can you try add a z-index to the navbar in your css e.g .navbar { z-index:10!important; ....... keep increasing the number to test. It’s quite a problematic problem as people will have to download the plugin then allow it on their browsers. I’m not sure how many people will want to do this.

I tried adding and increasing the z-index value without any results. I put it in the them css file in the .navbar area, correct?

I did read that IE has a “z-index:0 issue” and you should start 1 or -1” but I don’t know where I would add this or if it’s at all relevant.<></>

BTW…I’m not worried about people not installing the plug-in, most of the people that visit my website know about Unity and will already have it installed…also this particular Unity content is not “responsive” or mobile friendly at the moment but I;m not concerned about it for now.

p.s. Jo, you have been really helpful so far, and I thank you. Plus I’m very happy with the template in general. Where do I leave my positive rating or review?

We were trying to make the navbar appear over the top of the plugin.. so the css I gave you may have helped. If not try and add a negative z-index to the player’s css.

You can leave a star rating in your downloads page. Many thanks indeed.

Hello, I didn’t find in the documentation how to add galleries to posts without Visual Composer or Revolution Slider. Into the post I selected Gallery Format and upload the images but they don’t show up. Missing something? Can you help? Thank you

I think you may be looking for the Wordress version.