ISPC3 Theme/Template

Discussion in 'Tips/Tricks/Mods' started by djtremors, Mar 30, 2010.

  1. djtremors

    djtremors ISPConfig Developer ISPConfig Developer

    Hey all,

    I'm working on a new theme for ISPConfig3 and was working on using css classes for the left menu and got a bit of a problem with it.

    I can't find unique var name I can use to define each menu item individually.
    I tried cheating and using <tmpl_var name='title'> and got some success until I noticed the Monitor menu and the left side bar shows Server to Monitor with some screwed up text in the class name breaking html.

    <li class="<tmpl_var name='title'>">
    <tmpl_if name="link">
    <a href="#" onClick="loadContent('<tmpl_var name='link'>')">
    <tmpl_var name="title">
    <tmpl_if name="link">

    Is there a var name that contains unique names that can be used for css. ie ones without spaces etc.
    Or is there a way to know what template vars are available. so far it appears the language text is possible but not sure what else, especially one for the combo server select box I have a problem with.


    Attached Files:

  2. djtremors

    djtremors ISPConfig Developer ISPConfig Developer

    I've noticed another issue.
    Most if not all buttons to add are using the same class name which is fair enough if you want the same icon but not if you want to change it.
    Since this is a template and not part of a theme, makes it hard to change it but not lose the changes over an upgrade as I believe these files would be overriden right?

    [email protected]: /usr/local/ispconfig/interface/web# find . -exec grep -H "iconstxt icoAdd" {} \;
    ./client/templates/client_template_list.htm: <button class="iconstxt icoAdd" type="button" onClick="loadContent('client/client_template_edit.php');">
    ./client/templates/client_edit_limits.htm: <button class="positive iconstxt icoAdd" type="button" value="Add additional template" onClick="addAdditionalTemplate();"><span>Add additional template</span></button>
    ./client/templates/resellers_list.htm: <button class="iconstxt icoAdd" type="button" onClick="loadContent('client/reseller_edit.php');">
    ./client/templates/clients_list.htm: <button class="iconstxt icoAdd" type="button" onClick="loadContent('client/client_edit.php');">
    ./sites/templates/ftp_user_list.htm: <button class="iconstxt icoAdd" type="button" onClick="loadContent('sites/ftp_user_edit.php');">
    ./sites/templates/database_list.htm: <button class="iconstxt icoAdd" type="button" onClick="loadContent('sites/database_edit.php');">
    ./sites/templates/shell_user_list.htm: <button class="iconstxt icoAdd" type="button" onClick="loadContent('sites/shell_user_edit.php');">
    ./sites/templates/web_subdomain_list.htm: <button class="iconstxt icoAdd" type="button" onClick="loadContent('sites/web_subdomain_edit.php');">
    ./sites/templates/web_domain_list.htm: <button class="iconstxt icoAdd" type="button" onClick="loadContent('sites/web_domain_edit.php');">
    ./sites/templates/web_aliasdomain_list.htm: <button class="iconstxt icoAdd" type="button" onClick="loadContent('sites/web_aliasdomain_edit.php');">
    ./sites/templates/cron_list.htm: <button class="iconstxt icoAdd" type="button" onClick="loadContent('sites/cron_edit.php');">
  3. till

    till Super Moderator Staff Member ISPConfig Developer

    All files that are in a template folder will get replaced on updates.
  4. djtremors

    djtremors ISPConfig Developer ISPConfig Developer

    yeah well i figured that would be the case.
    what about naming convensions used as Add website, Add new FTP user, Add blah blah.. all use the same class name, can we in future have a different class for each?

    Also, you didn't answer my questions about unique var names since atm, I have to use <tmpl_var name='link'> which means in the css i have to use :
    #submenu li.sites\/web_subdomain_list\.php a { background-image: url("../../images/domain-sub-icon.png");background-repeat:no-repeat; padding-top: 0px;}

    etc. reaaally ugly and bad.
  5. mike_p

    mike_p Member

    You could use the class attribute after all.

    Remember that HTML allows space-seperated mutiple classes for a single entity.

    The css rules allow mutiple class selection.

    so if your class = ''Subdomain for website"
    that is equivalent to three seperate classes

    your css could specify a rule for all three classes being together:
    #submenu {...}
  6. djtremors

    djtremors ISPConfig Developer ISPConfig Developer

    Yep, I used the var 'title' which i used the method in the css, but this fails badly when rendering menus which have the pulldown combo like the server selection in the Monitor section. So ended up using the link instead.
  7. mike_p

    mike_p Member

    I've come back to this becuase I'd like a cleaner solution to styling these pages.

    So I've edited each of the module.conf.php pages and added to each of the $items array a new field called "html_id"
    eg within monitor/lib/module.conf.php for the raid_state menu item
    $items[] = array( 'title' 	=> "Show RAID state",
             'target' 	=> 'content',
             'link'	=> 'monitor/show_data.php?type=raid_state',
    	 'html_id' => 'raid_state');
    then in my sidenav.tpl.htm I've changed the items loop to
     <tmpl_loop name="items">
        <li <tmpl_if name="html_id"> id='<tmpl_var name="html_id">' </tmpl_if>>
          <tmpl_if name="link">
            <a href="#" onClick="loadContent('<tmpl_var name='link'>')">
          <tmpl_var name="title">
          <tmpl_if name="link">
    In my css I can now assign an icon using (eg) #raid_state to select the item.

    If anyone's interested (and Till and/or Falko agree!) I'd be happy to include these changes in svn.
    Last edited: May 29, 2010
  8. djtremors

    djtremors ISPConfig Developer ISPConfig Developer

    Yeah that would be ideal method really but since the ispconfig3 upgrades are a little brutal and overwrite almost everything you changed, you have to keep backup copies and diff them in case they've added something to the page which a backup&restoring of your modified file would restore back to the old copy.
    So i did it my way only for easy upgrade reasons only.
    Would be nice if the ispc team styled everything a little better.

    What you did was good work Mike, could try chattr +i on your files during upgrade to prevent overwriting and see how it goes. I know it doesn't work on custom postfix as complains before continuing, i know coz i tried it.
    For some reason ispc3 upgrade screws my postfix configs so i have to always back it up.

    it truely needs questionable sections for upgrades like templates, each service and so on..
  9. till

    till Super Moderator Staff Member ISPConfig Developer

    That depends on how you work with a open source project. mike_p for example works actively with the ispconfig project and commits his changes and fixes back to the source tree. You decided to work only on your own without contributing to the ispconfig project, so your chnages does not go into the ispconfig sources and thats why you have ptoblems with overwritten files.
  10. till

    till Super Moderator Staff Member ISPConfig Developer

    Sure. If they do not break the exsting themes, then please commit them to svn trunk.
  11. djtremors

    djtremors ISPConfig Developer ISPConfig Developer

    Well my work doesn't involve changing ispc3, hence why i only created the theme in a way which doesn't require making changes to ispc3 code and only the postfix i had issues because i have changes I needed, nothing wrong with that and that's not part of ispc3.
    The same with my awstats plugin, it's a plugin which doesn't interfere with ispc3. So I really don't get your point.
    I like to throw changes and ideas into the air and those who want to catch it can, if someone wants to take my idea and improve on it, then even better. I try what i can for the community with the little time i have. That's why if you check my theme code you'll notice it's not 100% themed and only the main parts and a lot of missing icons.
  12. till

    till Super Moderator Staff Member ISPConfig Developer

    But then I dont understand your complaint:

    Custom themes never get overwritten. The only things that get overwritten are ispconfig core files. But you can not improve a software if you do not change the core sources. And changed source files have to be written on a update.

    For customisations, ispconfig has a lot of areas which dont get ovewritten:

    - Custom Theme files
    - Custom Server configuration file templates
    - Server plugins
    - The event based interface plugins.
  13. mike_p

    mike_p Member

    the following have been changed and committed to svn

    8 x module.conf.php
    1 x default theme sidenav.tpl.htm
    1 x default theme nav_side.css

    so have also fixed bug FS#1200 in the process.

    - so hopefully this change can be moved forward to v3.0.2.2
  14. Appie Thrasher

    Appie Thrasher Member HowtoForge Supporter

    Just one question I was working on some little customizing myself nothing big,
    I have just copied the default theme Dir. and added my own logo and favicon.
    (of course left the powered by ispconfig were it is I am proud to use it)

    So if I name this Dir, mytheme and put this beside the default one It won't get deleted upon a update.
  15. vogelor

    vogelor ISPConfig Developer ISPConfig Developer

    this is how i do it.

    (just to know: the SVN- Version changes the template-handling, so that you only have to save the files, you change and not all files of the default-template - BUT DO NOT USE SVN IN PRODUCTION SYSTEMS!)

  16. bruno_floyd

    bruno_floyd New Member

    I created my own theme by copying the default theme dir. and made some changes as well...

    When I select for my users the new template on both Client and System area the changes don't get effect when I login with them.

    Does anyone know if there's some kind of problem or a step I'm missing?
    Last edited: Oct 5, 2010
  17. vogelor

    vogelor ISPConfig Developer ISPConfig Developer

    this is the way it should work.
    1) change the template for the user
    2) logout and login as user

    there is nothing more to do.

    maybe you can create a account for me and tell me the login-data (as PM!) then i will try to test it..

  18. bruno_floyd

    bruno_floyd New Member

    I did that... I created my new dir. and changed some colors on the side menu css.
    Changed the template on both System and Client... checked if it updated on the DB and its ok.
    When I use Firebug to view the css of the side menu, the original default color stills there, because the path to the css continues on the default, not the one I created.

    Where on the code is the template set for the user?

    I'd love vogelor, but my ISP is not available for external access yet... thanks!
  19. vogelor

    vogelor ISPConfig Developer ISPConfig Developer

    send me a PM with your email.
    i will help you!
    you are not alone ;-)
  20. bruno_floyd

    bruno_floyd New Member

    Sent there vogelor!


Share This Page