Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Not a member yet? Click here to register.
Forgot Password?

The width of the left and right panels in the bootstrap.

Asked Modified Viewed 2,613 times
D
djdandi
D
  • Senior Member, joined since
  • Contributed 298 posts on the community forums.
  • Started 99 threads in the forums
  • Started this discussions
asked
Senior Member

Again, I have a problem as I do to the left of the panel had a width of 2 and 4 on the right width.
0 replies

11 posts

C
Chan
C
Chan 0
Lead Developer of PHP-Fusion
  • Super Admin, joined since
  • Contributed 3,841 posts on the community forums.
  • Started 232 threads in the forums
  • Answered 6 questions
answered
Super Admin

You need to give me more than that to respond.

What did you do? Left on/off, Right on/off ?
0 replies
D
djdandi
D
  • Senior Member, joined since
  • Contributed 298 posts on the community forums.
  • Started 99 threads in the forums
  • Started this discussions
answered
Senior Member

The point is that I want to have the width of the left panel, eg. 200px and the right example. 400px.
0 replies
C
Chan
C
Chan 0
Lead Developer of PHP-Fusion
  • Super Admin, joined since
  • Contributed 3,841 posts on the community forums.
  • Started 232 threads in the forums
  • Answered 6 questions
answered
Super Admin

Don't use the functions ;) Those are there for you to study how Bootstrap col-???-1-12 works.

Try this logic.



// Adjust here
$default_left_size = 2;
$default_right_size = 4;

// If has left panel, use default size, if not is 0
$left_size = defined("LEFT") ? $default_left_size : 0;

// If has right panel, use default size, if not is 0
$right_size= defined("RIGHT") ? $default_right_size : 0;

// Center size is 12 - left and right size
$center_size = 12 - $left_size - $right_size;


// Now implement the total of 12 into position

echo "<div class='row'>\n";
if (defined("LEFT")) echo "<div class='col-xs-12 col-sm-$left_size'>".LEFT."</div>";
echo "<div class='col-xs-12 col-sm-$center_size'>".U_CENTER . CONTENT . L_CENTER."</div>";
if (defined("RIGHT")) echo "<div class='col-xs-12 col-sm-$right_size'>".RIGHT."</div>";
echo "</div>";


The Grid is divide into device min and max screen pixel.

Basic understanding is Bootstrap divides a column width by % instead of px. Because the smallest screen is 1px - 768px (assume a Watch), and the biggest screen will be about 9999999px wide (assuming a Cinema). If you use px, it becomes either too big or too small. Responsive is universal. So most logic is use % of screen. That is the trick behind design a responsive template.

The Grid is divide into 12 units,
1 = 1/12 %
2 = 2/12 %
3 = 3/12 %
4 = 4/12% ( i.e. 1/4%, i.e 25%)
5 = 5/12%
...
12 = 12/12% (i.e 1 or 100%)

Now:

col - {device screen size range} - {integer}

col-XS-12 is On Watch is 100% width but col-SM-4 is on iPAD is 25% width. == <div class='col-xs-12 col-sm-4'> <--- CSS Class

Go over the bootstrap documentation to see it's implementation and memorize all of their css classes and how to use their components. It's very simple in fact.

"400px" is too big for a watch and will be very very small on HDTV.
0 replies
D
djdandi
D
  • Senior Member, joined since
  • Contributed 298 posts on the community forums.
  • Started 99 threads in the forums
  • Started this discussions
answered
Senior Member

Chan does not understand. I want to loewe panels have a width of col-xs-3 and the right width col-xs-2
s5.postimg.org/9g2zf31tz/image.png
0 replies
D
djdandi
D
  • Senior Member, joined since
  • Contributed 298 posts on the community forums.
  • Started 99 threads in the forums
  • Started this discussions
answered
Senior Member

Chan understand thank you
0 replies
D
djdandi
D
  • Senior Member, joined since
  • Contributed 298 posts on the community forums.
  • Started 99 threads in the forums
  • Started this discussions
answered
Senior Member

One more after using your code on the main page is all about but I have a page where they are off the left and right panels of the central part of the page does not display the entire width.
0 replies
C
Chan
C
Chan 0
Lead Developer of PHP-Fusion
  • Super Admin, joined since
  • Contributed 3,841 posts on the community forums.
  • Started 232 threads in the forums
  • Answered 6 questions
answered
Super Admin

Not sure why is not working there, but try -
 defined("LEFT") && !empty(LEFT)
?
0 replies
D
djdandi
D
  • Senior Member, joined since
  • Contributed 298 posts on the community forums.
  • Started 99 threads in the forums
  • Started this discussions
answered
Senior Member

Does not help
Home ok
http://brzanek.webd.pl/PHPFusion2016/homepage
Another site with the exception of the left and right of the panel should display the entire width and is not.
http://brzanek.webd.pl/PHPFusion2016/zjawiska_mapa/grad.php

theme.php
<?php
/*-------------------------------------------------------+
| PHPFusion Content Management System
| Copyright (C) PHPFusion Inc
| https://www.php-fusion.co.uk/
+--------------------------------------------------------+
| Filename: theme.php
| Author: Frederick MC Chan (Chan)
+--------------------------------------------------------+
| This program is released as free software under the
| Affero GPL license. You can redistribute it and/or
| modify it under the terms of this license which you
| can read by viewing the included agpl.txt or online
| at www.gnu.org/licenses/agpl.html. Removal of this
| copyright header is strictly prohibited without
| written permission from the original author(s).
+--------------------------------------------------------*/
if (!defined("IN_FUSION")) { die("Access Denied"); }

define("THEME_BULLET", "&middot;");
require_once INCLUDES."theme_functions_include.php";
include "functions.php";

function render_page($license = FALSE) {
   //add_handler("theme_output");
   global $settings, $main_style, $locale, $userdata, $aidlink, $mysql_queries_time;
   // set variables
   $brand = $settings['sitebanner'] ? "<img title='".$settings['sitename']."' style='margin-left:-20px; width:100%; margin-top:-35px;' src='".BASEDIR.$settings['sitebanner']."' />" : $settings['sitename'];
   // set size - max of 12 min of 0
   $side_grid_settings = array(
      'desktop_size' => 2,
      'laptop_size' => 3,
      'tablet_size' => 3,
      'phone_size' => 12,
   );
   $side_grid_settings1 = array(
      'desktop_size' => 3,
      'laptop_size' => 3,
      'tablet_size' => 3,
      'phone_size' => 12,
   );

   // Render Theme
   echo "<div class='container p-t-20 p-b-20'>\n";
   echo "<div class='display-inline-block m-t-20 m-l-20' style='max-width: 280px;'>";
   echo $brand;
   echo "</div>\n";
   echo showsublinks('', '', array('logo'=>$brand))."\n";
   // row 1 - go for max width
   if (defined('AU_CENTER') && AU_CENTER) echo "<div class='row'>\n<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>".AU_CENTER."</div>\n</div>";
   // row 2 - fluid setitngs depending on panel appearances
// Adjust here
$default_left_size = 2;
$default_right_size = 4;

// If has left panel, use default size, if not is 0
$left_size = defined("LEFT") ? $default_left_size : 0;

// If has right panel, use default size, if not is 0
$right_size= defined("RIGHT") ? $default_right_size : 0;

// Center size is 12 - left and right size
$center_size = 12 - $left_size - $right_size;


// Now implement the total of 12 into position

echo "<div class='row'>\n";
if (defined("LEFT")) echo "<div class='col-xs-12 col-sm-$left_size'>".LEFT."</div>";
echo "<div class='col-xs-12 col-sm-$center_size'>".U_CENTER . CONTENT . L_CENTER."</div>";
if (defined("RIGHT")) echo "<div class='col-xs-12 col-sm-$right_size'>".RIGHT."</div>";
echo "</div>";

//defined("LEFT") && !empty(LEFT)

   // row 3
   if (defined('BL_CENTER') && BL_CENTER) echo "<div class='row'>\n<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>".BL_CENTER."</div>\n</div>";
   // footer
   echo "<hr>\n";
   echo "<div class='row'>\n<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>";
   echo "<span>".stripslashes(strip_tags($settings['footer']))."</span><br/>\n";
   echo "<span>".showcopyright()."</span><br/>\n";
   echo "<span>Bootstrap Theme by <a href='http://www.php-fusion.co.uk' target='_blank'>PHPFusion Inc</a></span><br/>\n";
   echo "<span>";
   if ($settings['visitorcounter_enabled']) echo showcounter();
   if ($settings['rendertime_enabled'] == '1' || $settings['rendertime_enabled'] == '2') {
      if ($settings['visitorcounter_enabled']) {
         echo " | ";
      }
      echo showrendertime();
   }
   echo "</span>\n";
   echo "</div>\n</div>\n";
   echo "</div>\n";
}
0 replies
C
Chan
C
Chan 0
Lead Developer of PHP-Fusion
  • Super Admin, joined since
  • Contributed 3,841 posts on the community forums.
  • Started 232 threads in the forums
  • Answered 6 questions
answered
Super Admin


//add_handler("theme_output");
   global $settings, $main_style, $locale, $userdata, $aidlink, $mysql_queries_time;

$default_left_size = 2;
$default_right_size = 4;

// If has left panel, use default size, if not is 0
$left_size = defined("LEFT") && !empty(LEFT) ? $default_left_size : 0;

// If has right panel, use default size, if not is 0
$right_size= defined("RIGHT") && !empty(RIGHT) ? $default_right_size : 0;

// Center size is 12 - left and right size
$center_size = 12 - $left_size - $right_size;

0 replies
D
djdandi
D
  • Senior Member, joined since
  • Contributed 298 posts on the community forums.
  • Started 99 threads in the forums
  • Started this discussions
answered
Senior Member

After entering this code, nothing appears.
http://brzanek.webd.pl/PHPFusion2016/homepage6/homepage
0 replies
C
Chan
C
Chan 0
Lead Developer of PHP-Fusion
  • Super Admin, joined since
  • Contributed 3,841 posts on the community forums.
  • Started 232 threads in the forums
  • Answered 6 questions
answered
Super Admin

Revert to the old codes.. See the adjustment I done and what changed, don't simply cut and paste... I'm guiding and you need to verify my approach.

See line 77 for BL_CENTER if defined and not empty.
The reason your center is not full size because LEFT was defined but is empty.

White page is because we got a php error. Php error not displayed. Apache need to turning php display error on to see it.
0 replies

Category Forum

Themes Support

Labels

None yet

Statistics

  • Views 0 views
  • Posts 11 posts
  • Votes 0 votes
  • Topic users 2 members

2 participants

C
C
Chan 0
Lead Developer of PHP-Fusion
  • Super Admin, joined since
  • Contributed 3,841 posts on the community forums.
  • Started 232 threads in the forums
  • Answered 6 questions
D
D
  • Senior Member, joined since
  • Contributed 298 posts on the community forums.
  • Started 99 threads in the forums
  • Started this discussions

Notifications

Track thread

You are not receiving notifications from this thread.

Related Questions

Not yet