Tooy.it на шаблоне Protostar

​

Проект на этапе сдачи, очень нужна Ваша критика, буду благодарен всем откликам. Да кстати на главной странице реализован слайдер YJ Sphere Slider v1.0.5 http://cmsheaven.org/extensions/joomla/yj-sphere-slider/ Он оказался через чур простым. Да же не нашел как поставить ссылку на картинку, но зато есть возможность править шаблон слайдера

Код:

<?php
defined('_JEXEC') or die('Restricted access');
$maxSide  = (count($slides ) - 1 ) /2;
$wrongVisible = '';
if($visible > $maxSide){
  $wrongVisible = JText::_('VISIBLEMSG');
}
?>
<!-- http://www.Youjoomla.com  YJ Sphere Slider Module for Joomla! starts here -->
<div id="SphereSliderHolder<?php echo $modid ?>" class="SphereSliderHolder">
  <div id="SphereSlider<?php echo $modid ?>" class="SphereSlider">
    <?php echo $wrongVisible;foreach ($slides as $key=> $slide):

       if($key == 0){
         $elactive =' sphereselected';
       }else{
         $elactive =' spherehidden';
       }

    ?>
    <div class="sphereslide">
      <div class="sphere<?php echo $elactive?>">
        <div class="roundimg">
          <div class="roundimgin">
            <img src="<?php echo JURI::base().$slide['image'];?>" alt=""  />
          </div>
        </div>
        <span class="ititle"><?php echo $slide['title'] ?></span>
        <div class="desc"><?php echo $slide['intro'] ?></div>
      </div>
    </div>
    <?php endforeach;?>
  </div>
  <div class="clonedesc">
    <h2 class="title"><?php echo $slides[0]['title'] ?></h2>
    <div class="intro"><?php echo $slides[0]['intro'] ?></div>
  </div>
  <a href="#" class="prev spherenavs">
  </a>
  <a href="#" class="next spherenavs">
  </a>
</div>

кто знает как это реализовать?
и еще текст меню в положении active подсвечивается красным, но вот на сером фоне красные буквы не очень хорошо читаются, а заказчик просит чтобы были именно красные, может как то подсветить?, Пробовал и text-shadow только все не то, вообщем КРИТИКУЙТЕ ОТ ДУШИ
Кому интересно:
1. Адаптивная сетка которая на фоне реализована с помощью стиля:

Код:

  height: 100%;
  padding: 20px;
  background: linear-gradient( #cacaca, transparent 1px ), linear-gradient( 90deg, #cacaca, transparent 1px );
  background-size: 40px 40px;
  background-position: center center;

2. На странице продукции всплывающие окна реализованы с помощью modals от ноунамбера
3. Выявление цвета серой картинки при наведении на нее курсора:

Код:

.grayscale{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  /* For Webkit browsers */
    filter: gray;  /* For IE 6 - 9 */
    -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
}

.grayscale:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
}

на счет месседжа спасибо огромное, но я на хроме его почему то не видел, данный месседж появлялсятолько в админке, как выяснилось это у хостера проблемы с simplexml, обещает исправить.
и за остальные косячки спасибо огромное!

На счет того как хотел видеть сайт заказчик скидываю картинки которые он же и подготовил, тут как раз видно что страницу с продуктами он хотел именно такой какой я ее сделал сейчас, и мне она как то тоже не нравится, она в действительности выбивается с общего стиля сайта, а на счет остального , жду предложений что именно подправить , а то как то критика без пользы получилась, на картинках можно видеть что не я был автором данного дизайна а лишь исполнителем )))

nihaha еще раз тебе большое спасибо за подсказки и конструктивную критику, я бы даже сказал за аудит сайта )))