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.

Blurry Image on login widget

View previous topic View next topic Go down

Solved Blurry Image on login widget

Post by Scarlet D. on November 3rd 2016, 10:04 pm

Technical Details


Forum version : #PunBB
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Other
Screenshot of problem : http://i66.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
avatar
Scarlet D.
Forumember

Male Posts : 128
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Blurry Image on login widget

Post by Scarlet D. on November 4th 2016, 9:40 pm

anybody?
avatar
Scarlet D.
Forumember

Male Posts : 128
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Blurry Image on login widget

Post by APE on November 5th 2016, 12:00 am

Code:
box-shadow: 0px 10px 6px #000 inset,}
Just add the right div name to the start of the code and change the 0px and 10px and so on to your liking



avatar
APE
Manager
Manager

Male Posts : 10669
Reputation : 996
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: Blurry Image on login widget

Post by Scarlet D. on November 5th 2016, 4:37 pm

APE wrote:
Code:
box-shadow: 0px 10px 6px #000 inset,}
Just add the right div name to the start of the code and change the 0px and 10px and so on to your liking
works good on mozzila, but not in chrome, in chrome it makes a grey... thing between the avatar and the poster, just like the picture I have in the topic
avatar
Scarlet D.
Forumember

Male Posts : 128
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Blurry Image on login widget

Post by APE on November 5th 2016, 7:15 pm

Thats the problem chrome and some other browsers don't support this and there is nothing we can do about it sorry



avatar
APE
Manager
Manager

Male Posts : 10669
Reputation : 996
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: Blurry Image on login widget

Post by Scarlet D. on November 5th 2016, 7:32 pm

APE wrote:Thats the problem chrome and some other browsers don't support this and there is nothing we can do about it sorry
well that's ok, I will leave it as it is then, do you have any alternative suggestions yourself? something that might fit and work on all browsers?
avatar
Scarlet D.
Forumember

Male Posts : 128
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Blurry Image on login widget

Post by _Twisted_Mods_ on November 10th 2016, 3:39 pm

try using this
Code:

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

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: Blurry Image on login widget

Post by Scarlet D. on November 10th 2016, 3:58 pm

_Twisted_Mods_ wrote:try using this
Code:

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


That's close enough of what I want! and works for all browsers too! Thanks a bunch
avatar
Scarlet D.
Forumember

Male Posts : 128
Reputation : 2
Language : Greek,English
Location : Athens,Greece

http://onepiecegr.forum-pro.org/

Back to top Go down

Solved Re: Blurry Image on login widget

Post by _Twisted_Mods_ on November 10th 2016, 4:24 pm

your welcome.. can this be closed?
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: Blurry Image on login widget

Post by Luffy on November 10th 2016, 4:40 pm

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





avatar
Luffy
Manager
Manager

Male Posts : 4788
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

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