Go Back   vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
Reload this Page [HOW TO - vB4] Making Boxes fashion Sidebar (CSS)
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
[HOW TO - vB4] Making Boxes fashion Sidebar (CSS)
Allan's Avatar
Allan
Join Date: Jun 2003
Posts: 1,513

 

France
Show Printable Version Email this Page Subscription
Allan Allan is offline 02-08-2010, 10:00 PM
This article create a box fashion sidebar (CSS)

DEMO: http://www.vbulletin-ressources.com/forum/forum.php (for the moment of course)
  • In the "FORUMHOME" template, find:
PHP Code:
<vb:if condition="$show['sidebar']"> 
  • Add above:
PHP Code:
<!-- Bloc Perso Allan -->
<br />
<div id="bloc_perso">
        <ul>
            <li>
    <div class="block smaller">
        <div class="blocksubhead">
             <a class="collapse" style="position : static" id="collapse_blocperso" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse_40b.png" alt="" border="0" /></a>
            <img src="images/site_icons/event-alert.png" alt="" />
            <span class="blocktitle">Information Area</span>
        </div>
        <div id="blocperso" class="blockbody floatcontainer">
            <ul class="blockrow">
                <li class="avatarcontent floatcontainer">
                    <div align="center">
                    <a href="http://www.test1.com">test1</a>&nbsp;&nbsp;<img src="images/misc/pucen.png" border="0" alt="" />&nbsp;&nbsp;<a href="http://www.test2.com">test2</a>
                    </div>
                                </li>    
            </ul>
        </div>
    </div>
    <div class="underblock"></div>
</li>
        </ul>
    </div>
<!-- Bloc Perso Allan --> 
  • In the "forumhome.css", add to the end:
PHP Code:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* BLOC PERSO ALLAN */
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#bloc_perso {
    float:left;
    width:{vb:stylevar forum_sidebar_width};
    padding:17px 0;
    margin-bottom:3em;

}
#bloc_perso .block {
    margin-bottom:4px;
    padding:6px;
    background:{vb:stylevar forum_sidebar_background};
    -moz-border-radius-top{vb:stylevar left}:{vb:stylevar border_radius};
    -moz-border-radius-top{vb:stylevar right}:{vb:stylevar border_radius};
    -webkit-border-top-left-radius: {vb:stylevar border_radius};
    -webkit-border-top-right-radius: {vb:stylevar border_radius};
}
#bloc_perso .blockbody {
    color: {vb:stylevar forum_sidebar_content_color};
    background:{vb:stylevar forum_sidebar_content_background.backgroundColor};
    -moz-border-radius:{vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    padding:0;
    border:{vb:stylevar forum_sidebar_content_border};
}
#bloc_perso .blockrow {
    border-top:1px solid {vb:stylevar forum_sidebar_content_background.backgroundColor}; /* makes the bevel look part of the background */
    -moz-border-radius:{vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    background:{vb:stylevar forum_sidebar_content_background};
    _background-image: none;
}
#bloc_perso .underblock {
    height:{vb:stylevar forum_sidebar_content_separator_height};
    background:{vb:stylevar forum_sidebar_content_separator_background};
}

#bloc_perso .blockrow,
#bloc_perso .blocksubhead {
    padding:10px 6px 10px 6px;
    color: {vb:stylevar forum_sidebar_header_color};
}
#bloc_perso .blocksubhead {
    background:transparent none;
    height:{vb:math {vb:stylevar mid_fontSize}*{vb:stylevar line_height} + 2px };
    padding: 5px 6px;
    border:none;
    outline:none;
    font-weight:bold;
}
#bloc_perso > ul {
    background-color:{vb:stylevar forum_sidebar_background.backgroundColor};
    border:{vb:stylevar forum_sidebar_border};
    -moz-border-radius:{vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    -moz-box-shadow:-2px 2px 2px {vb:stylevar shadow_color};
    float:{vb:stylevar left};
    width:100%;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* BLOC PERSO ALLAN */
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
  • Upload this image "pucen.png" to "../images/misc/"
Attached Images
File Type: jpg screen1.jpg (101.0 KB, 0 views)
File Type: jpg screen2.jpg (89.4 KB, 0 views)
Reply With Quote
  #2  
Old 02-09-2010, 02:47 PM
Allan's Avatar
Allan Allan is offline
 
Join Date: Jun 2003
Location: France
Posts: 1,513
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Public now.
Reply With Quote
  #3  
Old 02-09-2010, 02:55 PM
Forum Lover Forum Lover is offline
 
Join Date: Jun 2007
Location: Sydney
Posts: 503
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default


How can we make it collapsible, please?
Reply With Quote
  #4  
Old 02-09-2010, 05:39 PM
Allan's Avatar
Allan Allan is offline
 
Join Date: Jun 2003
Location: France
Posts: 1,513
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Quote:
Originally Posted by Forum Lover View Post


How can we make it collapsible, please?
Collapse added
Reply With Quote
  #5  
Old 02-09-2010, 06:50 PM
Forum Lover Forum Lover is offline
 
Join Date: Jun 2007
Location: Sydney
Posts: 503
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thanks. Allan.
Reply With Quote
  #6  
Old 02-10-2010, 02:28 PM
xman_79's Avatar
xman_79 xman_79 is offline
 
Join Date: Jun 2006
Location: Romania
Posts: 65
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thank you Allan , very nice .
Merci ...
Reply With Quote
  #7  
Old 02-12-2010, 12:14 PM
betty02 betty02 is offline
 
Join Date: May 2005
Posts: 75
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Really love this just don't know what to use it for haha!
Reply With Quote
  #8  
Old 02-15-2010, 03:26 AM
darren1981 darren1981 is offline
 
Join Date: Oct 2008
Posts: 115
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default
Thanks for this Allan, but would it not be much easier just to use a widget ?
Reply With Quote
Reply

« Previous Thread | Next Thread »

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 10:54 AM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.04351 seconds
  • Memory Usage 2,329KB
  • Queries Executed 22 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (3)bbcode_php
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_article
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (8)post_thanks_box
  • (8)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (8)post_thanks_postbit_info
  • (7)postbit
  • (2)postbit_attachment
  • (8)postbit_onlinestatus
  • (8)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 
Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete