vb.org Archive
Page 2 of 8 1 2 34 Last »
Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4 Articles (https://vborg.vbsupport.ru/forumdisplay.php?f=242)
-   -   [HOW TO - vB4] Making Boxes Collapsible (https://vborg.vbsupport.ru/showthread.php?t=221565)

cellarius 01-02-2010 07:17 AM
Quote:
Originally Posted by SledgeHead (Post 1944204)
Awesome! How would I go about adding a border and changing the background color? Also, I noticed the collapse button isn't centered vertically, but instead it touches the bottom. How do I adjust this?
Coloring or bordering the box has nothing to do with this article's topic - you do it using .css, just as you would do for any other box. Go grab some basic .css tutorial on how to do this, explaining this here would lead too far, really.
To change positioning, you need to add an additional class as described in the postings right before yours to override the settings in collapse class.

winstone 01-04-2010 03:11 AM
Quote:
Originally Posted by TheWindows7Site (Post 1941187)
Do I have to use "class="collapse"" in my collapse/expand link?

Because when I do, it puts the link at the very top right of the post's and no matter where I move the link code in the template, it will always place it at the top right (near the inline moderation radio button area).
apart from adding additional class overriding the existing properties, you can also add the CSS property of "position:relative;" to the container block so the "top:10px" will apply only to the container and not the whole page

Thanks for the article.

TimberFloorAu 01-26-2010 08:57 PM
So tell me what is wrong with my code ?

Quote:
<!--yobro modified collapse bookmarks code-->
<div class="options_block_container">
<vb:if condition="$bookmarksites">
<div class="options_block">
<div class="collapse">
<a class="collapse" id="social_bookmarks_list" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse{vb:raw vbcollapse.collapseimg_bookmark_site}_40b.png" alt="" /></a>
<h4><span class="optiontitle">{vb:rawphrase bookmarks}</span></h4>
<div id="social_bookmarks_list" class="thread_info_block">
<h5 class="blocksubhead">{vb:rawphrase bookmarks}</h5>

<ul class="icon_list">{vb:raw bookmarksites}</ul>
</div>
</div></div>
</vb:if>
<!--yobro modified collapse bookmarks code-->

NLP-er 02-04-2010 11:14 AM
Example given in article forces the way how it will be displayed. I want to have collapsable blocks but without blockhead and having collapse image in place where I put it. Now it is not possible. Even if I remove classes blockhead and blockrow my collapse image is not in place where I put it but goes to right side and is inside of collapsable block (what also makes me impossible to have it collapsed by default).

So - what changes I need, to have my collapse image in place where it is set? - not moved to other one like it is now.

cellarius 02-04-2010 03:18 PM
You need to find out what css definitions make it go to the right. Use a tool like firebug for that. IIRC it is the collapsible-class that forces it to the right. Since you need that class for the collapse javascript to work, you'll need to override it.

NLP-er 02-05-2010 11:24 AM
Quote:
Originally Posted by cellarius (Post 1974738)
You need to find out what css definitions make it go to the right. Use a tool like firebug for that. IIRC it is the collapsible-class that forces it to the right. Since you need that class for the collapse javascript to work, you'll need to override it.
I was trying to override it by adding also style attribute, but I fail there. Maybe I was using wrong CSS - as I remember I was playing with position. It didn't work so I thought that maybe there is also some JS which is changing it dynamically... - do you know something about that? Maybe you know which CSS style to use to force it staying in its place?

cellarius 02-05-2010 11:39 AM
Did you try looking at it using firebug? I can manipulate positioning by modifying a.collapse img, and the javascript does not mess with positioning as far as I can tell.

voglermc 02-05-2010 02:55 PM
I'm trying to collapse my header for smaller monitors and have a cookie set so it remembers the open or closed state like VB does in its collapse buttons. It doesn't seem to work. Can anyone help me get this so it remembers the cookie?

Code:
<div id="vb4_container">

    <div id="vb4" style="width:920px"><a id="vb4_link" href="http://www.domain.org/"></a>

        <div id="vb4_content">
        <p>Our club was started as a way for ...</p>
        <ul>       
        <li><a href="http://www.domain.org/register.php">Click Here to learn MORE!</a></li>
        </ul>
        </div>

    </div>

<a id="vb4_close" href="#" onclick="
var v_vob = fetch_object('vb4_container');
if(v_vob)
{
set_cookie('vb4banner_off', v_vob.className ? '' : 1);
v_vob.className = v_vob.className ? '' : 'promo_closed';
}
return false;
"></a>

</div>
CSS CODE
Code:

/* vB4 Promo */
#vb4_container {
 background-color:#2d2d2d;
 /*margin: 0 -35px 10px;*/
 margin: 0;
 padding:10px 0 0 0;
 position:relative;
}

#vb4 {
 margin: auto;
 background: transparent url(http://www.domain.org/images/minimized/vb4_promo_bg.jpg) no-repeat 0 0;
 height:176px;
 position:relative;
}

.promo_closed #vb4 {
 margin: auto;
 background: transparent url(http://www.domain.org/images/minimized/vb4_promo_bg.jpg) no-repeat 0 -78px;
 height:176px;
 position:relative;
}

#vb4_link {
 position:absolute;
 top:0;
 left:0;
 width:580px;
 height:132px;
 outline: none;
}

#vb4_content {
 position:absolute;
 right:0;
 top:0;
 width:324px;
 background: transparent url(http://www.domain.org/images/minimized/vb4_promo_title.png) no-repeat -2px 5px;
 min-height: 64px;
}

#vb4_content p {
 font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
 margin-top:46px;
 margin-bottom:26px;
 color:#FFF;
 font-size:11px;
}

#vb4_content ul {
 margin:0px;
 padding:0;
 position:absolute;
 bottom:0;
}

#vb4_content li {
 list-style-type:none;
 display:inline;
 margin-right:10px;
}

#vb4_content li a {
 color:#dd0000;
 font-family:helvetica,sans-serif;
 font-weight:bold;
 font-size:14px;
 text-decoration:none;
 outline: none;
}

#vb4_close {
 position:absolute;
 bottom:0;
 right:0;
 background: transparent url(http://www.domain.org/images/minimized/vb4_promo_minimize.png) no-repeat 0 0;
 width: 28px;
 height: 27px;
 outline: none;

}

.promo_closed #vb4_content p {
 display:none;
}

.promo_closed #vb4 {
 height:116px;
}

.promo_closed #vb4_content {
 top:52px;
 bottom:16px;
}

#vb4_container.promo_closed {
 margin-top: -64px;
}

.promo_closed #vb4_close {
 background: transparent url(http://www.domain.org/images/minimized/vb4_promo_maximize.png);
 outline: none;
}

/* End vB4 Promo */

cellarius 02-05-2010 03:00 PM
I would think that your code collides with vB's. If you're setting your own cookie anyway, just don't use vB's collapsing method at all. That'll be probably much easier than getting this to work together.

voglermc 02-05-2010 03:20 PM
I sure could use your help!


All times are GMT. The time now is 10:29 AM.
Page 2 of 8 1 2 34 Last »
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01291 seconds
  • Memory Usage 1,751KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (2)bbcode_code_printable
  • (4)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (3)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete