Mosaic Jquery плагин Wordpress темно-серый текст

Question

Я пытаюсь заставить плагин JQuery мозаики работать в WordPress, до сих пор мне приходилось делать это, используя iframes, что немного болезненно.

Проблема при использовании в WordPress заключается в том, что текст очень темно-серый, а не белый.

Кажется, что файлы css и js загружаются, и я не вижу ошибок в консоли элемента chrome inspect.

http://rise-sandbox1.co.uk/social-test-for-tudor/

CSS используется

 <style type="text/css">
.clearfix: after; {
 content: " "; /* Older browser do not support empty content */
 visibility: hidden;
 display: block;
 height: 0;
 clear: both;
}
.details{ margin:15px 20px; }   
h6{ font:300 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:160%;         letter-spacing:0.15em; color:#fff; text-shadow:1px 1px 0 rgb(0,0,0); }
p{ font:300 12px 'Lucida Grande', Tahoma, Verdana, sans-serif; color:#aaa; text-    shadow:1px 1px 0 rgb(0,0,0);}
a{ text-decoration:underline; }

.mosaic-block {
float:left;
position:relative;
overflow:hidden;
width:400px;
height:250px;
margin:10px;
background:#111 url(http://rise-sandbox1.co.uk/img/progress.gif) no-repeat center center;
border:1px solid #fff;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

.mosaic-backdrop {
    display:none;
    position:absolute;
    top:0;
    height:100%;
    width:100%;
    background:#111;
}

.mosaic-overlay {
    display:none;
    z-index:5;
    position:absolute;
    width:100%;
    height:100%;
    background:#111;
}
    .bar .mosaic-overlay {
        bottom:-100px;
        height:100px;
        background:url(http://rise-sandbox1.co.uk/img/bg-black.png);
    }
</style>

И JavaScript

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script></script>
    <script type="text/javascript" src="http://rise-sandbox1.co.uk/js/mosaic.1.0.1.js"></script>    
<script type="text/javascript">  
        jQuery(function($){
            $('.bar').mosaic({
                animation   :   'slide'
            });
        });

    </script>

Я использую плагин под названием конкретный CSS / Javascript для сообщений и страниц, чтобы реализовать код, который обычно хорошо работает HTML

<div class="mosaic-block bar">
<a href="http://www.nonsensesociety.com/2011/01/sloppy-art/" target="_blank" class="mosaic-overlay">
<div class="details">
<h6>Sloppy Art - A Mess of Inspiration</h4>
<p>via the Nonsense Society (image credit: Florian</p>
</div>
</a>
<div class="mosaic-backdrop"> <img src="http://rise-sandbox1.co.uk/images/.jpg"/></div>
</div>      
<div class="clearfix"></div>
</div>

Надеюсь, что кто-то может помочь, это сводит меня с ума

Answer 1

Хорошо все исправлено

Окончательный код, который работает

<div class="mosaic-block bar">
<div class="mosaic-overlay">
<div class="details">
<a href="http://rise-sandbox1.co.uk/collection/">
<h6>header text</h4>
<p>View our latest Cashmere range of Baby Blankets</p></a>
</div>
</div>
<div class="mosaic-backdrop">
<img src="http://rise-sandbox1.co.uk/images/picture.jpg">
</div>      
</div>

и CSS с JavaScript

<style type="text/css">
.mosaic-overlay .details{ margin:15px 20px; }   
h6{ font:300 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:160%;     letter-spacing:0.15em; color:#fff; text-shadow:1px 1px 0 rgb(0,0,0); }
p{ font:300 12px 'Lucida Grande', Tahoma, Verdana, sans-serif; color:#fff; text-   shadow:1px 1px 0 rgb(0,0,0);}
a{ 
color: #fff;
text-decoration:none; }

.mosaic-block {
float:left;
position:relative;
overflow:hidden;
width:460px;
height:300px;
margin:10px;
background:#111 url(http://rise-sandbox1.co.uk/img/progress.gif) no-repeat center    center;
border:1px solid #fff;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

.mosaic-backdrop {
    display:none;
    position:absolute;
    top:0;
    height:100%;
    width:100%;
    background:#111;
}

.mosaic-overlay {
    display:none;
    z-index:5;
    position:absolute!important;
    width:100%;
    height:100%;
    background:#111;
}
    .bar .mosaic-overlay {
        bottom:-100px;
        height:100px;
        background:url(http://rise-sandbox1.co.uk/img/bg-black.png);
    }
</style>
    <script type="text/javascript" src="http://rise-sandbox1.co.uk/wp-includes/js/jquery/jquery.js"></script></script>
    <script type="text/javascript" src="http://rise-sandbox1.co.uk/js/mosaic.1.0.1.js"></script>    
<script type="text/javascript">  
 jQuery(function($){
$('.bar').mosaic({
animation   :   'slide'
});
     });

</script>