Jump to content

Creating A Deep Inset Look For Boxes Thumbs

Recommended Posts


Yearling newbie here. I am looking to create a look for the boxes thumbs. I'd like them to have inner shadows so they look like the images are deeply inset. I was trying to create it with mixins, but was not successful.  Anyone want to kindly offerme a bit of code to try?

Share this post

Link to post
Share on other sites
James B

Hi there, I've attached some links with some various css shadow effects you could try out. Just apply them to the .fbox class. Hope this helps





Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Thank you James!

I copy and pasted from one of the references. Here is what I put in the custom code area:




.fbox .shadow {
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
 box-shadow: inset 0 0 10px #000000; }



Except that the code lines up nicer. Nothing changed. There is no shadow on the box thumb graphic.  I don't need to stipulate the thumb, just .fbox?

Share this post

Link to post
Share on other sites

Not sure but it may be you have a Cache plugin activated. If so, clear the cache.


Also, it may not work in all browsers.  So check in a few of them like Safari, Chrome, IE, Firefox and Opera.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • yemoonyah
      By yemoonyah+
      Hi, even though I just got a SSL certificate, I can't get the green padlock to appear due to the following error:
      :A file with an insecure url of "http://yemoonyah.com/wp-content/plugins/pl-section-boxes/check.svg" was loaded via the javascript file: https://yemoonyah.com/wp-includes/js/jquery/jquery.js?ver=1.12.4 on line 3. The insecure URL may not be directly contained in the script file and may exist elsewhere."
      I figured if I delete and re-install the plugin it might fix the problem but will my boxes on the website still be there? Or do I have to redesign everything all over again if I delete the plugin and then re-install it?
    • Audun MB
      By Audun MB+

      The images are forced into a boxed frame so that you can't see the whole picture. Doesn't look so good. Is this a bug? A feature? How can I fix it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 

    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.

    • Susan
      By Susan+
      Everything was fine with my site.
      Suddenly, strange characters are appearing in Boxes. See image. Site page is here. I even tried to add a new Boxes section but the same thing keeps happening, so I deleted the new section.
      How can I resolve this?
      Your help is greatly appreciated.
      Thank you.