-
Notifications
You must be signed in to change notification settings - Fork 1
customizing
What's a self-hosted web app worth if you can't customize it with your own colors and branding?
Here's some basic information to help you customize Mobiliaire.
In the upper-right corner of this page there's a button labeled "Fork". Click on it while logged in to a Github account and you'll be able to create your own copy, in your own account, that you can update from this repository when updates are released.
You (and your designated collaborators) will be able to modify your fork of this app, and it is licensed to allow you to do this. Your fork becomes the place where you keep a copy of all of the files needed to run your copy, which might include additional CSS and JavaScript files, modified or additional HTML files (if you create new pages), modified copies of settings.py, urls.py, models.py, and views.py, any migrations you have done, and even your database's image store if you choose (though you may prefer to back up item/box/warehouse image files by zipping the folder and backing it up to removable media or in the cloud along with your exported database JSON file).
When you need to install your copy of Mobiliaire onto a new machine, you change your $ git clone command to point to your repository instead of this one.
If you come up with a new view or an enhancement to the way Mobiliaire works, you can submit your changes (just those changes) back to this repository as a Pull Request.
Mobiliare in its default form uses Bootstrap 4 for styling. You can override Bootstrap's theming. The simplest way to do that is to insert css overrides in the <head> portion of mobiliaire/templates/inv/base.html, but that becomes a big job when you consider all of the different colors Bootstrap uses.
You can use an online Bootstrap Theming tool like Bootstrap Magic which will expose all of Bootstrap's variables in an editable list and update the preview in real-time. You can set the entire rainbow palette, or just change the primary, secondary, grays, light, and dark colors, or do both. You can also set other styling effects while you're there. Once you have a theme you like, download both the CSS and the SCSS files.
Rename the CSS file to something shorter (but not bootstrap.css or bootstrap.min.css because those are taken), and save a copy in mobiliaire/static/inv/css/. Link to your new CSS file in mobiliaire/templates/inv/base.html, after any other CSS file links, but before the </head> tag. Refresh or load your site in your browser to see the changes. If it doesn't change, check F12 for errors. A "MIME type mismatch" may be a 404 in disguise - go check your <style> tag for URL or Django template tag errors.
If you decide to go back and re-style, you can import the SCSS file and start from there instead of starting over from the default. Commit your SCSS file once you are happy with your theme, and add a note to your repository's README file noting the link to the theming tool you used.
- You can change the global header and footer to include brand-specific styling and content.
- You can add a banner image to the header (those look great if placed full width just above the navbar).
- You can add a copyright statement, a legal statement, or contact information to the footer (or even all 3). Both the header and the footer may be modified by editing
mobiliaire/templates/inv/base.html.
The Index is the page that loads when you visit the site's root URL (/).
- You can add both static and dynamic information about your inventory, remove the info cards (the links they point to are duplicated in the header navbar), and add information about the property custodian and app's maintainers.
You can learn more about using Django's template system to display information from the database at Django Templates Documentation.
This app uses DataTables to add slick functionality to the tables in "reports" views. You can modify which features appear, and on which tables, by modifying mobiliaire/static/inv/js/index.js and the various "reports" HTML templates.
- DataTables displays the various tools (export buttons, search box, pagination, info, etc) based on the order and appearance of certain letters in the "dom:" object inside of the DataTables initializer. The application defaults to a single initializer that applies a uniform appearance to all tables, but you can add initializers and associate specific tables with them.
- You can change the arrangement of the DOM letters and even wrap them in HTML elements (this app's default DOM ordering has HTML elements).
- Removing a DOM element's letter will remove the element. You can also explicitly disable elements separately. DOM elements are case sensitive. Elements from extensions have capital letters - B for buttons, P for SearchPanes, Q for SearchBuilder, for example.
- The default initializer applies the app's default DataTables toolset to any table with the "table" class (reusing Bootstrap 4's "table" class for simplicity). If you wish to break up the styling and tool appearance in a more granular way, you should change the class the default initializer should look for in index.js to something unique and add that class to each table that the initializer should act on. Then, you can create a new initializer (copy and paste may be helpful here), setting a different unique class and customizing that initializer's objects, and adding the new unique class to the tables you want the new initializer to act on.