The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Hover Over Forum/Categories

2 posters

Go down

In progress Hover Over Forum/Categories

Post by Zed is Not Dead 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 Forum/Categories MaA27J9

Hover over:
Hover Over Forum/Categories 90DvZLP

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

Hover Over Forum/Categories X3kAWS4

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
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead 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

Hover Over Forum/Categories 6IWARoX

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:
Hover Over Forum/Categories 99yxR5b

With Hover:
Hover Over Forum/Categories XgXbYGw

{those images were made with photoshop}

What I have now:

Without Hover:
Hover Over Forum/Categories 7mLD0MF

With Hover:
Hover Over Forum/Categories CNhzwo7

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:
Hover Over Forum/Categories 3Dk46kN

With Hover:
Hover Over Forum/Categories 1IFJvf8

How the site looks right now:
Without Hover:
Hover Over Forum/Categories FCPbJMg

With Hover:
Hover Over Forum/Categories NoJa6Xr

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
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

In progress Re: Hover Over Forum/Categories

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

forgive me if this is a double post.

Bump
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

In progress Re: Hover Over Forum/Categories

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

bump
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

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

so I did everything and this was the result

Hover Over Forum/Categories MbCZFDm

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:

Hover Over Forum/Categories 0IAuId9
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

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

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

Hover Over Forum/Categories Q60vlGr
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

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

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

Hover Over Forum/Categories QPb8VIc

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
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

In progress Re: Hover Over Forum/Categories

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

I see this :
Hover Over Forum/Categories Captur10

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

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Zed is Not Dead 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.

Hover Over Forum/Categories MfBCmNU

I tried to force a wrap didn't work I tried adjusting the width it won't budge.
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

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

so that worked but now this is an issue

Hover Over Forum/Categories 8H7JGCV
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

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

I did some tweaking and this is what it did

Hover Over Forum/Categories ItXTvJG

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
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

In progress Re: Hover Over Forum/Categories

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

Slight problem, when clicking on sub forums this happens

Hover Over Forum/Categories OUbJE6I

anyway to get the effect to happen to just the main forums and not the sub forums?
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

In progress Re: Hover Over Forum/Categories

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

In progress Re: Hover Over Forum/Categories

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

you are awesome man
Zed is Not Dead
Zed is Not Dead
Forumember

Posts : 257
Reputation : 28
Language : English

http://naruto-ld.forumotion.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum