Re: ImpressCMS 4-col themes for dummies (me) - basics and install in 1.3.10

Posted by Walkingnumber on 1516289895
This is the Bootstr. 303 I have in theme.html, is this right?

<!DOCTYPE html>

<html lang="<{$icms_langcode}>">
<!--<![endif]-->
<head>
<!-- Theme name -->
<{assign var=theme_name value=$xoTheme->folderName}>
<!-- Directory html files -->
<{assign var=theme_name value=$xoTheme->folderName|cat:'/templates'}>
<title><{if $icms_pagetitle !=''}><{$icms_pagetitle}> : <{/if}><{$icms_sitename}></title>
<meta charset="<{$icms_charset}>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="<{$icms_meta_robots}>" />
<meta name="keywords" content="<{$icms_meta_keywords}>" />
<meta name="description" content="<{$icms_meta_description}>" />
<meta name="rating" content="<{$icms_meta_rating}>" />
<meta name="author" content="<{$icms_meta_author}>" />
<meta name="copyright" content="<{$icms_meta_copyright}>" />
<meta name="generator" content="ImpressCMS" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="<{$icms_imageurl}>css/bootstrap.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="<{$icms_imageurl}>css/custom.css">
<link rel="shortcut icon" type="image/ico" href="<{$icms_imageurl}>favicon.ico" />
<link rel="icon" type="image/png" href="<{$icms_imageurl}>icon.png" />
<{$icms_module_header}>
<script src="<{$icms_imageurl}>js/libs/bootstrap.min.js"></script>
<script src="<{$icms_imageurl}>js/script.js"></script>
</head>
<body>
<{if $xoBlocks.canvas_left and $xoBlocks.canvas_right}>
<{assign var=columns_layout value='col-md-6'}>
<{assign var=block_layout value='col-md-6'}>
<{elseif $xoBlocks.canvas_left or $xoBlocks.canvas_right}>
<{assign var=columns_layout value='col-md-9'}>
<{assign var=block_layout value='col-md-6'}>
<{else}>
<{assign var=columns_layout value='col-md-12'}>
<{assign var=block_layout value='col-md-6'}>
<{/if}>
<div class="container">
<div class="row">
<div class="col-md-7">
<a class="logo" href="<{$icms_url}>" title=""><img src="<{$icms_imageurl}>img/logo.png" class="img-responsive" alt="<{$icms_sitename}>" /></a>
</div>
<div class="col-md-5 slogan">
<{$icms_slogan}>
</div>
</div>

<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<{$icms_url}>"><{$smarty.const.THEME_HOME}></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="<{if $icms_dirname=='system'}>active<{/if}>"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Link1<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li class="divider"></li>
<ul class="nav nav-list"><li class="dropdown-header">Nav header</li></ul>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="<{$icms_url}>">Link2</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Link3<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
<li><a href="#">Link7</a></li>
<li><a href="#">Link8</a></li>
<li class="divider"></li>
<ul class="nav nav-list"><li class="dropdown-header">Nav header</li></ul>
<li class="dropdown-submenu">
<a href="#">Sub menu</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link 1</a></li>
<li><a tabindex="-1" href="#">Second level link 2</a></li>
<li><a tabindex="-1" href="#">Second level link 3</a></li>
<li><a tabindex="-1" href="#">Second level link 4</a></li>
<li><a tabindex="-1" href="#">Second level link 5</a></li>
</ul>
</li>
</ul>
</li>
<form style="margin-left: 10px;margin-right: 10px;padding-bottom: 8px;padding-top: 8px;" action="<{$icms_url}>/search.php" class="navbar-left">
<input type="text" placeholder="<{$smarty.const.THEME_SEARCH}>" class="form-control" name="query" />
<input type="hidden" name="action" value="results" />
</form>
</ul>
<ul class="nav navbar-nav navbar-right">
<{if !$icms_isuser}>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><{$smarty.const.THEME_PSEUDO}><b class="caret"></b></a>
<ul class="dropdown-menu">
<form style="margin-left: 10px;margin-right: 10px;padding-bottom: 8px;padding-top: 8px;" action="<{$icms_url}>/user.php" method="post" class="form-signin navbar-left">
<input type="text" placeholder="<{$smarty.const.THEME_DESC_PSEUDO}>" class="form-control" name="uname" />
<input type="password" placeholder="<{$smarty.const.THEME_DESC_PASSWORD}>" class="form-control" name="pass" />
<{if $rememberme}>
<input type="checkbox" name="rememberme" value="On" /><{$lang_rememberme}>
<{/if}>
<input type="hidden" name="icms_redirect" value="<{$icms_requesturi}>" />
<input type="hidden" name="op" value="login" />
<button class="btn btn-primary btn-block" type="submit"><{$smarty.const.THEME_PSEUDO}></button>
</form>
<li class="divider"></li>
<li><a href="<{$icms_url}>/user.php#lost" title=""><span class="glyphicon glyphicon-warning-sign" style="padding-right:5px;"></span> <{$smarty.const._MB_SYSTEM_LPASS}></a></li>
<li><a href="<{$icms_url}>/register.php" title="<{$smarty.const.THEME_REGISTER}>"><span class="glyphicon glyphicon-user" style="padding-right:5px;"></span> <{$smarty.const.THEME_REGISTER}></a></li>
</ul>
</li>
<{/if}>
<{if $icms_isuser}>
<div class="btn-group" style="margin-left: 10px;margin-right: 10px;padding-bottom: 8px;padding-top: 8px;">
<a href="<{$icms_url}>/user.php" role="button" class="btn btn-default"><span class="glyphicon glyphicon-user" style="padding-right:5px;"></span> <{$icms_uname}></a>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="<{$icms_url}>/edituser.php"><span class="glyphicon glyphicon-pencil" style="padding-right:5px;"></span> Edit Profile</a></li>
<li><a href="<{$icms_url}>/edituser.php?op=avatarform"><span class="glyphicon glyphicon-camera" style="padding-right:5px;"></span> My Avatar</a></li>
<li><a href="<{$icms_url}>/notifications.php"><span class="glyphicon glyphicon-envelope" style="padding-right:5px;"></span> <{$smarty.const.THEME_NOTIFICATION}></a></li>
<li><{xoInboxCount assign=pmcount}><{if $pmcount}><a href="<{xoAppUrl viewpmsg.php}>" title="<{$smarty.const.THEME_INBOX}> <{$pmcount}> <{$smarty.const.THEME_NOTREAD}>"><span class="glyphicon glyphicon-comment" style="padding-right:5px;"></span> <{$smarty.const.THEME_INBOX}> <span class="badge badge-info"><{$pmcount}></span></a><{else}><a href="<{xoAppUrl viewpmsg.php}>" title="<{$smarty.const.THEME_INBOX}>"><span class="glyphicon glyphicon-comment" style="padding-right:5px;"></span> <{$smarty.const.THEME_INBOX}></a><{/if}></li>
<li class="divider"></li>
<li><a href="<{$icms_url}>/admin.php"><span class="glyphicon glyphicon-wrench" style="padding-right:5px;"></span> <{$smarty.const.THEME_ADMIN}></a></li>
<li><a href="<{$icms_url}>/user.php?op=logout"><span class="glyphicon glyphicon-off" style="padding-right:5px;"></span> <{$smarty.const.THEME_LOGOUT}></a></li>
</ul>
</div>
<{/if}>
</ul>
</div>

</div>
<!-- End Nav-bar -->
<!-- Example row of columns -->
<div class="content-main">
<{if $xoBlocks.slider}>
<{include file="$theme_name/slider.html"}>
<{/if}>
<div class="row">
<{if $xoBlocks.canvas_left}>
<div class="col-md-3">
<div class="well">
<{foreach item=block from=$xoBlocks.canvas_left}>
<div class="infobox">
<h4><{$block.title}></h4>
<div class="contnt"><{$block.content}></div>
</div>
<{/foreach}>
</div>
</div>
<{/if}>
<div class="<{if $columns_layout}><{$columns_layout}><{/if}>">
<{if $xoBlocks.page_topcenter}>
<{foreach item=block from=$xoBlocks.page_topcenter}>
<div class="row">
<div class="col-md-12">
<h2><{$block.title}></h2>
<div class="contnt"><{$block.content}></div>
</div>
</div>
<{/foreach}>
<{/if}>
<{if $xoBlocks.page_topleft or $xoBlocks.page_topright}>
<div class="row">
<{foreach item=block from=$xoBlocks.page_topleft}>
<div class="<{if $columns_layout}><{$block_layout}><{/if}>">
<h4><{$block.title}></h4>
<div class="contnt"><{$block.content}></div>
</div>
<{/foreach}>
<{foreach item=block from=$xoBlocks.page_topright}>
<div class="<{if $columns_layout}><{$block_layout}><{/if}>">
<h4><{$block.title}></h4>
<div class="contnt"><{$block.content}></div>
</div>
<{/foreach}>
</div>
<{/if}>
<{if $icms_contents}>
<div id="xo-content"><{$icms_contents}></div>
<{/if}>
<{if $xoBlocks.page_bottomcenter}>
<{foreach item=block from=$xoBlocks.page_bottomcenter}>
<div class="row">
<div class="col-md-12">
<h2> <{$block.title}></h2>
<div class="contnt"><{$block.content}></div>
</div>
</div>
<{/foreach}>
<{/if}>
<{if $xoBlocks.page_bottomleft or $xoBlocks.page_bottomright}>
<div class="row">
<{foreach item=block from=$xoBlocks.page_bottomleft}>
<div class="<{if $columns_layout}><{$block_layout}><{/if}>">
<h4><{$block.title}></h4>
<div class="contnt"><{$block.content}></div>
</div>
<{/foreach}>
<{foreach item=block from=$xoBlocks.page_bottomright}>
<div class="<{if $columns_layout}><{$block_layout}><{/if}>">
<h4><{$block.title}></h4>
<div class="contnt"><{$block.content}></div>
</div>
<{/foreach}>
</div>
<{/if}>
</div>
<{if $xoBlocks.canvas_right or $xoBlocks.tabs or $xoBlocks.accordion or $xoBlocks.menu}>
<div class="col-md-3">
<{if $xoBlocks.tabs}>
<{include file="$theme_name/tabs.html"}>
<{/if}>
<{if $xoBlocks.accordion}>
<{include file="$theme_name/accordion.html"}>
<{/if}>
<{if $xoBlocks.menu}>
<{include file="$theme_name/menu.html"}>
<{/if}>
<div class="well">
<{foreach item=block from=$xoBlocks.canvas_right}>
<div class="infobox">
<h4><{$block.title}></h4>
<div class="contnt"><{$block.content}></div>
</div>
<{/foreach}>
</div>
</div>
<{/if}>
</div>
<{if $xoBlocks.prefoot}>
<div class="row">
<div class="col-md-12 well well-small">
<{foreach item=block from=$xoBlocks.prefoot}>
<div class="span4">
<h4><{$block.title}></h4>
<div class="contnt"><{$block.content}></div>
</div>
<{/foreach}>
</div>
</div>
</div>
<{/if}>

</div>
<hr>
<footer>
<script type="text/javascript">
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
</script>
<p class="pull-right"><a href="#top"><{$smarty.const.THEME_UPTOP}></a></p>
<p><{$icms_footer}></p>
</footer>
</body>
</html> // // perhaps it should look more easy then this?<!-- input filtered -->

This Post was from: https://www.impresscms.org/iforum/viewtopic.php?topic_id=5826&post_id=50527