> For the complete documentation index, see [llms.txt](https://deep-creative-studio.gitbook.io/deep-creative-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deep-creative-studio.gitbook.io/deep-creative-studio/the-journal-app.md).

# The Journal App

Documentation

## 1. Overview

The Journal App is a complete journaling template built in Unity. It includes:

* A main journal screen with a list of entries.
* A panel for creating and editing entries.
* A calendar filter, emoji picker, and style settings (fonts, size, colour, bold, italic).
* Optional security lock panel with password and security questions.

The project is intended as a starting point for your own app. You can:

* Use it as-is,
* Remove features you don’t need,
* Or extend it with new behaviour, screens, and integrations.

## 2. Project Structure (High Level)

The exact folder names may vary slightly depending on how you import, but in general you will find:

* Assets/Assets/Backgrounds – All background images used by the app.
* Assets/Assets/UI – UI sprites such as buttons, icons, and panels.
* Assets/.../Prefabs – Prefabs for entries, emoji panel, calendar items, etc.
* Assets/.../Scripts – Core logic scripts (JournalManager, style manager, etc.).

Note: If your Unity project does not contain Assets/Assets/... and only uses Assets/Backgrounds, adjust the paths in this document to match your structure.

![](https://content.gitbook.com/content/k1jC3Ko0JVPabNW7Y9Mr/blobs/1o8AzZTEIgtQiip51Mh7/Unknown%20image)

## 3. Changing Backgrounds

To change the background images:

* Use vertical images with a size of 1080 × 1920 pixels (or the resolution you plan to support).
* Keep them in PNG format.

**Path: Assets folder -> Assets -> Backgrounds**

![](https://content.gitbook.com/content/k1jC3Ko0JVPabNW7Y9Mr/blobs/0E3pupCHj5F46MnWDxwh/Unknown%20image)

Steps:

1. In the Project window, go to Assets -> Assets -> Backgrounds.
2. Select one of the PNG images you want to reskin.
3. Open the image in your graphics editor.
4. Replace the artwork with your own design, keeping:

* The same file name, and
* The same resolution (to avoid layout changes).

1. Export / save as PNG, overwriting the existing file.
2. Repeat for any other background images you want to change.

Once saved, Unity will automatically reimport the textures and the new backgrounds will appear in the app.

![](https://content.gitbook.com/content/k1jC3Ko0JVPabNW7Y9Mr/blobs/BWHvFmCA6HieEeNugxlC/Unknown%20image)

## 4. Adding More Backgrounds

You can also add new background options (beyond the existing ones).

### 4.1. Add new background textures

1. Duplicate one of the existing background PNGs inside **Assets -> Assets -> Backgrounds.**
2. Rename the new file(s) clearly (e.g. bg\_05.png, bg\_06.png).
3. Replace their content in your graphics editor, as described in the previous section.

### 4.2. Add new background buttons in the Settings panel

In Unity, use the Settings panel hierarchy:

**Settings Panel -> SettingsScrollView -> Viewport -> Content -> BackgroundSection -> BackgroundStack -> BackgroundContent -> GridParent**

GridParent contains all the background option buttons.

![](https://content.gitbook.com/content/k1jC3Ko0JVPabNW7Y9Mr/blobs/9Hh2dR1HInQjHEs6G5SO/Unknown%20image)

To add more:

1. Select GridParent.
2. In the Grid Layout Group component -> increase the Constraint Count to the number of backgrounds you want (for example, from 4 to 8).
3. Duplicate one of the existing background buttons under GridParent.
4. For each new button:

* Update its name (e.g. BackgroundButton\_05).
* Update the image (Sprite component) to use your new background thumbnail.
* Check the background button script (the script attached to the button) and:
* Assign the correct background index or reference,
* Ensure it calls the correct method to apply that background.

*Tip: Right now, GridParent is set to show all background options on a single line. If you add many backgrounds, you may want to allow multiple rows by adjusting the Grid Layout Group cell size, spacing, and constraint settings.*

### 4.3. Register the new backgrounds in the Unity manager scripts

New background textures should also be referenced in your background manager scripts.

In Unity look for:

* SettingsManager (script)
* Background Manager (script)

![](https://content.gitbook.com/content/k1jC3Ko0JVPabNW7Y9Mr/blobs/bnbQjMsco9kcdTdgfvG9/Unknown%20image)

In the Inspector:

1. Select the object that has SettingsManager.

* Update the Backgrounds list/array to include all new background textures or data.

1. Select the object that has Background Manager.

* Add the new backgrounds to its list/array so it can update the background correctly on all screens.

## 5. Changing UI Graphics

All UI artwork (buttons, icons, panels) is stored in:

**Path: Assets folder -> Assets -> UI**

![](https://content.gitbook.com/content/k1jC3Ko0JVPabNW7Y9Mr/blobs/5P8Dqw7S31THViPNkHqh/Unknown%20image)

To reskin the UI:

1. In Assets -> Assets -> UI, pick a PNG image to reskin (e.g. button frame, icon, panel).
2. Open it in your graphics editor.
3. Replace the graphic with your own design:

* Keep the same resolution,
* Keep the same or similar shape where it matters for layout.

1. Save as PNG, overwriting the previous file.
2. Unity will import the new sprites automatically.

For more advanced changes (different shapes, padding, 9-slice borders, etc.), you may need to adjust the Sprite Editor settings and the anchors/size of your UI elements.

## 6. Prefabs

Prefabs are used to reuse UI elements and logic across the project (for example, journal entry items in the list).

You will typically find them under a Prefabs folder inside Assets.

Common prefabs include (names may vary depending on your final setup):

* Calendar day button prefab – Used for each day in the calendar view.
* Do W Label (Days of the Week Label) – Used for the calendar header
* Entry Item prefab – Used for each item in the journal list.
* Emoji panel prefab – Panel that shows the list of emojis.

When you edit or reskin a prefab, the changes will automatically apply everywhere that prefab is used.

## 7. Scenes

The project may use one or more scenes, for example:

* Main journal scene – Shows the list of entries, new entry panel, view panel, settings, calendar, and emoji panel.
* Optional separate scenes for a splash screen or onboarding (if you add them).

## 8. AdMob

The Journal App template comes with built-in AdMob support, allowing you to display a bottom banner on all major screens (Home, Calendar, New Entry, Edit Entry, View Entry, Settings). This monetization layer is lightweight, non-intrusive and fully optional.

### 8.1. Where to find the AdMob Settings

Open Unity and enable AdMob here:

**Path: Unity menu → Assets → Google Mobile Ads → Settings**

![](https://content.gitbook.com/content/k1jC3Ko0JVPabNW7Y9Mr/blobs/MpGb3oJdNO8BqNjYzgx2/Unknown%20image)

In this panel:

1. Tick Enable for Android
2. Paste your AdMob App ID (Format: ca-app-pub-XXXXXXXXXXXX\~YYYYYYYYYY)
3. Press Save

This is required for the SDK to initialize properly.

### 8.2. AdsManager Component

The project includes an AdsManager script that:

* Initializes the Google Mobile Ads SDK
* Loads a bottom banner
* Automatically uses test ads if you enable the checkbox in Inspector
* Allows you to enter your Banner Ad Unit ID directly from Inspector (no hard-coding)

It is located on the global “Managers” object in the scene.

### 8.3. How to Enable / Disable Ads

You can disable banner ads completely by:

* Removing the AdsManager object

OR

* Turning Use Test Ads off and leaving Ad Unit fields empty

OR

* Hiding the BottomAdPanel from UI hierarchy

No build errors occur; the template gracefully disables ads if IDs are missing.

## 9. Changing Fonts & Text Style

You can change fonts at two main levels:

1. Global journal style (for note content, titles in view panel, etc.).
2. Specific UI elements (buttons, titles, labels).

### 9.1. Global journal style

1. Select the object that has JournalStyleManager in the scene.

![](https://content.gitbook.com/content/k1jC3Ko0JVPabNW7Y9Mr/blobs/YxP8eqKOIN8kSIxjfW5e/Unknown%20image)

1. In the Inspector:

* Add your own TMP\_FontAsset references to the fonts array.
* Set defaultFontIndex to the font you want as default.
* Adjust defaultFontSize, minFontSize, and maxFontSize as needed.
* Set defaultColor to your desired default text colour.

These settings will be used whenever ApplyToTMP or ApplyToInput is called.

### 9.2. UI fonts (titles, buttons, labels)

For titles and buttons, you may want a different font than the journal body text.

To change these:

1. Select the UI element in the scene (for example, a button label or the SETTINGS title).
2. In the TextMeshPro - Text (UI) component:

* Change the Font Asset to your desired TMP\_FontAsset.
* Adjust Font Style, Font Size, and Alignment.

Repeat for:

* Panel titles,
* Button texts,
* Tooltips,
* Any other static labels.

*Tip: For a consistent, professional look, use one clean sans-serif font for UI (titles + buttons) and keep script/handwriting fonts only for the actual journal content, if desired.*

## 10. Features

**The Journal App template includes the following key features:**

* **Automatic background update**
* Background changes are applied across all relevant screens so the app keeps a consistent visual style.
* **Lock panel with password & security questions**
* Optional lock screen where users can set a password and security questions to protect access to their journal.
* **Style options**
* A dedicated Text Style section where users can:
* Choose from multiple fonts,
* Adjust font size,
* Change text colour,
* Toggle bold and italic.
* ### **Emoji panel**
  * An emoji picker that lets users insert emojis directly into their entries at the current caret position.
* ### **Calendar filter**
  * Calendar panel that shows which days have entries and allows filtering entries by selected date.
* **AdMob Banner Integration**
* Built-in banner ads with configurable IDs and test mode, delivering simple and stable monetization across all pages of the app.
* **JSON persistence**
* Entries are stored locally in JSON (journal.json), making it easy to inspect or migrate data.

**You can keep all of these features, remove some of them, or extend them with your own logic.**

## 11. Support & Contact

If you encounter any issues or have questions about using or extending this template, feel free to contact us.

We aim to reply within 24–48 hours on weekdays.

**Email: <deepcreativestudio7@gmail.com>**

Please include:

* Your Unity version,
* A brief description of the issue,
* Any relevant screenshots or error messages.