Explanations for visitors needed

Hi guys. One more time I am faced with the harsh reality of difference between us as site owners and developers and them as visitors (ie clients). I've got a phonecall from friend who told me that my site doesn't work. Upon asking I figured out that everything does work, they just don't understand this new design trend, so they see big picture, don't see the menu icon (because this thread https://www.gavick.com/forums/quark/header-space-on-secondary-pages-44186 still haven't been solved), but even if they will see it, not sure they will understand it, and animated mouse icon they are trying to click instead of wheeling the mouse. So, they click mouse icon trying to get into the site, nothing happens and they think it doesn't work! I realize, this is a friend, that's why they called. How many will never call, will just close the page and move on? So, we are losing clients, on the other hand I do like the design so much...
I remember when you first moved to this style of design, when I'd come to your demo page, there was some script that would shadow the page and would guide me to see where did the menu now go and what should I do with this mouse icon. Is there any way to get that working on our sites? So we localise it and help people upgrade their mindset of what a site is to the contemporary trends?
Thanks.

Hi

You always got the most interesting tasks for me Unfortunately I do not remember how it looked like. I see dozens of websites everyday so it's not possible to remember. Please try to explain, or better show me what You have in mind and I'll try to help.

You always got the most interesting tasks for me

Thanks!

Please try to explain, or better show me what You have in mind and I'll try to help.

Here's the screen of that overlay from your demo on Writer template: https://yadi.sk/i/5IFiYuKMfFbJF
I think I've seen one like that on Quark explaning the mouse icon too. It's a script that will show up only the first time you come to the site in this particular computer or new browser...

Hi

I could not find it for Quark, but the example from writer template is simply an image in overlay. So You will need to add this to /layout/default.php (before </body>).

Code: Select all

<div id="tip-overlay"></div>


Than CSS to override.css:

Code: Select all

#tip-overlay {
    background: url("/joomla25/writer/templates/gk_writer/images/overlay-img.png") no-repeat scroll 100px center rgba(0, 0, 0, 0.75);
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 4;
}


but I do not have an access to JS and it would require some cookie management to deal with closing it. Something like:

Code: Select all

   <script type="text/javascript" src="jquery.cookie.js" charset="utf-8"></script>
   <script type="text/javascript">(function($) {$(document).ready(function() {
   if(!$.cookie('tipoverlay')) {
                $('#tip-overlay').click(function(){
                        $.cookie('tipoverlay',1);
                });
        } else {
                $('#tip-overlay').remove();
        }
   });})(jQuery)</script>


may not be accurate since I'm mostly guessing.

may not be accurate since I'm mostly guessing.

Thank you, will give it a try next week (traveling at the moment).

Hi

No problem, just let me know if it worked.

Hi

No problem, just let me know if it worked.

I've taken the same file from Writer, changed the direction of arrow and description without changing the file size. Put everything like you've said (without JS - have no idea how to work with it yet), and here's what I get: https://yadi.sk/i/gbdcHOFDfgkcJ

I've tried to play around with parameters, and with this code:

Code: Select all

#tip-overlay {
  background: url("http://v-boge.org/templates/gk_quark/images/overlay-img.png") no-repeat scroll 100px center rgba(0, 0, 0, 0.75);
  cursor: pointer;
  height: 37%;
  left: 45%;
  opacity: 1;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 4;
}

I get arrow to look at the place I need it to, but then overlay is not for the whole screen... https://yadi.sk/i/m3n01mDEfgkjn

I am not that big on coding, as you can see. What do I need to add in the code you've given me to place an arrow where it should've be while the whole screen remains overlayed?
Thanks for your patience!

Hi

This screenshot website is not working. I get error 404. Please send me an url and access to ftp. I'll make it for You so it will be faster.

Hi

This screenshot website is not working. I get error 404. Please send me an url and access to ftp. I'll make it for You so it will be faster.

Oh, sorry, I was cleaning up on the web-drive and cleaned out too much... Sorry. Sending you PM with access info.

Hi

Can You please send me an access to actual FTP ? It's hard to do this already since I need to jump between files, so it would be much easier if I'll be able to use my tools.

Hi

Ok. It's done. To make it simplier I've put all the code to /layout/default.php

Code: Select all

   <!-- ADDED BY [email protected] -->
   <div id="tip-overlay"></div>
   <style type="text/css">
      #tip-overlay {
      background: url("overlay-img.png") no-repeat scroll 87% 30px rgba(0, 0, 0, 0.75);
      cursor: pointer;
      height: 100%;
      left: 0;
      opacity: 1;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 99999;
      }
   </style>

   <script type="text/javascript" src="jquery.cookie.js" charset="utf-8"></script>
   <script type="text/javascript">(function($) {$(document).ready(function() {
      if(!$.cookie('tipoverlay')) {
                   $('#tip-overlay').click(function(){
                      $('#tip-overlay').remove();
                           $.cookie('tipoverlay',1,{ expires: 7, path: '/' });
                   });
           } else {
                   $('#tip-overlay').remove();
           }
   });})(jQuery)</script>
   <!-- END -->


Ok. It's done. To make it simplier I've put all the code to /layout/default.php

WOW! Thank you SO much for doing this for me! That's SO GREAT! Thank you!

Hi

No problem. Sorry it took so long.