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.

Hover Over Forum/Categories

View previous topic View next topic Go down

In progress Hover Over Forum/Categories

Post by Zed is Not Dead on September 27th 2015, 9:03 pm

So Really it's hard to explain what I want but I found a site that has what I want overall

So I will link what I want



Hover over:


I think I understand the process of it, I have to make IDs for the categories and forums then code the hovering over stuff in the CSS but honestly I'm stumped for the coding. When inspecting the elements I couldn't find much which led me to think that it is Java script, anyone mind helping me on this?

However when inspecting the elements I want to note that the code is three parts



The side bar that is in another language is one image, then the hover over image is another and finally above it is the forum or category title. I would appreciate if someone helped me with this I been trying to code it on my mock site for another site and I just can't figure out the code. The site I am coding it for is Invision and found here: http://fairytailonline-rp.forumotion.com/

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur on September 27th 2015, 9:33 pm

I assume they have a container in the description with a special class, then when you hover the category ( or an element next to it ), it'll show up. This is an example I can offer you :

Add the following to the description of a forum. Place whatever content you like in it.
Code:
<div class="content-box">CONTENT</div>

Then add the following to your stylesheet :
Code:
.content-box {
  color:#CCC;
  background:#333;
  border:1px solid #666;
  border-radius:3px;
  padding:3px;
  visibility:hidden;
  opacity:0;
  transition:300ms;
}

.ipbtable.index-box tr:hover .content-box {
  visibility:visible;
  opacity:1;
}

When you hover the row you stuck it in, it should show up.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead on September 27th 2015, 9:51 pm

Okay so I came up with a code to get a similar feel to it

code posted in description:
Code:
<div id="desc">
                        
   <div id="register">
                           
      <div id="register1">
                              
         <div style=" max-height: 140px; padding: 10px; overflow: auto; ">
             <span><span>            This is where you will find character, position, equipment registrations and the sort. Please keep in mind that you must have registered and approved applications before you can advance and or use them in this site. </span></span>
         </div>
                              
      </div>
                           
   </div>
</div>

Code Posted in CSS
Code:
#register{background:url(http://i.imgur.com/K6FZHML.jpg);width:666px;height:200px;overflow:hidden;}
#register1{background:#000000;width:360px;height:160px;overflow:hidden;position:relative;top:20px;left: 260px;padding:5px;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;-webkit-transform: scale(0.2);  -ms-transform: scale(0.2);  -o-transform: scale(0.2);  transform: scale(0.2);opacity:0;}
#register:hover
#register1{-webkit-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1);  transform: scale(1);opacity:0.9;}

And this is how it looks



But if you noticed it is missing the topics, the recent posts and the number of posts on the image like theirs does, any ideas on how to get this?

Hope this explains what I want More:

No Hover:


With Hover:


{those images were made with photoshop}

What I have now:

Without Hover:


With Hover:


If you noticed for what ever reason the image is cut off I been having problems adjusting the overall width of the site I went into the general section and tried it there didn't work, looked for a wrap in the code not there, made a wrap to force it to change size, didn't work. I'm at a loss with that. But I hope this explains what I want more thoroughly


Update: so I found out that that side image was actually the new and old posts and locked post images so this is what I want it to overall look like I already figured out how to get the category name.

I just want this to be on the image:

Without Hover:


With Hover:


How the site looks right now:
Without Hover:


With Hover:


As you can see I'm close to getting what I want however I want the Topics, Posts, and Last Posts be ontop of the image instead of being stretched out like the image of our site shows. If you could help with that that would be amazing, I have access to the owner account as she gave me permission. So if it's template work I can do that.

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead on September 28th 2015, 6:23 pm

forgive me if this is a double post.

Bump

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead on September 30th 2015, 11:16 am

bump

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur on September 30th 2015, 2:19 pm

I apologize for the wait. I've had my hands full recently due to the global theme change.

Anyway, what you'll need to do is edit the index_box template.
( Display > Templates > General > index_box )

Replace :
Code:
<th class="forum">{L_FORUM}</th>

By :
Code:
<th class="forum" style="width:100%">{L_FORUM}</th>

Find and remove :
Code:
               <th class="topics">{L_TOPICS}</th>
               <th class="replies">{L_POSTS}</th>
               <th class="last post-info">{L_LASTPOST}</th>

Find and remove :
Code:
               <td class="row1 centered">{catrow.forumrow.TOPICS}</td>
               <td class="row2 centered">{catrow.forumrow.POSTS}</td>
               <td class="row1">

                        <!-- BEGIN avatar -->
                        <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                        <!-- END avatar -->

                  <span>
                  <!-- BEGIN switch_topic_title -->
                  <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                  <!-- END switch_topic_title -->
                  {catrow.forumrow.USER_LAST_POST}
                  </span>
               </td>

Find :
Code:
<div class="par forum-name">

and add this before it :
Code:
<table class="forumStats">
  <tbody>
    <tr>
      <td class="topicStats">{catrow.forumrow.TOPICS} {L_TOPICS}</td>
      <td class="postStats">{catrow.forumrow.POSTS} {L_POSTS}</td>
    </tr>
    <tr>
      <td class="lastpostStats" colspan="2">
        <!-- BEGIN avatar -->
        <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
        <!-- END avatar -->
        <span>
          <!-- BEGIN switch_topic_title -->
          <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
          <!-- END switch_topic_title -->
          {catrow.forumrow.USER_LAST_POST}
        </span>
      </td>
    </tr>
  </tbody>
</table>

Save and publish. Add


Then add this to your stylesheet :
Code:
.forumStats {
  float:left;
  width:250px;
  margin-right:30px;
}

.forumStats td {
  color:#FFF;
  text-align:center;
  background:#333;
  border:1px solid #000;
  padding:6px 12px !important;
  height:auto !important;
  vertical-align:middle;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead on September 30th 2015, 5:12 pm

so I did everything and this was the result



I want to basically do this.

I want to take all that wide space and get rid of it as a whole making the overall image be the middle picture. I forgot to show you that I changed my coding up a bit so here is the overall coding.

I also want to get rid of the user avatar being displayed in the post.


CSS CODE:
Code:
#register{background:url(http://i.imgur.com/0IAuId9.jpg);width:666px;height:250px;overflow:hidden;}
#register1{background:#000000;width:360px;height:120px;overflow:hidden;position:relative;top:90px;left: 260px;padding:5px;transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;-webkit-transform: scale(0.2);  -ms-transform: scale(0.2);  -o-transform: scale(0.2);  transform: scale(0.2);opacity:0;}
#register:hover
#register1{-webkit-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1);  transform: scale(1);opacity:0.9;}

The Category Pasted Code:
Code:
<a class="postlink" href="http://fairytailonline-rp.forumotion.com/f10-forum?tid=9d0730103061f6af6225d0654135128d"></a>
<div id="desc">
                                    
   <div id="register">
                                       
      <div id="register1">
                                          
         <div style=" max-height: 140px; padding: 10px; overflow: auto; ">
                  <span><span>            This is where you will find character, position, equipment registrations and the sort. Please keep in mind that you must have registered and approved applications before you can advance and or use them in this site. </span></span>     
         </div>
                                          
      </div>
                                       
   </div>
</div><a class="postlink" href="http://fairytailonline-rp.forumotion.com/f10-forum?tid=9d0730103061f6af6225d0654135128d"></a>

Then I also took and changed the forum name to <strong></strong>

Also here is how all the images completely look like:


Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur on September 30th 2015, 6:25 pm

Most likely will want to get rid of margin and replace float:left; with position:absolute; then.
Code:
.forumStats {
  position:absolute;
  width:250px;
}

Then set the parent container to position:relative;
Code:
table.ipbtable td.icon {
  position:relative;
}

After that, you'll just need to adjust the top and left properties of .forumStats to position the stat table where you want it. To remove the last post avatar go to Display > Structure and hierarchy > Show avatars in the column "Last posts"

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead on September 30th 2015, 6:36 pm

it kinda worked but it's not in the place I want it to be.


Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur on September 30th 2015, 6:52 pm

Did you adjust the top offset ? Like this :
Code:
.forumStats {
  position:absolute;
  top:50px; /* top offset */
  left:10px; /* left offset */
  width:250px;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead on September 30th 2015, 7:05 pm

it worked on my mock site but on this site it isn't working



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

the Template Code:

Code:
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
   <div class="borderwrap">
      <div class="maintitle floated clearfix">
         {catrow.tablehead.L_FORUM}
         <div class="contract" id="b{catrow.tablehead.ID}" onclick="toggleCategory('{catrow.tablehead.ID}');">
            &nbsp;&nbsp;&nbsp;
         </div>
      </div>

      <table cellpadding="0" cellspacing="0" id="{catrow.tablehead.ID}" class="ipbtable index-box">
         <thead>
            <tr>
               <th class="forum" style="width:100%">{L_FORUM}</th>
            </tr>
         </thead>
         <tfoot>
            <tr>
               <td colspan="4">

               </td>
            </tr>
         </tfoot>
         <tbody>
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
            <tr>
               <td class="row2 icon" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                  <span class="status clearfix" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                     <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icon" />
                  </span>
                                          <td class="topicStats">{catrow.forumrow.TOPICS} {L_TOPICS}</td>
      <td class="postStats">{catrow.forumrow.POSTS} {L_POSTS}</td>
    </tr>
    <tr>
      <td class="lastpostStats" colspan="2">
        <!-- BEGIN avatar -->
        <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
        <!-- END avatar -->
        <span>
          <!-- BEGIN switch_topic_title -->
          <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
          <!-- END switch_topic_title -->
          {catrow.forumrow.USER_LAST_POST}
        </span>
      </td>
    </tr>
  </tbody>
</table>
                  <div class="par forum-name">
                     <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                     <p class="forum-desc">{catrow.forumrow.FORUM_DESC}</p>
                  </div>
                  <!-- BEGIN switch_moderators_links -->
                  <div class="mods">
                     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                  </div>
                  <!-- END switch_moderators_links -->
                  <p>
                     {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                     <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </p>

               </td>
               
            </tr>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
         </tbody>
      </table>
      </div>
      <br />
   <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<div class="toplinks linklist clearfix">
   <ul>
      <!-- BEGIN switch_delete_cookies -->
      <li><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
      <!-- END switch_delete_cookies -->
      <!-- BEGIN switch_user_logged_in -->
      <li class="last"><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
      <!-- END switch_user_logged_in -->
   </ul>
</div>
<!-- END switch_on_index -->

The CSS CODE:
Code:
.forumStats {
  position:absolute;
  top:90px; /* top offset */
  left:60px; /* left offset */
  width:250px;
}


table.ipbtable td.icon {
  position:relative;
}
.forumStats td {
  color:#FFF;
  text-align:center;
  background:#333;
  border:1px solid #000;
  padding:6px 12px !important;
  height:auto !important;
  vertical-align:middle;
}

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur on September 30th 2015, 7:10 pm

I see this :


Are you view a template preview or cached version ? ( try refreshing ) blackeye

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead on September 30th 2015, 7:11 pm

lol I noticed I made a mistake in the template xD but now I want to get rid of this wide open space.



I tried to force a wrap didn't work I tried adjusting the width it won't budge.

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur on September 30th 2015, 7:18 pm

I see you set a static width for each category. ( 666px ) One thing you could do is set a static width for the categories and set the left and right margins to auto so it appears centered. Like this :
Code:
#main-content div.borderwrap {
  width:800px;
  margin:0 auto;
}

At the moment the width is automatically calculated based on the parent container's width. So it'll resize depending on your resolution.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead on September 30th 2015, 7:23 pm

so that worked but now this is an issue


Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur on September 30th 2015, 7:33 pm

Yeah, that's probably a bad idea. blackeye

Another thing I can think of would be to try and just center the content to share the empty space :
Code:
table.ipbtable.index-box td .par {
  width:800px;
  margin:0 auto;
}

You'll also need to set the left position of .forumStats to 22%

If that's not what you're looking for, the only other solution would be bigger images. Razz

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead on September 30th 2015, 7:52 pm

I did some tweaking and this is what it did



So I believe I'm set now I just need help with the scrolling group legend complete look and the footer and i can submit the forum for a review Very Happy

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead on October 1st 2015, 8:18 pm

Slight problem, when clicking on sub forums this happens



anyway to get the effect to happen to just the main forums and not the sub forums?

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur on October 1st 2015, 8:41 pm

The only problem with the index_box is that it also affects sub-forums inside categories. Try using this CSS to hide it on the forums :
Code:
.ipbtable.index-box[id^="f"] .forumStats {
  display:none
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead on October 1st 2015, 9:13 pm

you are awesome man

Zed is Not Dead
Forumember

Posts : 230
Reputation : 27
Language : English

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