Jump to content
vBWarez - Rest In Peace

Add shadows to JPG images and gallery photos.


Recommended Posts

Add some effects to your site.
This code will add shadows to your gallery thumbnails, gallery photos and JPG images and attached images.
The code is written such that it won't affect buttons, smilies, avatars, et c.

AdminCP
Styles and Themes / Style Manage
Select your Style and chose Edit Template
Scroll down to CSS Templates, double click to expand
Scroll down to CSS Aditional, double click

Copy this code-
[CODE]

/* Start JPG Border */
img[class="b-gallery-thumbnail-list__thumbnail"] {
-webkit-box-shadow: 5px 5px 5px 0px rgba(34,34,56,1);
-moz-box-shadow: 5px 5px 5px 0px rgba(34,34,56,1);
box-shadow: 5px 5px 5px 0px rgba(34,34,56,1);
padding:1px;
border:2px solid #021a40;
}
img[class="image"] {
-webkit-box-shadow: 5px 5px 5px 0px rgba(34,34,56,1);
-moz-box-shadow: 5px 5px 5px 0px rgba(34,34,56,1);
box-shadow: 5px 5px 5px 0px rgba(34,34,56,1);
padding:1px;
border:2px solid #021a40;
}
img[class$="thumbnail"] {
-webkit-box-shadow: 5px 5px 5px 0px rgba(34,56,34,1);
-moz-box-shadow: 5px 5px 5px 0px rgba(34,56,34,1);
box-shadow: 5px 5px 5px 0px rgba(34,56,34,1);
padding:1px;
border:2px solid #021a40;
}
li[class$="b-post-attachments__item"] {
-webkit-box-shadow: 5px 5px 5px 0px rgba(56,34,34,1);
-moz-box-shadow: 5px 5px 5px 0px rgba(56,34,34,1);
box-shadow: 5px 5px 5px 0px rgba(56,34,34,1);
padding:1px;
border:2px solid #021a40;
}
img[class$="bbcode-attachment js-need-data-att-update"] {
-webkit-box-shadow: 5px 5px 5px 0px rgba(34,34,56,1);
-moz-box-shadow: 5px 5px 5px 0px rgba(34,34,56,1);
box-shadow: 5px 5px 5px 0px rgba(34,34,56,1);
padding:1px;
border:2px solid #021a40;
}
img[src$=".jpg"] {
-webkit-box-shadow: 5px 5px 5px 0px rgba(34,34,56,1);
-moz-box-shadow: 5px 5px 5px 0px rgba(34,34,56,1);
box-shadow: 5px 5px 5px 0px rgba(34,34,56,1);
padding:1px;
border:2px solid #021a40;
}
/* End JPG Border */


[/CODE]

At the end of the CSS Additional editor window, paste the code.

Click Save

Reload website and thumbnails and select images should have shadows.
Note that the shadow colour was chosen for a dark theme.
Also note that due to the specific CLASS's used, this code will not work for older versions of vB or other forums without changing the CLASS triggers.

[CENTER][img]http://s32.postimg.org/3pgb8w7yt/Clipboard01.jpg[/img][/CENTER]


Update:
I have added new code.
1. Wildcard search on CLASS identifiers
2. LI image spans
3. New class for when a posted image is updated as vB doesn't use the same CLASS value Edited by Snail
upgrade
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...