josweb supports this item


51 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.

Hey firstly great template! I am struggling with adding my logo though it’s considerably longer than the art23 one, it’s fine at large screen and mobile but in the middle it moves to a higher layer and doesn’t look right.

I’ve been messing around with the padding and the media box size but i cant get it right and dont really know what im doing haha.

I appologise for my probably stupidity


I’ve tried but i don’t really know what i’m doing

since its the middle size i assumed its something to do with after this

”@media screen and (min-width: 768px) and (max-width: 991px) {“

i tried setting the width and messing with the padding etc here but it always stayed on a higher layer than the navigation menu, don’t understand why even if there looks like there is space for it to drop down

Do you have it online for me to see?

hey my website is online now:


when viewing on tablet or ipad the logo and navigation drop into 2 lines and cover part of the header and wording.

Hi, I am using 3 column with more images, as we use images loaded it takes more time to load. Is it possible to remove isotope or else reveal images one by one?? Please suggest the best way to choose.

Have you optimised your images?

Yes done. I thing is isotope due to image loaded takes time before it shows

currently the “our portfolio” link in the sliding banner (also in the demo @ doesn’t work in mobile browsers. tested with android chrome and ios safari.

revolution slider: touchenabled:”on” => touchenabled:”off” solved the problem

Hi, I am having problems with the viewing of my website on ipad and tablet sizes. The navigation/logo goes into 2 lines and blocks part of the header.

Is there any easy solution? I tried playing with the padding/margin but couldnt get it to work right.

my website is online at advimate(dot)com


Hi, try something like this @media screen and (min-width: 768px) and (max-width: 991px) { .navbar-brand { max-width:120px!important; padding-top:35px; }

perfect you’re a star!

I have purchased art23 html template and busy amending as to client requirements – I am having trouble with the map on the contact page as clients wants it to resize according to device or browser, could you assist? Thank you

Dear josweb, We’ve been proud users of your art23 template and our limited knowledge we’ve been trying to use “index2” as the main index and Include a gallery “4columns_2” just under the top strip with cross-fading image slider. It doesn’t work and we are not sure why. We’ve added the alternative header and footer and they work perfectly. Could you please help us understand?

Many thanks, Ana & Carlos

Hi, we’ve managed to use “4columns_2” as main index, and incorporate slider. Everything is working ok. Now there is another little thing we don’t know how to fix. The alt footer appears white, not grey. What should we look for in order to fix it? Thanks.

Hi, you should be able to alter the colour in your css.. If you have it online I can take a look for you if you can’t find it.

7fd993a6-869e-449e-8172-cfbc576dfa88 – 26 Nov 2015 Just uploaded my site and have an email form problem. Changed the email in the mail.php file, sent a test email and the form seems to function properly but am not getting the email. Site is hosted on godaddy

Can you try another email to test? Sometimes it’s a server issue, the form is working so I’m really not sure I’m afraid.

I ended up having to write a custom mail.php script. The one included does not work with godaddy. Thanks for the reply.

Thanks for letting me know. :)