BYU Theme
Adding the BYU look-and-feel to your site
Pre-Requisites
- At least Mendix Studio Pro 8.4.2
Required Modules
Note: Downloading private app store modules/widgets has been turned off at the moment for certain versions due to security concerns. The latest version of private App Store content can still be downloaded from the Company Content page in the Mendix App Store and then imported into the respective versions of Studio Pro/Desktop Modeler. Once the module is downloaded, import it by right clicking Project File and clicking on Import module package.
Set Up
Find the BYU Theme module on the Mendix app store. This is in the BYU private app store, so if you're not part of the BYU company on Mendix, you won't find it. Once you've found it, download it. Once it's downloaded, import it into your project. When that's finished, your app store modules will look like this in your project explorer:
Inside the _USE_ME folder, right-click Topbar_Default > "Duplicate".
Then right-click the newly duplicated file and "Move..." it one of your own project modules. Feel free to rename your new layout.
Then in every one of your pages that doesn't use a popup layout, switch the layout to use your new layout. This can be done manually on each page or automatically by navigating to Project > Tools > "Batch update layout...".
Once that's done, you're application will be using the BYU theme.
In order to change the site name that appears in the top-left corner of the page, open your layout and edit the "Site Name" link button.
If you get an error about a missing snippet, double click on the error. This will take you to the page with the notification banner settings. If you have an admin navigation snippet for your app, make that the snippet being used. Otherwise if you have alternate methods of navigation, Delete the snippet view.
NOTE: When adding Security to your project, make sure to that all roles are assigned the 'User' role in the BYUTheme module, otherwise you will see errors when trying to compile.
Development
Acceptance
Production
Out of the box, the Development and Production environment colors will look like the images above. In order to get Acceptance to work, though, you'll need to edit the project's index.html file. You can do this by navigating to your project in the File Explorer (from within Mendix Studio Pro, go to Project > "Show Project Directory in Explorer".
From there, the index file should be inside the Theme folder. Near the bottom of the file, you should see the following code:
Edit the second conditional statement to match your acceptance environment's hostname. Upon committing this change and pulling it to your acceptance environment, the cyan environment indicator should then be visible.