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.

Borders, columns and avatars

View previous topic View next topic Go down

Solved Borders, columns and avatars

Post by Hafny on June 1st 2014, 2:39 pm

Hello~
I've got a few questions about forumotion borders, columns and avatars:
1. Is it possible to make rounded corners with pointy ending like this? (found it here http://blood-lights.superforo.net/)
2. I want to remove "topics", "posts" and "last post" column and make it look like this.
3. And is it possible to get this effect that shows user's profile when you hover on his avatar?
sorry, it's hard for me to explain it on english. Very Happy
My forum version is phBB2


Last edited by Hafny on June 6th 2014, 10:07 pm; edited 4 times in total

Hafny
New Member

Posts : 12
Reputation : 1
Language : LT

http://divergents.forumlt.com/

Back to top Go down

Solved Re: Borders, columns and avatars

Post by SLGray on June 1st 2014, 5:17 pm



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35629
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Borders, columns and avatars

Post by Hafny on June 1st 2014, 5:41 pm

Something like that, thank you! But can "Messages" and "Topics" be placed above last post information?
Nevermind, fixed this problem.

Hafny
New Member

Posts : 12
Reputation : 1
Language : LT

http://divergents.forumlt.com/

Back to top Go down

Solved Re: Borders, columns and avatars

Post by @Mark on June 1st 2014, 8:25 pm

1.
Code:
.forumline {
border-bottom: 10px solid #000;
border-radius: 0 0 100px 0;
}

3. Working on the code, give me some time. Smile
EDIT: Here, give this a try, find this part on your viewtopic_body template:
Code:
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- 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}
         </span><br />
         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

- Now replace it with this one:
Code:
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a></span><br />
            <span class="postdetails poster-profile">
                                 
                                 
                                  <div class="view view-third"> 
                                    <img>{postrow.displayed.POSTER_AVATAR}</img>
    <div class="mask"> 
    <h2>{postrow.displayed.POSTER_NAME}</h2> 
      <p>{postrow.displayed.POSTER_RANK}<br/>{postrow.displayed.RANK_IMAGE}
   </p> 
    </div> 
</div> 
                                 
                                 
<br /><br />
            <!-- 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}
         </span><br />
         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

- Now add this to your CSS:
Code:
.view-third img {
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.view-third .mask {
  background-color: rgba(0,0,0,0.6);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transform: translate(460px, -100px) rotate(180deg);
  -moz-transform: translate(460px, -100px) rotate(180deg);
  -o-transform: translate(460px, -100px) rotate(180deg);
  -ms-transform: translate(460px, -100px) rotate(180deg);
  transform: translate(460px, -100px) rotate(180deg);
  -webkit-transition: all 0.2s 0.4s ease-in-out;
  -moz-transition: all 0.2s 0.4s ease-in-out;
  -o-transition: all 0.2s 0.4s ease-in-out;
  -ms-transition: all 0.2s 0.4s ease-in-out;
  transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2 {
  -webkit-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  -o-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  transform: translateY(-100px);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.view-third p {
  -webkit-transform: translateX(300px) rotate(90deg);
  -moz-transform: translateX(300px) rotate(90deg);
  -o-transform: translateX(300px) rotate(90deg);
  -ms-transform: translateX(300px) rotate(90deg);
  transform: translateX(300px) rotate(90deg);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.view-third a.info {
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.view-third:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translate(0px, 0px);
  -moz-transform: translate(0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}
.view-third:hover h2 {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.5s;
  -moz-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  -ms-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.view-third:hover p {
  -webkit-transform: translateX(0px) rotate(0deg);
  -moz-transform: translateX(0px) rotate(0deg);
  -o-transform: translateX(0px) rotate(0deg);
  -ms-transform: translateX(0px) rotate(0deg);
  transform: translateX(0px) rotate(0deg);
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.view-third:hover a.info {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.view {
  margin: 10px;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.view .mask,.view .content {
  width: 150px;
  height: 150px;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}
.view img {
  position: relative;
}
.view h2 {
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  margin: 20px 0 0 0;
}
.view p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #fff;
  padding: 10px 20px 20px;
  text-align: center;
}


Last edited by @Mark on June 1st 2014, 9:41 pm; edited 1 time in total

@Mark
Forumember

Male Posts : 187
Reputation : 37
Language : HTML | CSS | Javascript | C | Java
Location : Republic of the Philippines

http://help.forumotion.com/

Back to top Go down

Solved Re: Borders, columns and avatars

Post by Hafny on June 1st 2014, 9:36 pm

1.
2. Forgot to post tutorial, sorry. :Dhttp://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

Hafny
New Member

Posts : 12
Reputation : 1
Language : LT

http://divergents.forumlt.com/

Back to top Go down

Solved Re: Borders, columns and avatars

Post by @Mark on June 1st 2014, 9:44 pm

Check my previous post, i edit it. Smile

@Mark
Forumember

Male Posts : 187
Reputation : 37
Language : HTML | CSS | Javascript | C | Java
Location : Republic of the Philippines

http://help.forumotion.com/

Back to top Go down

Solved Re: Borders, columns and avatars

Post by Hafny on June 1st 2014, 11:25 pm

Wow, wow, wow, woooooow! Thank you very much for this code! It worked! :wouhou:



But what about 1st problem?

Hafny
New Member

Posts : 12
Reputation : 1
Language : LT

http://divergents.forumlt.com/

Back to top Go down

Solved Re: Borders, columns and avatars

Post by @Mark on June 2nd 2014, 8:18 am

Hmm, this one doesn't work?
Code:
.forumline {
border-bottom: 10px solid #000;
border-radius: 0 0 100px 0;
}

@Mark
Forumember

Male Posts : 187
Reputation : 37
Language : HTML | CSS | Javascript | C | Java
Location : Republic of the Philippines

http://help.forumotion.com/

Back to top Go down

Solved Re: Borders, columns and avatars

Post by Hafny on June 2nd 2014, 1:22 pm

Nope, this happened.

One more thing about the 3rd problem: I modified one part a bit:
Code:
<div class="mask">
<h2>{postrow.displayed.POSTER_NAME}</h2>
<p>{postrow.displayed.POSTER_RANK}<br/>{postrow.displayed.RANK_IMAGE}</p>
<k><!-- 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}</k>
</div>
</div>
and added this to css:
Code:
.view k {
font-family: Georgia, serif;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
overflow:auto;
}
because I want to see whole profile inside avatar when I hover on it, but my problem is that the text goes beyond avatar border while I need it to scroll.

Hafny
New Member

Posts : 12
Reputation : 1
Language : LT

http://divergents.forumlt.com/

Back to top Go down

Solved Re: Borders, columns and avatars

Post by Jophy on June 3rd 2014, 9:08 am

For number 1, by modifying the forumline, it will also affect the containers of modules, statistics etc. you will also need to modify the border radius of the 3rd row of categories to match it, add this to your CSS:

Code:
td.row3.over {
 border-radius: 0 0 100px 0;
}

Also, it appears that 100 px is too high, you can lower it to 50px.

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

Solved Re: Borders, columns and avatars

Post by Hafny on June 6th 2014, 10:06 pm

Thank you! :rose: Solved.

Hafny
New Member

Posts : 12
Reputation : 1
Language : LT

http://divergents.forumlt.com/

Back to top Go down

Solved Re: Borders, columns and avatars

Post by SLGray on June 6th 2014, 10:59 pm

Problem solved & topic archived.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35629
Reputation : 2372
Language : English
Location : United States

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