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

1) are themes PHP in all cases nowadays? if not, someone fiddles with my programmes, they show in PHP ($-signs etc)... I have been able to get them in slightly more readble (for me, user) listings re-showing as source in mozilla.

2) I try iTheme but cannot get CcolL to widen above 170 ( across centerline and narrow'ing the two right cols). Can I get that center left col to grow right? (boot-strap doesnt help me... didn't understand it actually)

3) Is there any 4col theme design where cols can divide like ~ 20 – 40 – 25 – 15 % … with basic traits? (html, not php?)

4) Have U seen that stupid around who kicked Marc-André Lanciaux?

5) can themes now be installed by lever in admin GUI? Is there a wiki /docu for using that? tag /search word?


I'm the GNU /GPL supporter, early pirate member and now green party 100% democrate. I have seen you around since 7-9 years or somthi'n. I think you know <img src="https://www.impresscms.org/uploads/smil3dbd4e398ff7b.gif" alt="">

Greetings!

<p>The symbols you most likely are seeing are the Smarty variables, which enables dynamic content for your pages. A theme consists of both HTML and PHP, along with JS and CSS. An overview was written some time ago about <a href="https://www.impresscms.org/modules/simplywiki/index.php?page=Themes" title="ImpressCMS Themes">themes</a> and <a href="https://www.impresscms.org/modules/simplywiki/index.php?page=Templates" title="ImpressCMS Templates">templates.</a></p>
<p>If you have an example of the layout you are trying to achieve, I'm sure someone can assist with developing or customizing a theme for you.</p>

3) Is there any 4col theme design where cols can divide like ~ 20 – 40 – 25 – 15 % … with basic traits?

I have made changes to iTheme layout.html (was it?) .... and have made proper (i hope) arrangements ... but it doesn't take effekt.

I saw that there is nice documentation to templates install.

godhetsuppdraget.org

I theme is quite rigid when it comes to the major layout,but I will have a go at it tomorrow too se if I can get the column distribution you want.
Another option would be to look at the bootstrap theme. It is basic in the colors and the design, but it is flexible, responsive and mobile ready.

I will try both the themes to get them like you asked

<p>ok, so I didn't get iTheme to work the way I thought it would... I'm looking at a more modern bootstrap-based minimal theme, that can easily be themed further once it is ok.</p>

what is the trick w the JS?

... what's being done in themes with that?

(it prohibit most amateurs from using it)

w#

<p>In Bootstrap, Javascript is used for a few functionalities that are difficult or impossible to do with CSS only, such as the tabs and some other parts as well (look at the <a href="https://getbootstrap.com/docs/3.3/javascript/">Bootstrap 3.3 Javascript documentation</a> to get an overview).</p>

<p>ImpressCMS also uses some javascript for admin users, for example to give you the pop-up windows when you want to edit a block on the frontend.</p>

<p>Some modules use Javascript, but that's totally up to them.</p>

<p> </p>

Was it ordinary community koncensus descission to make /use?

1) JS in such scale?
2) To arrange the Template Set Manager according to 1.3.10 ?

I find it strange that someone doubled the need for knowledge (JS) AND also arranged the Templ.SM with ~100 css /html design "names" that no one can know from before...

.-----------------------
Is this community according to your oppinion fiammybe under some kind of hostile "overtake" ???

If, Do you then know who it is, alias or true name?

Greetings!

........... justa# /walking# /(xoops MrGrey).

<p>Hi,&nbsp;</p>

<p>those are choices by the theme developer and, ultimately, by the site owner that decides to use that particular theme.</p>

<p>Bootstrap is the most widely-used CSS framework at the moment, which makes it a good platform to use if you want to create themes. By using bootstrap, you accept that certain functionality in the theme will be offered by some Javascript. Some time ago we had a look at what was available with the developers at that moment, and we decided on using Bootstrap for hte newer versions of ImpressCMS. No hostile overtaking, but simply pragmatic team members <img src="https://www.impresscms.org/uploads/smil3dbd4d6422f04.gif" alt="" /></p>

<p>There are other frameworks around, but personally I haven't used them and some of the functionalities that are requested nowadays by the end-user can only be done in Javascript so there isn't a realistic way to write modern themes without it.</p>

<p>As far as I know, there were no changes made tot he Template manager in the last versions. To be honest, I think the only use for the template manager is to fix some small issues in the template of the theme you are using, but in order to make the template manager useful in that scenario, there is some work to be done. The template manager is not integrated with the themes at the moment, and as such it can't offer you the option to download the template set for a specific theme. I think that would be interesting, but it isn't a big priority at the moment.</p>

I think Bootstrap is a good choice. The 12-column grid is very flexible and a lot less painful than fiddling around with percentages once you get used to it. Also great for making a site mobile friendly. There is very little Javascript required if you just want to mess with a Bootstrap theme, mainly it's just assigning Bootstrap CSS classes to your existing HTML.

I've been moving away from multi-column layouts recently. Even with Bootstrap the less columns you have the easier things are to adapt to a mobile display.

There's quite a few good (really outstanding) free themes available for Bootstrap (though the page/file size runs pretty high on some of them). I found them pretty easy to adapt for my other project, although I haven't tried it on ICMS yet it shouldn't be too hard.

Good free Bootstrap theme sites include: BlacktTie: http://blacktie.co
Start Bootstrap: https://startbootstrap.com/
Get Bootstrap: http://getbootstrap.com/getting-started/

By the way, I still can't find a way to have line breaks in my posts. If I preview the post (first time) it looks fine, but it ends up with no breaks.

<p>Thank you for the pointers Madfish. The abundance of available material for Bootstrap is one of the reasons for picking it, next to the reason that we don't want the burden of having to define a CSS framework ourselves. That's not our core business in a way.</p>

<p>I'm puzzled concerning your inability to send line breaks, I'll have a look at the differences in our profiles.</p>

Q: My intention is to have entrance page 4col and other pages 3col. ...then my question...

Must then theme.html (1.3.10) contain both column set-ups + all css data ?
... or can I use 1 page theme.html 4col AND 1 page theme.html 3col somehow? (I believe each page is simple to make when getting to know the grid principle). theme1.html theme2.html ? ... but I cant find a "users way" to call those...

Solutions, pls!


Merry Christmas and a happy new year!
#wn/jn

.------------
(if allways using a simple 12col grid it would be possible to make all themes according to a few made up css (originals). Like choosing shoes to your suite.) Can Template Manager be a module?

Need either docu OR help with the theme in bootstr 303 to adopt to 4col + 3col.

Pls help!

<p>Hi,</p>

<p>the way the themes are currently setup is that the theme.html file contains the basic layout for the entire site. What you want is possible, but it will require some inventive smarty coding I think.</p>

<p>Bootstrap is very interesting to use because it takes care of most of the basics for responsive design. What you need to decide is how you want those 3 and 4 columns to show up on a mobile device. The reason is that this choice will impact how the HTML of the theme.html is structured <img src="https://www.impresscms.org/uploads/smil3dbd4d6422f04.gif" alt="" /></p>

<p>For example, if you just want the content of the 4 columns to be shown one below the other, you define your main content zone as col-sx-3. Bootstrap takes your content and puts it ont he page in the order in which it is transmitted in the HTML file. So it is not easy to show the content of column 1 and 3 first, and then the content of column 4 and then column 2. Also, i wouldn't display more than 1 column on a smarphone, to keep it readable.</p>

<p>Can you tell me what pages you would need to have 3 and what pages will need 4 columns? Also, which modules do you plan to use on those pages? This kind of design implicates adapted templates specifically made for the modules that you use ( like we do on the ImpressCMS site itself for example).</p>

@ fiammybe: (pls recieve this and erase here). Marigins close to 0.

... site entrance 4col and rest 3col.... I get back. (uploaded pic)

<p>Hi, the basic Bootstrap 3.3.7 theme will be delayed a few days, see <a href="https://www.impresscms.org/modules/iforum/viewtopic.php?post_id=50503#forumpost50503">here</a></p>

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?

<p>Not really. If you want to have different zones where you can put blocks, and you want to be able to put multiple blocks in a zone, and you want a header and a footer, that's more or less what you need as a basis.</p>

<p>I chose to keep it all flat in one file, just for clarity. I might split that up in the next version, to make it more readable (even though the HTML that gets produced to send to the browser will be the same)</p>

Is this called html?
<--.-->
I can't see any html... nothing ever mentioned in my book (html for dummies) anyway. Earlier I could use ImpressCMS themes, even make them, but not now. <--.-->
<u> So what would you recomend now</u> when a poor, simple user (me) only with some earlier experience of static html can not make a simple theme that reaches abow WP? <--.-->
Generic stuff is interesting to learn, but this? ... I cannot find this being generic enough to learn as an ordinary user.

// walk#

<p>Have a look at iTheme, our old and long-lasting default theme. You will see that the same type of syntax is used. ImpressCMS themes are built using the Smarty 2 Theme engine, which allows us to keep php code out of our HTML templates. Note, they are HTML templates, not simple HTML files. When you open this in a browser, it won't work because Smarty needs to fill in the gaps</p>

<p>In a way, what smarty does is add placeholders to a HTML file that get filled up by ImpressCMS. There is a certain logic also (foreach loops and if/then/else constructions) because we need to generate other code based upon certain conditions. For example when a zone does not contain any blocks, the HTML to define that zone should not be generated.&nbsp;</p>

<p>This is based on the basic HTML5 + CSS template that exists for Bootstrap, we just added the logic to integrate the different blocks and the zones in there. @skenow mentioned a Impressmizing tutorial written some time ago that seems to have disappeared from the site, I will review it to see if it is still in line with the current way things are done and I'll post it before monday.</p>