Themes and Templates

Re: New admin theme - no change

<p>I think I found the reason. When you look at the code in the admin sections, they all use hardcoded paths to the system module. Not all of the pages are in <a href="https://github.com/ImpressCMS/impresscms/blob/branches/impresscms_1.4/htdocs/modules/system/icms_version.php">the icms_version.php file</a> as templates.</p>

<p>For example, when I take the <a href="https://github.com/ImpressCMS/impresscms/blob/branches/impresscms_1.4/htdocs/modules/system/admin/customtag/main.php">/htdocs/modules/system/admin/customtags/main.php</a> file, and change the last line that says</p>

<p>$icmsAdminTpl->display(ICMS_MODULES_PATH . "/system/templates/admin/customtag/system_adm_customtag.html");</p>

<p>and change it to&nbsp;</p>

<p>$icmsAdminTpl->display("db:/admin/customtag/system_adm_customtag.html");</p>

<p>I get a nice white section where the custom tag manager used to be. I think it is something related with the paths in the filename, but I'm still looking into that to make sure.</p>

Topic


Re: New admin theme - no change

<p>as a matter of fact, I have the base theme template working, so the admin control panel renders in the new system. It's the system module that I have issues with because at the moment I have this kind of Frankenstein combination of a mobile-first responsive shell, and a nineties-inspired table-based interior.</p>

Topic


Re: New admin theme - no change

<p>There are 2 theme selectors - 1 for the user side and 1 for the admin side. To skin the admin area, have a look at libraries/icms/view/theme/Factory.php and the method getAdminThemesList(). There is where the override is set for the admin area. The core looks for the overrides in either modules/system/themes/ or themes/<your theme>/theme_admin.html</p>



Re: New admin theme - no change

<p>As a matter of fact, similar changes were done by @debianus in the preparations for the 2.0 branch. I'll have a look there to see if I can spot a change that should be backported to 1.4</p>



New admin theme - no change

<p>Hi,</p>

<p>I'm working on a new admin theme that should be clean and very light based on bulma (https://bulma.io). I was hoping to include it with ImpressCMS 1.4 as a responsive, modern alternative admin theme.</p>

<p>I have the admin section itself working more or less (always a few details that crop up from time to time) but I seem to hit a blank when I adapt the template files for the different pages in the system module. When I change the template files in the module itself, I get the results I want, but when I update the correct files in the theme (like I do with all other template files), nothing happens. Is the 1.4 system module not ready to be skinned by a theme?</p>



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

<p>Hi,</p>

<p>sorry for the late reply. To uninstall a theme, you need to do 2 things.</p>

<ol>
<li>You need to go to the admin Control Panel (ACP) and choose another theme as standard in the ACP -> Preferences -> General Settings -> Default theme</li>
<li>You need to remove the folder of the theme from your server. Currently that is not yet possible from within ImpressCMS, you will need to use a FTP program or one of the tools hosting providers offer to upload/remove files on your hosting solution.</li>
</ol>



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

<p>I installed themes (bootstr3.0.3 /yours) some time ago. It seemed to install, but the reaction of template mangr-module was slightly wrong (I think). Is it possible to reverse this install?</p>



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

<p>I am working on an updated version of the Bootstrap3 theme on Github :&nbsp;https://github.com/fiammybe/impresscms-theme-bootstrap3</p>

<p>This will be a cleanup and a small evolution based on the things I've learned working on the new design of the ImpressCMS site.&nbsp;</p>

<p>After that, the big goal is to get a Bootstrap4 version up and running.</p>



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

<p>This is so stupid... I allready have 3 & 4 cols but I don't manage to reagerange widths. ... still the problem also is that I'd like a true template, not the fix and trix stuff that I'm now into. And really... I'm not sure how the menue positioning can allow 3 and 4... ist almost like the themes in my space is not connected to my site.</p>



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

<p>Another way to do it would be to find a theme that has roughly the columns you want, and start modifying it to suit your needs. You do not need to know much about html or css, I only use the basics, and have no clue at all about Javascript. That doc should cover enough to get you started.</p>



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

<p>My problem is several since I want a 3 + 4 cols site (non centered).</p>

<p>"master index /theme"&nbsp; ==> 3 cols and 4 cols (my widths).</p>

<p>To understand the doings and really manage my site I must understand:&nbsp;&nbsp; Theme manager&nbsp;&nbsp; /master-html &css&nbsp;&nbsp;&nbsp; /theme-widths(accordingly)&nbsp;&nbsp; /OR working around manually together with mentioned factors.</p>

<p>Being a newbe its often possible to start lean and work uppwards. In this case theme and procedure around must be deconstructed as a whole before understanding and building up my stuff. One must see the complet steps of the coder to understand the nube situation.</p>

<p>From simple upwards is easy - To deconstruct the whole "big part" is very complex.&nbsp;&nbsp; (I don't handl this and and also requested a price suggestion via PM).</p>



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

<p>Have a look at the old Anatomy of the Default Theme document. You can read about the basic structure of a theme and how Smarty works. This is an old document, so it still uses&nbsp;tables to control the layout (now we mainly use div and span), but the general structure of a theme has not changed much.</p>

<p>https://xoops.net.br/docs/xdocman/xn-103.pdf</p>

<p>You can think of Smarty as a placeholder for a piece of data, kind of like a variable. In your PHP script you can assign values (including snippets of HTML) to smarty variables, and they will be output in the theme at the desired location.</p>



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

<p>if I manually would "walk around" and fix each "blank-module page" themeing manually, does that contain any problem for future of my site?&nbsp;&nbsp;&nbsp; //&nbsp; //&nbsp;</p>

<p>MrGrey(mothership, ~6y ago) walkingnumber (~3y ago), justanumber</p>



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

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



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

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#



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

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



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

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?



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

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



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

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

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



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

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




 Top