Hello,

I am using this http://ninjaforge.com/joomla15/index...lay&Itemid=123 as reference to replicate the same design.

I have made this which looks 80% the same way expect the blend look of corners and shadows on sides of the box.

My Code is :

<style type="text/css">
.nm-left { text-align:left; vertical-align:text-top; }
.nm-left .nm-video, .nm-right .nm-video-reverse, .nm-left .nm-avatar,  .nm-left .nm-avatar-wrapper, .nm-left span.nm-button, .nm-left #user-form input#submit { float:left; }
.nm-right { text-align:right; vertical-align:text-top; }
.nm-right .nm-video, .nm-left .nm-video-reverse, .nm-right .nm-avatar, .nm-right .nm-avatar-wrapper, .nm-right span.nm-button, .nm-right #user-form input#submit { float:right; }
.nm-wrapper { clear:both; font-size:14px; line-height:21px; margin:20px 0; padding:0px; }
.nm-wrapper div { background-position:99% 10px; background-repeat:no-repeat; margin:0; padding:0; }
.nm-wrapper div div { }
.nm-wrapper div div div { overflow:hidden; }
#ninjamonials .nm-wrapper div div div div { background:transparent; padding:20px;}
#ninjamonials .nm-wrapper div div div div div { padding:0; }
blockquote.nm-summary div, blockquote.nm-testimonial div, blockquote.nm-summary, blockquote.nm-testimonial, blockquote.nm-summary p, blockquote.nm-testimonial p { background:transparent; border:none; padding:0; margin:0; text-decoration:none; font-style:normal; }
span.nm-button, #user-form input#submit { margin:5px; }
#user-form { background-position:left bottom; background-repeat:repeat-x; clear:both; font-size:14px; line-height:21px; margin-top:20px; padding:5px; }
.nm-testimonial, .nm-summary, .nm-author { padding-left:140px }
.nm-summary { font-weight:bold; }
.nm-author { display:block; font-size:12px; }
.nm-name { font-weight:bold; padding-right:5px; }
.nm-video, div.nm-video-reverse { margin:10px !important; }
.nm-audio, .nm-author { padding:5px !important; }
.nm-audio { display:block; }
.nm-name { font-style:italic; }
/* Oceanic Avatar-Specific CSS */
.nm-avatar { }
.nm-avatar img { background-color:#F7F7F7; border:1px solid #DBDBDB; margin:10px; padding:5px; }
/* Oceanic Module-Specific CSS */
.nm-module { overflow:hidden; margin: 5px; padding:4px!important; }
.nm-module div.nm-avatar img { }
.nm-module div.nm-avatar { }
/* Grey Style */
.nm-right.nm-oceanic-grey.nm-module, .nm-right.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-grey.nm-module, .nm-left.nm-oceanic-grey .nm-module { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat -10px -10px; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-right.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_tl.png) no-repeat; color:#666; }
.nm-left.nm-oceanic-grey .nm-wrapper { background:#EFEFEF url(oceanic_grey_nq.png) no-repeat; color:#666; }
.nm-oceanic-grey .nm-wrapper div { background:url(oceanic_grey_tr.png) no-repeat 100% 0; }
.nm-oceanic-grey .nm-wrapper div div { background:url(oceanic_grey_bl.png) no-repeat 0 100%; }
.nm-oceanic-grey .nm-wrapper div div div { background:url(./images/oceanic_grey_br.png) no-repeat 100% 100%; }
.nm-oceanic-grey #user-form { background-color:#EFEFEF; border:1px solid #999; -moz-border-radius:5px; -webkit-border-radius:5px; }
.nm-left.nm-oceanic-grey .nm-avatar-wrapper { margin:0 10px 10px 0; min-height:70px; min-width:90px; background: url(./images/oceanic_grey_quote.png) no-repeat 10px 10px !important; }

</style>                                   
<div id="ninjamonials" class="nm-oceanic-grey nm-left" style="margin-left:10%; margin-right:10%;">
          <!--bof nm-wrapper -->
  <div class="nm-wrapper">
    <div>
      <div>
        <div>
                              <div class="nm-content">
            <div class="nm-avatar-wrapper">
                          </div>
                                                <blockquote 
class="nm-testimonial">
              <p>This is a testimonial test. This is a testimonial test.   This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. </p>
              <p>This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. This is a testimonial   test. This is a testimonial test. </p>
                                </blockquote>
                                    <div class="nm-author">
                            <span class="nm-name">Name</span>
               (Website<span class="nm-title"></span>
               ~               <span class="nm-auth-url"><a 
href="http://www.google.com/">www.google.com</a></span>
              ,               <span class="nm-location">Mine</span>
               )                           </div>
            <!--eof nm-author --> 
          </div>
          <!--eof nm-content -->
                    <!--eof wrapper --> 
        </div>
      </div>
    </div>
  </div>
  <!--eof foreach -->
    <!--bof nm-wrapper -->
  <div class="nm-wrapper">
    <div>
      <div>
        <div>
                              <div class="nm-content">
            <div class="nm-avatar-wrapper">
                            <!--<div class="nm-avatar">
                <img src="./images/oceanic_grey_quote.png" alt="" height="100">
              </div>  -->
                          </div>
                                                <blockquote 
class="nm-testimonial">
              <p>This is a testimonial test. This is a testimonial test.   This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. </p>
              <p>This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. This is a testimonial   test. This is a testimonial test. This is a testimonial test. This is a testimonial test.   This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. </p>
              
                                </blockquote>
                                    <div class="nm-author"><span class="nm-name">Name</span> (Website<span class="nm-title"></span> ~ <span class="nm-auth-url"><a 
href="http://www.google.com/">www.google.com</a></span> , <span class="nm-location">Mine</span> ) </div>
            <!--eof nm-author --> 
          </div>
          <!--eof nm-content -->
                    <!--eof wrapper --> 
        </div>
      </div>
    </div>
  </div>
  <!--eof foreach -->
    <!--bof nm-wrapper -->
  <div class="nm-wrapper">
    <div>
      <div>
        <div>
                              <div class="nm-content">
            <div class="nm-avatar-wrapper">
                            <!--<div class="nm-avatar">
                <img name="Christopher Cody" 
src="index.php_files/20091202033758_face3.jpg" alt="" height="100">     
         </div> -->
                          </div>
                                                <blockquote 
class="nm-testimonial">
              <p>This is a testimonial test. This is a testimonial test.   This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. </p>
              <p>This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. This is a testimonial   test. This is a testimonial test. This is a testimonial test. This is a testimonial test.   This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. </p>
                                </blockquote>
                                    <div class="nm-author"><span class="nm-name">Name</span> (Website<span class="nm-title"></span> ~ <span class="nm-auth-url"><a 
href="http://www.google.com/">www.google.com</a></span> , <span class="nm-location">Mine</span> ) </div>
            <!--eof nm-author --> 
          </div>
          <!--eof nm-content -->
                    <!--eof wrapper --> 
        </div>
      </div>
    </div>
  </div>
  <!--eof foreach -->
    <!--bof nm-wrapper -->
  <div class="nm-wrapper">
    <div>
      <div>
        <div>
                              <div class="nm-content">
            <div class="nm-avatar-wrapper">
                         
                          </div>
                                                <blockquote 
class="nm-testimonial">
              <p>This is a testimonial test. This is a testimonial test.   This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. </p>
              <p>This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. This is a testimonial   test. This is a testimonial test. </p>
                                </blockquote>
                                    <div class="nm-author"><span class="nm-name">Name</span> (Website<span class="nm-title"></span> ~ <span class="nm-auth-url"><a 
href="http://www.google.com/">www.google.com</a></span> , <span class="nm-location">Mine</span> ) </div>
            <!--eof nm-author --> 
          </div>
          <!--eof nm-content -->
                    <!--eof wrapper --> 
        </div>
      </div>
    </div>
  </div>
  <!--eof foreach -->
    <!--bof nm-wrapper -->
  <div class="nm-wrapper">
    <div>
      <div>
        <div>
                              <div class="nm-content">
            <div class="nm-avatar-wrapper">
                          </div>
                                                <blockquote 
class="nm-testimonial">
              <p>This is a testimonial test. This is a testimonial test.   This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. </p>
              <p>This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. This is a testimonial   test. This is a testimonial test. This is a testimonial test. This is a testimonial test.   This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. </p>
              <p>This is a testimonial test. This is a testimonial test. This is a   testimonial test. This is a testimonial test. This is a testimonial   test. This is a testimonial test. </p>
                                </blockquote>
                                    <div class="nm-author"><span class="nm-name">Name</span> (Website<span class="nm-title"></span> ~ <span class="nm-auth-url"><a 
href="http://www.google.com/">www.google.com</a></span> , <span class="nm-location">Mine</span> ) </div>
            <!--eof nm-author --> 
          </div>
          <!--eof nm-content -->
                    <!--eof wrapper --> 
        </div>
      </div>
    </div>
  </div>
  <!--eof foreach -->
    <!--bof nm-wrapper -->
  <div class="nm-wrapper">
    <div>
      <div>
        <div>
                              <div class="nm-content">
            <div class="nm-avatar-wrapper">
                          </div>
                                                <blockquote 
class="nm-testimonial">
              <p>This is a testimonial test. This is a testimonial test.
 This is a testimonial test. This is a testimonial test. This is a 
testimonial test. This is a testimonial test. </p>
<p>This is a testimonial test. This is a testimonial test. This is a 
testimonial test. This is a testimonial test. This is a testimonial 
test. This is a testimonial test. <br>
</p>
            </blockquote>
                                    <div class="nm-author"><span class="nm-name">Name</span> (Website<span class="nm-title"></span> ~ <span class="nm-auth-url"><a 
href="http://www.google.com/">www.google.com</a></span> , <span class="nm-location">Mine</span> ) </div></div></div></div></div></div></div>

I see the result as :



As you can see, The corners lack the blend and sides lack the shade. One corner has that blend and shadow as it is an image. But there are no images used in the rest of the part. It is just CSS. I have downloaded the same css and still it cannot produce same look and feel.

Please help me achieve this results.

Thanks in advance!

Hello, Any help is appreciated. I am really not sure on how I can do this. Some one please take a couple of minutes of your valuable time and help me out with this.

Thanks!

http://www.css3.info/preview/box-shadow/

Hello, Thanks. So the code is :

box-shadow: -10px -10px 0px #000;
border-radius: 5px;
padding: 5px 5px 5px 15px;

But in my code I gave in Post 1, Where exactly do I add this? That is my problem as I tried to add this at first div in its style tag, etc,. but it did not work.

Please help me know on where to add that or you can edit that code and give me a copy.

Thanks!

Not all browsers support those CSS3 properties, you'll need the -moz and -webkit to make them work in mozilla and webkit-based browsers. It won't work in IE at all -- yet.

Oh! That is bad. But one at http://ninjaforge.com/joomla15/index...lay&Itemid=123 works every where. I think they used something different. Can you please please find and tell me how that is possible for them. I saved their page and used the same css. But they get that and I am not getting the same effect.

I am trying to learn to get that, but I am not sure how to get the same effect as theirs. We both use same code I imagine. But how come only they get that?

Hello, I found the solution. I just missed to copy some images from the website. I got it now. Thanks!