*Please Note: this is a Technical Advanced level Help File and only those experienced with HTML and CSS and/or web development will find this information useful.*

Your Tendenci Theme Editor

Tendenci offers web designers and site superusers access to your website's Theme Editor - where you are able to edit and make changes to your website's layout, change page templates, and add custom design elements with a little HTML and CSS.  

In order to access the Theme Editor, you must be a site Superuser or a Developer.  Regular users and members do not have access to this section of your website. You can get to the Theme Editor from any page of your website by navigating to "Apps" located in the admin navigation menu and looking under "1. Admin" select "Theme Editor" on the dropdown menu.  

You will always start inside your website's Homepage.html file when you go to the Theme Editor with full access to all of the .HTML, and CSS. files to edit, update, and delete for greater customization of your website's design and layout.  You can also upload new theme files from inside your Theme Editor. We don't currently use .LESS files on our Tendenci sites, but that doesn't prevent a web developer from using it if they'd like.   

Using the Theme Editor

The main section of the Theme Editor consists of the HTML, Javascript, Template Tags, and other "code" of the selected file.  You can easily edit this code by simply clicking in the editor window and typing/editing as you would inside any text editor.  To save your changes, click on the "Save Changes" button below the editor window.

Underneath the editor window and "Save Changes" button, you'll find all the previous versions of that file. New sites will not have any previous versions, however, once you've made changes and saved that file, you will have the ability to go back (rollback) to previous versions and re-use them.  This is particularly helpful if you make a change that doesn't look right and you want to just restore the page to the previous version.  

To re-use a previous version, click on the hyperlink for that version to pull it up inside the editor window.  Then, push the "Save Changes" button to update the file.  

*Please note that pushing "Save Changes" will update your LIVE WEBSITE with these changes, and anyone who visits your site immediately after you update a new file will see the new changes.  This is fine to do, however if you make a change that doesn't look right, visitors will see the error instead of your website.*

On the left-hand side of the Editor Window, you'll find the files to access and edit from your website's theme, the option to "Customize More Templates" from your theme, and the option to upload new files to add to your theme.  

When you first go to your Theme Editor, you will only see a few files and folders on the right side of your editor window. These are not all of the available files within your site's theme for you to edit.  To access all of the files and folders contained in your theme for editing, you will need to click on the "Customize More Templates" link on the lower left side of the screen. This will take you to all of your Tendenci website's theme files and folders where you can select the one you want to edit.

Select and Edit a File

In Customize more templates you will find Tendenci Apps where you can choose a theme or app that you wish to override. All of your website's current templates are found under (builtin/t7-base). 

Select the file you want to edit and then confirm that you want to override the template file on the pop-up window. This is also known as "pulling down a template".

*Note that if you are in the Tendenci managed hosting environment and you override template files, those specific files will no longer receive automatic updates to avoid overriding your new changes.  We recommend you avoid overriding template files just to explore and only move those files into your editor window that you are actually going to make changes to.*

Find and Edit Your Site's CSS Theme File

In general, your Homepage.HTML file is the one you'll customize the most often and that is why we automatically direct you to that page each time you visit the Theme Editor. The second most common file you'll probably want to customize and make changes to is your theme's CSS style file. This file contains the majority of the CSS options that determine your site's color theme, font type and sizes, and other style and design elements.

Choose the "media" folder located on the left sidebar menu under the "Choose a folder or file to edit".

Click on "+css" and select "base.css".  

The "css" can be overridden on your site. No need to pull down the template from the core. 

You can use Tendenci's Theme Editor to fully customize the layout, design, and other elements of your site easily and quickly. 

Did this Help File answer your question?  If not - email your question to our support team for more help!