How Do I Access My Tendenci Site's Theme Editor to Customize My Theme?

*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.*

Watch the Video

Video Transcript

One really cool feature that Tendenci web sites come with is the ability to control not just your content and the permission settings for your members and users, but also the theme templates. This is a more advanced video training. Most of our clients might not ever get into the theme of the web site and start changing the HTML and CSS, however if you are interested in doing a little bit more customization with the look and feel of your site, every Tendenci site comes with the theme editor and allows you to do this.

The way you get to it is up on your admin bar, go to "Quick Links," click on "Theme Editor," and there we are, looking at the theme for our homepage. This is the actual HTML end design code for the homepage we were just looking at. If you are familiar with any of this you'll see these are loading from the base of the software in different tags and I'll show you how to access that. And you'll come through the block, the body, HTML. You can change things.

This is where you would add the mobile customization if you wanted to. And it comes through, you can see, when we talk about Spaces, here's module theme Space one, module theme Space two that's in that homepage. It does a little bit of Java Script for some of these different queries.

It's a lot of fun to come in and really customize. It also saves previous versions so if you come in and are changing some things around and you update it and it doesn't look right and you don't want to leave your site looking broken but have to rush off to a meeting you can just go back to the version before you updated it and it will restore it completely to what it was like before you messed around with it.

You can have a lot of fun in here. I enjoy coming through and adding custom options, changing some of the different things that are in here. I clicked on the sidebar, so this is the sidebar in your internal pages. You can come up here to the header where your logo is and the meta data and you can see right here where it's loading your theme tags, your nav tags.

These are all things from your Global Site Settings and the different module themes that you set in there. However you can add additional things to your header that you want to customize. Inside of the footer, you can come in here and you can change where that link goes to. If you're a designer and you're in here then you would definitely be changing this to yours, "My Awesome Web Design Company" and we'll just change that, well the link isn't really going matter, but we can.

And you come in here and we can update it, go back to your site, come down to the footer where you change it and there you go "My Awesome Web Design Company."

That's just one of the little things, if you're brave enough to come back here, I'm sure you know what you're doing. So when you're in your theme editor this is where you might want to go, customize more templates. And here you have every single module type's templates inside the theme editors that you can go in and edit.

For your locations, the base, the views, payments, you have the ability to change what stories and guides. You can customize your 404, we all like to do that, get away from the generic one and have something a little more fun, be creative.

So this is something that is a lot of fun. Inside of the base here you'll see, we have the Facebook, and you'll just pick one of these, it'll say override, you'll go yes. You've moved it over so you come back here so here's your base and here's the folder you just moved over.

So that this one's pretty straight forward, just an I Frame and you can go and do that with any of the other templates. So if you're willing to get a little more advanced and a little more control over your web site, Tendenci gives you that full control over your theme right directly inside of the admin bar through the theme editor and it's just a little HTML and CSS.

Tendenci's 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 the 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 using the top Superuser navigation menu, going to "Quick Links", and finding "Theme Editor" on the dropdown menu.  

access-the-theme-editor.png

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, CSS, and .LESS 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.  

tendenci-theme-editor-homepage-view.png

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 "Update" button below the editor window.

Underneath the editor window and "Update" 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 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 "Update" button to update the file.  

*Please note that pushing "Update" 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 right 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 right 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.

Inside-the-theme-editors-folders-and-files.png

Select and Edit a File

Select the file you want to edit and then confirm that you want to override the template file on the pop-up window.  

*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.*

override-this-template.png

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 styles.less 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.

To find your theme's style.less file and related images and files, you'll first need to figure out which template theme you are using for your site.  This is noted on the main window of your Theme Editor on the upper right hand side where you'll see: "Active Theme: {yourcurrenttheme}".

Now, go to "Customize More Templates" and find the Themes folder:

1.  Select your theme's folder 

find-your-theme-stylesheet-in-the-editor-part-1.png

2.  Select the "media" folder

find-your-theme-stylesheet-in-the-editor-part-2.png

3.  Select the "css" folder

find-your-theme-stylesheet-in-the-editor-part-3.png

4.  Select the styles.less file to move to your editor window and customize

find-your-theme-stylesheet-in-the-editor-part-4.png

You'll be asked if you want to override the file - select "OK" and then you can return to the editor window by clicking on the link in the upper right hand side of your screen: "Back to Theme-Editor".

You will have a new folder that will be called "Themes" and you'll navigate through it just like you did to pull it to the editor window until you open the styles.less file.  The file will now be in the editor window and you can edit and update it to save your changes.  

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 or visit our Tendenci Forums for more help!