The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

placing a box shadow under a photo on a thread

View previous topic View next topic Go down

Solved placing a box shadow under a photo on a thread

Post by APE on August 15th 2017, 8: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
Manager
Manager

Male Posts : 11006
Reputation : 1031
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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 August 16th 2017, 3:08 pm

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 : 521
Reputation : 121
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 August 16th 2017, 4:28 pm

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
Manager
Manager

Male Posts : 11006
Reputation : 1031
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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 August 17th 2017, 11:13 pm

BUMP BUMP



avatar
APE
Manager
Manager

Male Posts : 11006
Reputation : 1031
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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 August 18th 2017, 8: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 : 521
Reputation : 121
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 August 18th 2017, 10: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
Manager
Manager

Male Posts : 11006
Reputation : 1031
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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 August 19th 2017, 4:08 pm

bump Sad still looking ot make this work right Sad



avatar
APE
Manager
Manager

Male Posts : 11006
Reputation : 1031
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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 August 19th 2017, 7: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 : 1837
Reputation : 230
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 August 19th 2017, 11: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
Manager
Manager

Male Posts : 11006
Reputation : 1031
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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 August 19th 2017, 11: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 : 1837
Reputation : 230
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 August 20th 2017, 12:17 am

PM sent

thanks for your help Smile



avatar
APE
Manager
Manager

Male Posts : 11006
Reputation : 1031
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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 August 20th 2017, 5:58 am

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 August 20th 2017, 6:28 pm

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

where do it add this code ? lol



avatar
APE
Manager
Manager

Male Posts : 11006
Reputation : 1031
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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 August 20th 2017, 6:43 pm

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 : 521
Reputation : 121
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 August 20th 2017, 6:51 pm

That sort of worked lol





avatar
APE
Manager
Manager

Male Posts : 11006
Reputation : 1031
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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 August 20th 2017, 8: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
Manager
Manager

Male Posts : 11006
Reputation : 1031
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

View previous topic View next topic Back to top


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