Layout customisation - My-Little-Forum/mylittleforum GitHub Wiki

Basic considerations

My Little Forum 2 uses Smarty as template engine. The template files are stored in the directory templates/default. The main structure can be changed by editing the files main.tpl (HTML with Smarty tags) and the CSS rulesets in style.css and style.min.css. The default style file is style.min.css, so editing this file might be enough to change the theme. It is recommended to transfer the changes also to style.css in the style of this file because of the better readability when studying the code at a later date.

If one wants to have a customised layout for the forum, one need to change the HTML-templates or the CSS-rules. The script My Little Forum brings a default theme with it. One can make the changes in the default theme, but in this case the changes can get lost during the next update when one forgets to adapt the own changes to the template files of the new version. So this way is not recommended.

The recommended way

It's strongly recommended to copy the default theme to a neighbouring directory (in example to themes\mytheme) and to implement the necessary changes into this new theme. If the default theme will get changes, you only need to identify these changes and transfer the changes to your own theme. Until your transfer it may occur that a new function or setting is inaccessible or one or a few elements are displaced. But your own theme will not be completely broken. If it's only a changed the default theme, it would.

Links

Parts of a theme

The structure documentation was initially based on version 2.4.0. Current status as of version 20220803.1 (2.5.4).

The root directory

The root directory is a subdirectory of themes and lends it's name as the themes name in the settings.

The files ajax_preview.tpl, avatar.tpl, insert_flash.tpl, rss.tpl and upload_image.tpl refers to self-contained HTML-documents that will be opened as JavaScript-popups. In future versions it might be possible that single items will be removed from the script package and be replaced with code as inline part of the already loaded documents. We'll inform you.

The file main.tpl contains the general matrix for all HTML-documents that are not JavaScript-popups. One can change there the pathes to the CSS-files (default style.min.css, style.css for development purposes) and is so able to replace the CSS-files with new ones.

  • (dir) images
  • (dir) subtemplates
  • ajax_preview.tpl
  • avatar.tpl
  • insert_flash.tpl (removed with version 20220508.1)
  • js_config.ini
  • main.tpl
  • rss.tpl
  • style.css
  • style.min.css
  • upload_image.tpl

The directory images

Most of the file names should be self-explanatory. The files bg_gradient_*.png adds the gradients, that are in use in the head and foot of the pages and in especially columns and lines of the tables. The files bg_sprites_*.png are collections of sprites in one file at a time. The shown details are defined in the CSS-rules. The use of these files is not mandatory. You can replace them with your own designs or abstain from their use. In the latter case you have to remove the places where the files should be requested from the CSS-rules and the HTML-templates.

  • images (dir)
    • add.png
    • add_page.png
    • add_user.png
    • ajax_preview.png
    • arrow_down.png
    • arrow_selected.png
    • arrow_up.png
    • asc.png
    • backup.png (removed with version 20220508.1)
    • bg_gradient_x.png (removed with version 20220508.1)
    • bg_gradient_y.png (removed with version 20220508.1)
    • bg_sprite_1.png
    • bg_sprite_2.png
    • bg_sprite_3.png
    • bg_sprite_4.png
    • bg_sprite_5.png
    • canvas_bg.png
    • categories.png
    • caution.png
    • close.png
    • complete_thread.png
    • delete.png
    • delete_entries.png
    • delete_posting.png
    • delete_user.png
    • desc.png
    • disk.png
    • edit.png
    • edit_user.png
    • email.png
    • email_list.png
    • favicon.ico
    • female.png
    • file.png
    • fold_thread.png
    • folder.png
    • homepage.png
    • keep_eye_on.png (new with version 20220529.1)
    • lock_user.png
    • locked.png
    • male.png
    • mark_process.png
    • marked.png
    • no_text.png
    • pages.png
    • plain.png
    • quote.png
    • quote_message.png
    • restore.png
    • settings.png
    • smilies.png
    • smilies_disable.png
    • spam_protection.png
    • submit.png
    • thread_connection_line.png
    • throbber.gif
    • throbber_submit.gif
    • tick.png
    • unlock_user.png
    • unmark.png
    • update.png
    • user.png

The directory subtemplates

The use of these files is mandatory. The request is hardcoded in the scripts. But you can nevertheless change the HTML-sources of the files. Please don't remove or rename Smarty-placeholders and -variables because this could break the function of the subtemplates and with it the forum. In future versions it might be possible that single items will be removed from the script package or new ones will pop up. We'll inform you.

  • subtemplates (dir)
    • admin.inc.tpl
    • bookmark.inc.tpl
    • contact.inc.tpl
    • entry.inc.tpl
    • errors.inc.tpl
    • index.inc.tpl
    • index_table.inc.tpl
    • info.inc.tpl
    • login.inc.tpl
    • login_pw_forgotten.inc.tpl
    • page.inc.tpl
    • posting.inc.tpl
    • posting_delete.inc.tpl
    • posting_delete_marked.inc.tpl
    • posting_delete_spam.inc.tpl
    • posting_flag_ham.inc.tpl
    • posting_manage_postings.inc.tpl
    • posting_move.inc.tpl
    • posting_report_spam.inc.tpl
    • posting_unsubscribe.inc.tpl (new with version 2.4.14)
    • register.inc.tpl
    • search.inc.tpl
    • subnavigation_1.inc.tpl
    • subnavigation_2.inc.tpl
    • thread.inc.tpl
    • thread_linear.inc.tpl
    • user_agreement.inc.tpl (new with version 2.4.10)
    • user.inc.tpl
    • user_edit.inc.tpl
    • user_edit_email.inc.tpl
    • user_edit_pw.inc.tpl
    • user_postings.inc.tpl
    • user_profile.inc.tpl
    • user_remove_account.inc.tpl (new with version 2.4.17)