Responsive layout WB

WebsiteBaker Support (2.8.x) > Templates, Menus & Design

(1/3) > >>

G4:
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: ---<?php page_content(1); ?>
<?php page_content(2); ?>
<?php page_content(3); ?>
<?php page_content(4); ?>
--- End code ---

Subpages

--- Code: ---<?php page_content(1); ?>
<?php page_content(2); ?>
--- End code ---

instantflorian:
Hi,

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

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: ---<?php if (PAGE_ID==1) { ?>
...slider html/js...
<?php } ?>

--- End code ---

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:
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: ---<?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(); ?>" />

<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" />

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

<?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>


<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>
--- End code ---

instantflorian:
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:
Ok, thanks!

Navigation

[0] Message Index

[#] Next page

Go to full version