Home » IP.Board Tutorials » How to Easily Smooth Board Width Changer On IP. Board

Wednesday, September 25, 2013

How to Easily Smooth Board Width Changer On IP. Board

10:00 AM  

How to Easily Smooth Board Width Changer On IP. Board. I was originally going to make a hook for this, and I got quite far with it too. But, I ran into a few problems and just couldn't get it to work. So I'm making a tutorial for it.

Please note: This was done on the default IPB skin. This may be different for you, depending on the skin you're using.

  • Go to your ACP
  • Look & Feel
  • Your Skin
  • globalTemplate.

Find this:

        {parse template="includeJS" group="global" params="$jsModules"}
        {parse template="includeFeeds" group="global" params="$documentHeadItems"}
        {parse template="includeRTL" group="global" params=""}        
        {parse template="includeVars" group="global" params="$header_items"}


Add this code above it: 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src="{style_images_url}/boardwidth.js"></script>


Next go to :
  • Go to your ACP
  • Look & Feel
  • Your Skin
  • CSS
  • ipb_styles.css.

Find this:

#content, .main_width {
    margin: 0 auto;
    /* Uncomment for fixed */
    /*width: 980px;*/
    /* Fluid */
    width: 87% !important;
       min-width: 960px;
}


Change it to this:

#content, .main_width {
    margin: 0 auto;
    /* Uncomment for fixed */
    width: 980px;
    /* Fluid */
    /*width: 87% !important;*/
       min-width: 960px;
}


And save.

Next Go back to your globalTemplate and find this:

<if test="showhomeurl:|:$this->settings['home_url'] AND $this->settings['home_name']">


Add this code above it: 

<li class='right widthSwitch'><a href="#">Change Width</a></li>


Note: You can place a link for this anywhere you want, I'm just using this location for tutorial purposes.


Next Now, you're going to code and paste the following code into Notepad or anything you prefer, and save it as "boardwidth.js".
Here is the code:

/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
jQuery.cookie=function(name,value,options){if(typeof value!="undefined"){options=options||{};if(value===null){value="";options.expires=-1;}var expires="";if(options.expires&&(typeof options.expires=="number"||options.expires.toUTCString)){var date;if(typeof options.expires=="number"){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}else{date=options.expires;}expires="; expires="+date.toUTCString();}var path=options.path?"; path="+(options.path):"";var domain=options.domain?"; domain="+(options.domain):"";var secure=options.secure?"; secure":"";document.cookie=[name,"=",encodeURIComponent(value),expires,path,domain,secure].join("");}else{var cookieValue=null;if(document.cookie&&document.cookie!=""){var cookies=document.cookie.split(";");for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+"=")){cookieValue=decodeURIComponent(cookie.substring(name.length+1));break;}}}return cookieValue;}};

jQuery.noConflict();
jQuery(document).ready(function($){

    // Board Width Changer
    var widthElem = '#content, .main_width'
    var    elemProp = $(widthElem).css('width')
    var    fluidWidth = 87;

    if( $.cookie('boardWidth') !== null ) {
        if ( $.cookie('boardWidth') == 'fluid' ) {
            $(widthElem).css('width', fluidWidth + '%');
         }
        if ( $.cookie('boardWidth') == 'fixed' ) {
            $(widthElem).css('width', elemProp);
        }
    }

    $('.widthSwitch a').click(function() {
        if ( $(widthElem).css('width') == elemProp ) {
            $(widthElem).animate({ width: fluidWidth + '%' });
            $.cookie('boardWidth', 'fluid');
        } else {
            $(widthElem).animate({ width: elemProp });
            $.cookie('boardWidth', 'fixed');
        }
        return false;
    });
});



Then go to
  • your FTP
  • public_html 
  • public
  • style_images 
  • (Your skin name)
  • Then upload the boardwidth.js file in that folder.


 And you're done!
A smooth board width changer, made with jQuery.
This saves a cookie in your web browser, so each time you visit, it will be the same as the last time you visited ( until you clear your cookies ).

How to Easily Smooth Board Width Changer On IP. Board


Remember that the instructions may be a bit different depending on what skin you're using.
If you need help adding this to your board, just leave me a PM and I will reply whenever I read it.


It is How to Easily Smooth Board Width Changer On IP. Board, Good Luck!

thumbnail Title: How to Easily Smooth Board Width Changer On IP. Board
Posted by:Stuard Van
Published :2013-09-25T10:00:00-07:00
Rating: 5
Reviewer: 5 Reviews
 How to Easily Smooth Board Width Changer On IP. Board
Share :
Related articles:

0 comments :

Post a Comment

Subscribe to: Post Comments ( Atom )