# Create an AppTheme An AppTheme is a group of razor templates to render content on a display or admin page. You do not need to know razor to build an AppTheme.  Rocket AppThemes uses a standard format to help. However.... **If you do not know HTML or CSS, you should learn that before trying to build your own AppTheme.** #### The Editor The best editor for working on AppThemes is Visual Studio, you can then use intelliSense.  **But any text editor will work.** If you wish to setup intelliSense then have a look at the "**AppThemes-W3-CSS**" AppTheme Project. [https://github.com/Rocket-CDS/AppThemes-W3-CSS/blob/main/AppThemes-W3-CSS.csproj](https://github.com/Rocket-CDS/AppThemes-W3-CSS/blob/main/AppThemes-W3-CSS.csproj) It has a number of references to the bin folder of DNN, you need to copy the way that works. #### **Step 1 - Create a Named Folder.** In the RocketCDS installation you need to create a named folder for your AppTheme.  System level Rocket AppThemes are always created in  ```plaintext /DesktopModules/RocketThemes/#AppThemeProjectName#/#systemkey#.#AppThemeName#/#version# ``` For this example we will use the default "AppThemes-W3-CSS" AppTheme Project folder. (You may find this example already setup in AppThemes-W3-CSS) **Create a Folders** ```plaintext /DesktopModules/RocketThemes/AppThemes-W3-CSS/rocketcontentapi.example1 ``` And create version sub-folder. ```plaintext /DesktopModules/RocketThemes/AppThemes-W3-CSS/rocketcontentapi.example1/1.0 ``` Create a "Default" sub-folder ```plaintext /DesktopModules/RocketThemes/AppThemes-W3-CSS/rocketcontentapi.example1/1.0/default ``` There are a number of razor templates required for an AppTheme.   The AppTheme included both Admin templates and the view (website display) templates.  Standard names and structures are required. NOTE: All admin templates use the w3.css framework, which is automatically added to the page by the rocketcontentapi system. [https://www.w3schools.com/w3css/](https://www.w3schools.com/w3css/) #### **Step 2 -  Default Razor Templates** Create a file called "**AdminDetail.cshtml**" with this content... ```plaintext @inherits RocketContentAPI.Components.RocketContentAPITokens<Simplisity.SimplisityRazor> @AssigDataModel(Model) @AddProcessDataResx(appThemeView, true) <!--inject--> <div class="w3-row w3-padding"> <label>@ResourceKey("DNNrocket.heading")</label> @TextBox(headerData, "genxml/header/headingtitle", " class='w3-input w3-border' autocomplete='off' ", "", false, 0) </div> [INJECT:appthemeadmin,AdminRow.cshtml] ``` This template is the default Admin template and is used when content is edited.  In this example we have a textbox and we inject a row template. Data in a RocketContent AppTheme can be saved in the "content header" and the "content row".  (template below) The content row allows multiple row data to be saved. The above template saves data to the the content header and has only 1 row.  **NOTE:** Any data input fields in the content detail must be in an xpath node of "header" @TextBox(infoArticle, "genxml/**header**/headingtitle", " class='w3-input w3-border' autocomplete='off' ", "", true, 0) Create a file called "**AdminRow.cshtml**" with this content... ```plaintext @inherits RocketContentAPI.Components.RocketContentAPITokens<Simplisity.SimplisityRazor> @AssigDataModel(Model) @AddProcessDataResx(appThemeView, true) <!--inject--> @RowKey(rowData) <div id="heading" class='w3-row w3-margin-top sectionname'> <div class='w3-col m12 w3-padding' style='min-width:200px;'> <label>@ResourceKey("DNNrocket.heading")</label> @EditFlag(sessionParams) @TextBox(rowData, "genxml/lang/genxml/textbox/title", " id='title' class='w3-input w3-border' autocomplete='off' ", "", true, 0) </div> </div> <div id="imgs" class='w3-row w3-margin-top sectionname'> <div class='w3-col m12 w3-padding '> [INJECT:appthemesystem,ArticleImage.cshtml] </div> </div> ``` This template is the content row template.  In this example we have a textbox and a call to a shared template. Shared templates are used to help us do standard admin input, like image upload.   **The "@RowKey(info)" token is important.  It assigns a row key to the template so it can be saved.** Create a file called "**View.cshtml**" with this content... ```plaintext @inherits RocketContentAPI.Components.RocketContentAPITokens<Simplisity.SimplisityRazor> @AssigDataModel(Model) @AddProcessDataResx(appThemeView, true) <!--inject--> <h1>@headerData.GetXmlProperty("genxml/header/headingtitle")</h1> <h2>@rowData.GetXmlProperty("genxml/lang/genxml/textbox/title")</h2> <img src="@ImageUrl(articleRowData.GetImage(0).RelPathWebp,200,200,"","webp")" /> ``` This template is the default display template for the website view.  Here we display the text and image which have been entered in the admin page. #### Other possible templates **AdminFirstHeader.cshtml** This template is injected into the admin page header before any other template.   **AdminLastHeader.cshtml** This template is injected into the admin page header after any other template. **ViewHeader.cshtml** This template is injected into the view page header after any other template.   **ThemeSettings.cshtml** This template is used to get user settings for the AppTheme. #### Testing the AppTheme Add a page on the RocketCDS website and add the RocketContent module. Go into the settings and selected the "example1" Apptheme.  Edit the module content  You see the AdminDetail.cshtml and the AdminRow.cshtml templates we created.    Add an image and some text and click "Save" and then "Return".  The data and image you added will appear on the website page.