Drop Shadow

13 posts from 5 voices

• Started 1 year ago by O5
• Latest reply from Dude
• This topic is closed
• This topic is not a support question

Tags:

No tags yet.

1. 

   O5
   Member

   Is it possoble to add drop shadow to portfolio items?

   Posted 1 year ago #
2. 

   Ismael
   Moderator

   Hi!

   Add this line on your custom.css

   #top .slideshow li img {
   box-shadow: 0 0 5px #000;
   }

   Best regards,
   Ismael

   Posted 1 year ago #
3. 

   O5
   Member

   I'm not seeing a drop shadow.

   Posted 1 year ago #
4. 

   Ismael
   Moderator

   Hi!

   Can you give me a link to your portfolio?

   Regards,
   Ismael

   Posted 1 year ago #
5. 

   Ismael
   Moderator

   Hey!

   Or maybe this is a browser issue, try this one.

   #top .slideshow li img {
   box-shadow: 0 0 5px #000;
   -webkit-box-shadow: 0 20px 20px #000;
   -moz-box-shadow: 0 20px 20px #000;
   -o-box-shadow: 0 20px 20px #000;
   }

   Regards,
   Ismael

   Posted 1 year ago #
6. 

   O5
   Member

   I'm using safari but still not getting anything.

   Posted 1 year ago #
7. 

   Devin
   Moderator

   Hey O5,

   Try adding it to the #top .slideshow alone. So the final code will be:
   

   #top .slideshow li{
   box-shadow: 0 0 10px #000;
   -webkit-box-shadow: 0 0 10px #000;
   -moz-box-shadow: 0 0 10px #000;
   -o-box-shadow: 0 0 10px #000;
   }

   Hope that does it for you :)

   Regards,

   Devin

   Posted 1 year ago #
8. 

   O5
   Member

   It works, I see a thin shadow I guess it's a matter of tweaking to get the right effect. Could something like a border be applied?

   Thx

   Posted 1 year ago #
9. 

   Mya
   

   Hi O5,

   Add this to what Devin supplied above:

   border:1px solid #000;

   So your code would look like this:

   #top .slideshow li{
   border: 1px solid #000;
   box-shadow: 0 0 10px #000;
   -webkit-box-shadow: 0 0 10px #000;
   -moz-box-shadow: 0 0 10px #000;
   -o-box-shadow: 0 0 10px #000;
   }

   Note you could change the #000 to any color.

   Regards,
   Mya

   Posted 1 year ago #
10. 

    O5
    Member

    Hello Mya

    This is interesting, I'm seeing a border on the top and left of image. Is there a way to add a complete border all the way around?

    Thank you

    Posted 1 year ago #
11. 

    Mya
    

    Hi 05,

    Actually, the code I gave above is supposed to add a border all the way around. You seeing the border on the top and left makes me wonder if the box-shadow is masking the border on the right and bottom?

    I suggest trying a different color or using a thicker border to see if that's the case.

    Regards,
    Mya

    Posted 1 year ago #
12. 

    O5
    Member

    Could any of the other quick CSS code below be conflicting

    .title_container {
    display: none
    }
    #top .price, #top .price span, #top del, #top ins {
    display: inline;
    text-decoration: none;
    font-size: 12px;
    line-height: 18px;
    font-weight: bold;
    }
    #top.archive .price span{
    display:none;
    }
    #top.page-id-19 .price span {
    display: none;
    }
    .products .price_container {
    display:none;
    }

    #top .price {
    color: #000000;
    }
    #top #wrap_all ins {
    color: #000000;
    }
    #top #wrap_all del{
    color: #000000;
    }
    .tax-product_cat .sidebar{display:none;}
    .tax-product_cat .template-shop.content{width:100%; padding-right:0;}
    .news-headline {
    display: none;
    }
    #top .social_bookmarks li.rss {
    display: none;
    }
    .shop_table th.product-name, .shop_table th.product-quantity, .shop_table th.product-total {
    background: none repeat scroll 0% 0% #d8d8d8 ! important;
    color: #ffffff ! important;
    }

    .shop_table tr.cart-subtotal th, .shop_table tr.shipping th, .shop_table tr.total th, .shop_table th strong {
    background: none repeat scroll 0% 0% #D8d8d8! important;
    color:#fff !important;
    }
    .shop_table th.product-name, .shop_table th.product-quantity, .shop_table th.product-total {
    background: #d8d8d8 !important;
    color: #999999 !important;
    }
    div .info {
    background: url("../images/icons/info.png") no-repeat scroll 9px center #000000;
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 0 1px #FFFFCC inset;
    color: #FFFFFF;
    }
    #top div.woocommerce_message {
    background: #CCC;
    }
    #top #wrap_all div .thumbnail_container .button:hover {
    color: #FFFFFF;
    }
    #top div.woocommerce_message {
    background-color: #000000;
    background-image: url("../images/icons/tick.png");
    border-color: #000000;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 0 0 1px #FFFFFF inset;
    color: #FFFFFF;
    }
    td.actions .coupon {
    display:none;
    }
    .cart > .button.alt {
    background-color: red;
    color: #EEE;
    }
    #top div div.woocommerce_error a.button, #top div div.woocommerce_message a.button {
    background: none repeat scroll 0 0 transparent;
    float: right;
    left: 8px;
    margin-top: 0;
    position: relative;
    top: -6px;
    }
    #top div.woocommerce_error a.button, #top div.woocommerce_message a.button {
    color: #FFFFFF;
    }
    div .container button.button{
    background-color: #101010;
    }
    .info_text_header a:hover {
    color: #101010; !important;
    }
    .info_text_header a.cart_dropdown_link:hover {
    color: #101010; !important;
    }
    #top .slideshow li{
    border: 1px solid #cccccc;
    box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    -o-box-shadow: 0 0 10px #000;
    }

    Posted 1 year ago #
13. 

    Dude
    Dude

    Hi!

    Can you post a link to the page where you try to add the box shadow(s)?

    Regards,
    Peter

    Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.