Hover Over Forum/Categories
2 posters
Page 1 of 1
Hover Over Forum/Categories
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/
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/
Re: Hover Over Forum/Categories
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.
Then add the following to your stylesheet :
When you hover the row you stuck it in, it should show up.
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.
Re: Hover Over Forum/Categories
Okay so I came up with a code to get a similar feel to it
code posted in description:
Code Posted in CSS
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.
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.
Re: Hover Over Forum/Categories
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 :
By :
Find and remove :
Find and remove :
Find :
and add this before it :
Save and publish.
Then add this to your stylesheet :
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.
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;
}
Re: Hover Over Forum/Categories
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:
The Category Pasted Code:
Then I also took and changed the forum name to <strong></strong>
Also here is how all the images completely look like:
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:
Re: Hover Over Forum/Categories
Most likely will want to get rid of margin and replace float:left; with position:absolute; then.
Then set the parent container to 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"
- 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"
Re: Hover Over Forum/Categories
Did you adjust the top offset ? Like this :
- Code:
.forumStats {
position:absolute;
top:50px; /* top offset */
left:10px; /* left offset */
width:250px;
}
Re: Hover Over Forum/Categories
it worked on my mock site but on this site it isn't working
http://fairytailonline-rp.forumotion.com/
the Template Code:
The CSS CODE:
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}');">
</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;
}
Re: Hover Over Forum/Categories
I see this :
Are you view a template preview or cached version ? ( try refreshing )
Are you view a template preview or cached version ? ( try refreshing )
Re: Hover Over Forum/Categories
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.
I tried to force a wrap didn't work I tried adjusting the width it won't budge.
Re: Hover Over Forum/Categories
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 :
At the moment the width is automatically calculated based on the parent container's width. So it'll resize depending on your resolution.
- 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.
Re: Hover Over Forum/Categories
Yeah, that's probably a bad idea.
Another thing I can think of would be to try and just center the content to share the empty space :
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.
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.
Re: Hover Over Forum/Categories
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
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
Re: Hover Over Forum/Categories
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?
anyway to get the effect to happen to just the main forums and not the sub forums?
Re: Hover Over Forum/Categories
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
}
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum