placing a box shadow under a photo on a thread

Go down

Solved placing a box shadow under a photo on a thread

Post by APE on Tue Aug 15, 2017 1:22 pm

Forum address: http://missingpeople.darkbb.com
Topic on forum if needed: http://missingpeople.darkbb.com/t202-jamilur-rahman
Hello everyone i am here now to fins someone thats can help me with a code Smile

I am trying to add a shadow under the photo's when posted on the forum like this


I did try this site to help me but it did not work lol
https://paulund.co.uk/learn-css-box-shadow
CSS Box Shadow Effect 7 is the one i want really but if not i can use this Image
Code:
https://i11.servimg.com/u/f11/12/23/10/57/123r12.png

As you can tell i am not any good at codes lol
With the image i used this but i think im missing something.
Code:
img.resize_img:after {content: url(https://i11.servimg.com/u/f11/12/23/10/57/123r11.png)!important;
}

any help on this will be good thanks.

APE



avatar
APE
Administrator
Administrator

Male Posts : 12527
Reputation : 1311
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Justice™ on Wed Aug 16, 2017 8:08 am

Hi APE,

There are a few problems with your code. First one is that every image on a fm forum has the class resize_img so we'll have to find another selector. I think
Code:
.tut-tex img
would work. The second problem is that the value of the content property has to be html. The code would be something like this:
Code:
.tut-tex img:after, .tut-tex img::after{
content:"";
background:url("https://i11.servimg.com/u/f11/12/23/10/57/123r11.png");
}
I tested this on your forum(using the browser's console) and I don't know why but it's not working. I haven't worked with pseudo elements(the ::before and ::after thing) for quite some time so I probably forgot to add something scratch Anyway, add that CSS I gave you and tell me if you see any changes.
avatar
Justice™
Forumember

Posts : 536
Reputation : 124
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by APE on Wed Aug 16, 2017 9:28 am

@Justice™️ wrote:Hi APE,

There are a few problems with your code. First one is that every image on a fm forum has the class resize_img so we'll have to find another selector. I think
Code:
.tut-tex img
would work. The second problem is that the value of the content property has to be html. The code would be something like this:
Code:
.tut-tex img:after, .tut-tex img::after{
content:"";
background:url("https://i11.servimg.com/u/f11/12/23/10/57/123r11.png");
}
I tested this on your forum(using the browser's console) and I don't know why but it's not working. I haven't worked with pseudo elements(the ::before and ::after thing) for quite some time so I probably forgot to add something scratch Anyway, add that CSS I gave you and tell me if you see any changes.
Hello buddy No sadly this one did not work Sad



avatar
APE
Administrator
Administrator

Male Posts : 12527
Reputation : 1311
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by APE on Thu Aug 17, 2017 4:13 pm

BUMP BUMP



avatar
APE
Administrator
Administrator

Male Posts : 12527
Reputation : 1311
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Justice™ on Fri Aug 18, 2017 1:36 am

This should do it:
Code:
.tut-tex img{
    position:relative !important;
    box-shadow:4px 4px 10px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset !important;
}
.tut-tex img::before, .tut-tex img::after{
    content:"" !important;
    position:absolute !important;
    z-index:-1 !important;
    box-shadow:0 0 20px rgba(0,0,0,0.8) !important;
    top:0 !important;
    bottom:0 !important;
    left:10px !important;
    right:10px !important;
    border-radius:100px / 10px !important;
}
..tut-tex img::after{
    right:10px !important;
    left:auto !important;
    transform:skew(8deg) rotate(3deg) !important;
}
avatar
Justice™
Forumember

Posts : 536
Reputation : 124
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by APE on Fri Aug 18, 2017 3:21 am

it sort of worked Sad

The box shadow is not how i wanted it thou Sad as you can see it is just acting like a normal box shadow not just under the photo it's self.



avatar
APE
Administrator
Administrator

Male Posts : 12527
Reputation : 1311
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by APE on Sat Aug 19, 2017 9:08 am

bump Sad still looking ot make this work right Sad



avatar
APE
Administrator
Administrator

Male Posts : 12527
Reputation : 1311
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Draxion on Sat Aug 19, 2017 12:21 pm

@APE, are you simply wanting all profile details avatars to have the shadow effect 7?


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 2162
Reputation : 275
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by APE on Sat Aug 19, 2017 4:46 pm

Hello @Draxion

No on my site http://missingpeople.darkbb.com/ if you look at the posts of missing people you will see a photo of them http://missingpeople.darkbb.com/t222-liam-johnson
now i want the shadow to be under the photo's like this


right now it has a basic shadow around it
it would be better if i could use a image but if it can be done with CSS or JavaScript then that's even better '

if you need a test account with admin account let me know i will inbox you one

the one in this photo is Effect 2 and thats the one i really want if passable



avatar
APE
Administrator
Administrator

Male Posts : 12527
Reputation : 1311
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Draxion on Sat Aug 19, 2017 4:58 pm

Yes, send me that information. That would be lovely.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 2162
Reputation : 275
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by APE on Sat Aug 19, 2017 5:17 pm

PM sent

thanks for your help Smile



avatar
APE
Administrator
Administrator

Male Posts : 12527
Reputation : 1311
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by _Twisted_Mods_ on Sat Aug 19, 2017 10:58 pm

Code:
<style>
#imgbox {
    padding-bottom: 50px;
    display: inline-block;
    background-image: url(http://envision.wptation.com/wp-content/themes/envision/includes/modules/module.shadow/shadows/shadow-2.png);
    background-size: 100%;
    background-position: 0px 408px;
    background-repeat: no-repeat;
}
<style>

<span id="imgbox">
    <img src="https://www.missingpeople.org.uk/media/zoo/images/image1_cc2e51ee0f0633cedee3bfd1c1930176.jpg" alt="" class="resize_img" width="332" height="400">
</span>
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by APE on Sun Aug 20, 2017 11:28 am

Hello @_Twisted_Mods_ sorry i think im having a blond moment lol

where do it add this code ? lol



avatar
APE
Administrator
Administrator

Male Posts : 12527
Reputation : 1311
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by Justice™ on Sun Aug 20, 2017 11:43 am

Add this to the CSS:
Code:
.tut-tex img{
    padding-bottom: 50px;
    display: inline-block;
    background-image: url(http://envision.wptation.com/wp-content/themes/envision/includes/modules/module.shadow/shadows/shadow-2.png);
    background-size: 100%;
    background-position: 0px 408px;
    background-repeat: no-repeat;
}
avatar
Justice™
Forumember

Posts : 536
Reputation : 124
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by APE on Sun Aug 20, 2017 11:51 am

That sort of worked lol





avatar
APE
Administrator
Administrator

Male Posts : 12527
Reputation : 1311
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: placing a box shadow under a photo on a thread

Post by APE on Sun Aug 20, 2017 1:52 pm

it's ok i have removed the border around the photo's and i will leave it as that Smile

Thank you all for your help Smile your great rock

Problem solved & topic archived.
Please read our forum rules: ESF General Rules



avatar
APE
Administrator
Administrator

Male Posts : 12527
Reputation : 1311
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum