How to Easily Smooth Board Width Changer On IP. Board

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 ).

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!

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:

IP.Board Tutorials

• How to Remove "License Key Missing" Warning in ACP New Tutorial 2015
• [ Tutorial ] How to change the default mobile skin in 3.4.x
• How to Easily Disable Fast Reply On IP. Board
• Show Forum Description Inside Tooltips On IP. Board
• [Tutorial] Creating Some Pretty BBcode On IP. Board
• Forum Hover Colour On IP. Board
• How to Easily Arrange Subforum In 3 Columns On IP. Board
• How to Make Horizontal Userinfopane On IP.Board
• How to Easily Make-Block Ad | Advertising Space On IP. Board
• Add Twitter, Facebook Icons On Header IP. Board
• Protect Nulled IP Board from IPS
• Add Charm Bar On IP Board
• How To Easily Edit The Copyright Text For IP On Board
• IPB 3.4.x Missing Editor Box On IP Board
• [App] Tutorials On IP. Board
• How to Easily Smooth Scroll To Top Button On IP. Board
• How To Easily Edit Shoutbox Ajax Refresh Settings On IP Board
• Group Format (Hook) Fix for 3.4.x On IP Board
• [Lesson] Registration arrangement On IP. Board
• How To Easily Show Files Images On IP.Board Download
• How To Auto Add Links Into Code Tags On IP.Board
• How To Make Simple Validating Message On IP. Board
• How to Easily Install A Skin On IP. Board
• Clickable Custom Profile Fields On IP.Board