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.

Profile Field On Hover

View previous topic View next topic Go down

Solved Profile Field On Hover

Post by Zed is Not Dead on September 19th 2015, 9:29 pm

Not sure if the title is right for what I want but I recently was take back from this cool feature I seen other sites do things like this as well but they were proboards but to my surprise this one was a forumotion one so I was wondering if someone could help me code something that allows me to make the profile avatar look like this. I assume it will be CSS maybe a java script as well as it's hover over.

How the Avatar looks when not hovered on:


When hovered over:


I would also like the rank at the bottom to connect to the image like they do where as ours we have now simply have a huge gap between them.



If you could help me with this that would be amazing!

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: Profile Field On Hover

Post by Zed is Not Dead on September 20th 2015, 6:00 pm

BUMP

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: Profile Field On Hover

Post by Ange Tuteur on September 20th 2015, 9:04 pm

Hi @Zed is Not Dead,

Sorry for the delay. Go to Display > Templates > General and open the viewtopic_body template. Edit

Find :
Code:
               <dl class="postprofile-details postdetails">
                  <dt>
                     {postrow.displayed.POSTER_AVATAR}<br />
                     {postrow.displayed.POSTER_NAME}
                  </dt>
                  <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
                  <dd><br /></dd>
                  <dd>
                     <!-- BEGIN profile_field -->
                     {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                     <!-- END profile_field -->
                     {postrow.displayed.POSTER_RPG}
                  </dd>
               </dl>

Replace by :
Code:
               <dl class="postprofile-details postdetails">
                  <dt>
                                                  <span class="profile-avatar">{postrow.displayed.POSTER_AVATAR}</span><br />
                                                  <span class="profile-name">{postrow.displayed.POSTER_NAME}</span>
                  </dt>
                  <dd class="profile-rank">{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
                  <dd><br /></dd>
                  <dd class="profile-info">
                     <!-- BEGIN profile_field -->
                     {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                     <!-- END profile_field -->
                     {postrow.displayed.POSTER_RPG}
                  </dd>
               </dl>

Save and publish. Add

Once that is done, you can set everything in place with a bit of CSS. Go to Display > Colors > CSS stylesheet and paste the following rules :
Code:
/* profile container */
.postprofile-details {
  height:350px;
  position:relative;
  margin:0;
}

/* profile fields box */
.profile-info {
  color:#FFF;
  background:#333;
  border:1px solid #555;
  border-radius:3px;
  text-align:center;
  padding:3px;
  position:absolute;
  top:20px;
  left:10px;
  right:10px;
  bottom:20px;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transition:300ms;
}

.postprofile-details:hover .profile-info {
  opacity:1;
  visibility:visible;
}

/* profile username */
.profile-name {
  background:#39C;
  text-align:center;
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:40px;
  line-height:40px;
}

/* profile rank */
.profile-rank {
  text-align:center;
  background:#39C;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:40px;
  line-height:40px;
}

/* avatar container */
.profile-avatar {
  background:#17A;
  position:absolute;
  top:40px;
  left:0;
  right:0;
  bottom:40px;
}

/* avatar image */
.profile-avatar img {
  width:100%;
  height:100%;
}

You may want to change height, colors, etc.. I just set some default colors in place to tell the difference between each area.

These kinds of profiles usually rely on a fixed height and width so that it always look the same, and if you want the avatar to fit the area you want you'll need to stretch it. ( like in the last rule ) To position everything I used a little bit of positioning tricks. If you're interested this is a good read.

If any questions let me know.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile Field On Hover

Post by Zed is Not Dead on September 22nd 2015, 12:47 am

it works but I want the hover over to slide up not just pop up also how do I get it so the rank image gets as close as it is on here.



also it only has a blue bar on the top not on the bottom.


it also breaks the forum



this is what I want.


Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: Profile Field On Hover

Post by Bones! on September 22nd 2015, 1:48 am

Another way to do it, is to have it pan from below. Though I know it is something different entirely, it's still an option.
Code:
.postprofile dd {
  visibility:hidden;
  opacity:0;
  height:0;
  -webkit-transition:300ms;
    -moz-transition:300ms;
      -o-transition:300ms;
          transition:300ms;
}
.postprofile:hover dd {
  visibility:visible;
  opacity:1;
  height:auto;
}

Bones!
Forumember

Posts : 168
Reputation : 19
Language : English, CCS, HTML
Location : Behind you

http://www.unknownlandsrp.com/

Back to top Go down

Solved Re: Profile Field On Hover

Post by Zed is Not Dead on September 22nd 2015, 2:05 am

it's cool but it is not what I wanted, I want this


and I want it to work with this image height and width.


Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: Profile Field On Hover

Post by Zed is Not Dead on September 22nd 2015, 10:25 pm

Bump

Edit:

So say we took this image



then this rank:


then if the code does what I want it to do it should look like this:


then when hovered over it should look something like this:


But when I hover over it I want it to slide up from the bottom like this:


I hope that clarified more of what I want.

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: Profile Field On Hover

Post by Ange Tuteur on September 23rd 2015, 11:06 am

Replace the CSS with this :
Code:
/* profile container */
.post-container { margin-left:230px }
.postprofile, .postprofile-details {
  width:230px;
  margin-left:-230px;
  overflow:hidden;
}
.postprofile-details {
  height:490px;
  position:relative;
  margin:0;
}

/* profile fields box */
.profile-info {
  color:#FFF;
  background:#333;
  border:1px solid #555;
  border-radius:3px;
  text-align:center;
  padding:3px;
  position:absolute;
  top:500px;
  left:10px;
  width:200px;
  height:300px;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transition:500ms;
}

.postprofile-details:hover .profile-info {
  opacity:1;
  visibility:visible;
  top:60px;
}

/* profile username */
.profile-name {
  background:#002E03;
  text-align:center;
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:40px;
  line-height:40px;
}

/* profile rank */
.profile-rank {
  text-align:center;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
}

/* avatar container */
.profile-avatar {
  background:#17A;
  position:absolute;
  top:40px;
  left:0;
  right:0;
  bottom:0px;
}

/* avatar image */
.profile-avatar img {
  width:100%;
  height:100%;
}

Any changes that need to be made to the profile can be done through the CSS. That is ; colors, transition duration, position, etc.. FYI I set the default height of the profile to the size of the avatar your provided, so if that needs changing you can edit the first few rules which contain height, width, and margin adjustments. Moreover, if you don't want the avatar stretched to fit the area, then remove the last rule.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile Field On Hover

Post by Zed is Not Dead on September 23rd 2015, 5:08 pm

THANK YOU!

is there any way I can add a tiny border around it?

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: Profile Field On Hover

Post by Ange Tuteur on September 23rd 2015, 5:12 pm

When you say "it" what are you referring to ? blackeye

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile Field On Hover

Post by Zed is Not Dead on September 23rd 2015, 5:35 pm

the avatar image like a subtle small one and the rank looks good but it shows a little space at the bottom.


ee the tiny gap at the bottom I would like that to be filled by the rank so lower it like a tiny bit

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: Profile Field On Hover

Post by Ange Tuteur on September 23rd 2015, 5:47 pm

Find this :
Code:
.profile-avatar {
  background:#17A;
  position:absolute;
  top:40px;
  left:0;
  right:0;
  bottom:0px;
}

and add the border property :
Code:
border:1px solid #333;

As for the rank, that space is caused by the white space in your rank image. However, if you need to adjust the position, find this rule :
Code:
.profile-rank {
  text-align:center;
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
}

and modify the value of "bottom." Since you want to move it down, use a negative number like -5px;

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Profile Field On Hover

Post by Zed is Not Dead on September 23rd 2015, 6:07 pm

you are awesome thank you, I was trying to code this all myself on a mock site but the background of the image was over powering it. SOLVED!

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

http://fairytailonline-rp.forumotion.com/

Back to top Go down

Solved Re: Profile Field On Hover

Post by Ange Tuteur on September 23rd 2015, 6:08 pm

You're welcome ^^

Topic archived

Have a great day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.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