Responsive layout WB

Ruud · July 22, 2014, 11:24:20 PM

Quote from: nibz on July 22, 2014, 07:49:58 PM
a bit Offtopic but Ruud your website looks great! only one small point, the menu doesn't seem to work on mobile and small screens if i click the 'hamburger icon' nothing happens.

Thanks for reporting..

This template is built upon the foundation framework, and they forgot to tell about some options you need to use to keep the mobile menu working after upgrading.
Now it is working again.

nibz · July 22, 2014, 09:57:13 PM

Nothing is wrong with using page_content multiple times with a block number.
But if you read Ruud's tutorial you will get that Ruud's approach is also meant for multiple blocks, but if you use this approach you will only need 1 template file because if you make a template in the traditional way (multiple blocks) you allways need content in every block (with surrounding wrapping div and most of the time specific CSS for that block). If you use Ruuds approach a contentblock can also be emty and the content & surrounding div will not be shown.

This way you can make a template with multiple blocks, but you don't have to fill every block in every page, and you can manage multiple layouts in one templatefile.

daydreamer · July 22, 2014, 09:30:46 PM

What's wrong with just using

Code Select

<?php page_content(1); ?>
<?php page_content(2); ?>
<?php page_content(3); ?>
<?php page_content(4); ?>

nibz · July 22, 2014, 07:49:58 PM

Quote from: Ruud on July 22, 2014, 02:38:08 PM
Have a look at:
http://wbhelp.org/tips-and-tricks/2014/multiple-columns-in-a-template/

a bit Offtopic but Ruud your website looks great! only one small point, the menu doesn't seem to work on mobile and small screens if i click the 'hamburger icon' nothing happens.

G4 · July 22, 2014, 05:55:24 PM

Quote from: Ruud on July 22, 2014, 02:38:08 PM
Have a look at:
http://wbhelp.org/tips-and-tricks/2014/multiple-columns-in-a-template/

Perfect! (Hulde Ruud)

Ruud · July 22, 2014, 02:38:08 PM

Have a look at:
http://wbhelp.org/tips-and-tricks/2014/multiple-columns-in-a-template/

G4 · July 20, 2014, 10:42:27 AM

Ok, thanks!

instantflorian · July 20, 2014, 09:51:47 AM

I'm afraid I don't understand what you mean. You can use different templates for different pages - if you meant that? Just go to page options on each page and change the template.

There is no use to place several times page_content() simply one by another, because one block can contain several sections. E.g. you put <?php page_content(1)? ?> in your template, what is the main section, and the go to "manage sections" and place as many blocks as you want in the main section.

G4 · July 20, 2014, 09:17:22 AM

I have build a template thanks to Madoven. My question is how to handle content. I could place the content in different sections. In Wordpress I include different content on separate pages. This worked for me because I rather work with a HTML editor (coda) than the build-in WB editor.
So I wish to use separate documents for different pages for content, like index.php, home.php, contact.php. Is this possible?

Template:

Code Select

<?php
if (!defined('WB_PATH')) die(header('Location: ../../../index.php'));
?>
<!DOCTYPE html>
<html>
<head>
	<title><?php page_title('', '[PAGE_TITLE] | [WEBSITE_TITLE]'); ?></title>
	<link rel="icon" href="/favicon.ico" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=<?php echo defined('DEFAULT_CHARSET') ? DEFAULT_CHARSET : 'utf-8'; ?>" />
	<meta name="description" content="<?php page_description(); ?>" />
	<meta name="keywords" content="<?php page_keywords(); ?>" />	
	<!-- Styles -->
	<link rel="stylesheet" href="<?php echo TEMPLATE_DIR; ?>/bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="all" href="<?php echo TEMPLATE_DIR; ?>/style.css" />
	<!-- Google font -->
	<link href="http://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet" type="text/css">
	<style type="text/css">body{font-family: 'Noto Sans', sans-serif;}</style>
	<!-- WB -->
	<?php
	if (function_exists('register_frontend_modfiles')) {
		register_frontend_modfiles('css');
		register_frontend_modfiles('jquery');
		register_frontend_modfiles('js');
	} ?>
</head>
<body>
	<div class="container-full bgblauw paddingtop9">
		<div class="container">
			<div class="row">
				<div class="col-md-3">
					Logo
				</div>
				<div class="col-md-9">
					<nav class="navbar navbar-sub" role="navigation">
						<div class="container">
						  <div class="navbar-header">
						    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainmenu">
						      <span class="sr-only">Toggle navigation</span>
						      <span class="icon-bar"></span>
						      <span class="icon-bar"></span>
						      <span class="icon-bar"></span>
						    </button>
						  </div>
						  <div class="collapse navbar-collapse" id="mainmenu">
						    <?php show_menu2(1,SM2_ROOT,SM2_START, null,'[if(class==menu-current){<li class="active">}else{<li>}][a][menu_title]</a>','</li>','<ul class="nav navbar-nav">','</ul>');?>
						  </div>
						</div>
					</nav>
				</div>
			</div>
		</div>
	</div>
	

	
	<div class="container paddingtop5">
		<div class="row">
			<div class="col-md-12">
				<?php page_content(); ?>
			</div>
		</div>
	</div>


	<!-- Bootstrap files -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="<?php echo TEMPLATE_DIR; ?>/bootstrap/js/bootstrap.min.js"></script>
<?php
if (function_exists('register_frontend_modfiles_body')) { register_frontend_modfiles_body(); }
?>
</body>
</html>

instantflorian · July 20, 2014, 09:01:49 AM

Hi,

I hope you don't expect that someone will develop a responsive WB template for you just for fun?

Anyway, the first step is to build a static HTML page layout, using common responsive CSS frameworks or grids. (You don't need the bloated bootstrap if you just want to build responsive pages). Put some dummy content into to see how it will look like.
Then you include a responsive slider (maybe jQuery based), if you don't like WB's minislider module.
Until here the development is completely independent from WB, so you could also take any free or commercial HTML template (but of course no template for other CMS, because it would be much affort to re-simplify them for using them as WB templates).

Then, you replace the dummy content with the page_content stuff, add all the other things which are needed for a WB template (see documentation or existing templates).

Actually you need only one template for the homepage and the following pages.
So there are different options:
1) Using Minislider

2) Or, you could use a droplet or a lib_jquery / libraryadmin plugin, which is called by a droplet in the first section of the homepage. (library_admin and lib_jquery are modules which have to be installed, the can be found here.)

3) Installing the module "Code2" and put the needed code in a code2 html section

4) If you "hard code" the silder in the template, this can be done like this:

Code Select


<?php if (PAGE_ID==1) { ?>
...slider html/js...
<?php } ?>

So the slider is only shown on the page with the ID 1, what is usually the homepage. If the homepage has not the ID 1, change the code accordingly.

hth
_florian.

G4 · July 19, 2014, 08:31:01 PM

What is the best, or correct way to code a WB responsive template with different pages and content.

image included in this message

Is this way an option

Front page

Code Select

<?php page_content(1); ?>
<?php page_content(2); ?>
<?php page_content(3); ?>
<?php page_content(4); ?>

Subpages

Code Select

<?php page_content(1); ?>
<?php page_content(2); ?>

News:

Responsive layout WB

daydreamer

instantflorian

instantflorian