Technical Details
Forum version : #PunBB
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Other
Screenshot of problem : https://2img.net/h/oi66.tinypic.com/1534dw8.png
Who the problem concerns : All members
Forum link : http://onepiecegr.forum-pro.org/
Description of problem
Hello once more.I have this login widget on my forum which is like a wanted poster on One Piece ( i kind of customized it this way). Thing is that i want the avatar to be more blurry to the corners. I want it to seem like the avatar is mixing with the Poster.
I need an effect similar to this one!
the grey space you see between the avatar and the wanted poster is my fail attempt to make such a thing.
this is the whole script:
- Spoiler:
- Code:
<div class="module main">
<!-- BEGIN switch_profile -->
<div class="Wanted clearfix details">
<div class="center">
<br>
<div class="logav"><a href="{U_PROFILE}">{USERNAME_AVATAR}</a></div>
<br>
<div class="wanteduser"><h3>{USERNAME}</h3></div>
</div>
<b><div id="get_point"></div></b>
<dl class="left">
<div id="aligner"><dd style="text-align: left;"><a href="{U_PROFILE}">---------------------------------------</a></dd><div>
</dl>
</div>
<!-- END switch_profile -->
</div>
<!-- BEGIN switch_fb_widget_login -->
<div id="fb-root"></div>
<script>
FB.init({
appId : {switch_fb_widget_login.FACEBOOK_APP_ID},
cookie : true,
xfbml : true,
oauth : true,
version : 'v2.3'
});
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_widget_login -->
<style>
.module .Wanted {
padding-bottom: 70px;
padding-right: 70px
margin: 0em;
background: url('http://orig01.deviantart.net/208d/f/2016/100/d/a/wanted_poster_by_nikosv20-d9ygko5.png') no-repeat;
}
#get_point{
text-align: left;
margin-top: 8px;
margin-left: 35px;
}
#aligner{
visibility: hidden;
}
.module .details img {
border: 1px solid transparent;
margin-left: 0 1em;
height: 166px;
width: 138px!important;
height: 162px!important;
}
.module .logav{
margin-top: 13px;
}
.module .main-content {
visibility: hidden;
}
Last edited by Scarlet D. on November 10th 2016, 3:58 pm; edited 1 time in total