You might have noticed that a new capability called "Theme Overrides http://help.wildapricot.com/display/DOC/Theme+Overrides " was introduced in Wild Apricot release 4.2. Unfortunately, this unclear name actually hides quite an impressive set of functions to customize your site's visual behavior, much more expanded than it was before. I want to show you my own example of using of this technology so you can see how it has improved.

Let us show the example of how login box is presented in Wild Apricot. While having fields to enter email and password on any page might be convenient in some cases, in other cases it might be distracting. I prefer to have just a simple link "Sign in" that leads to special page where I can enter required data to log in and then be redirected to appropriate page. In Wild Apricot before 4.2 release it was almost impossible - the HTML code was pre-built and you could only change it's appearance or hide completely. In new version, this can be very easily done.

Here's what I did using Theme Overrides on my own site: http://ez.wildapricot.org . Note that I use this site regularly for testing of ideas, so it might be changed when you look at it live -- hopefully the screencaps here will help you understand this example.

Not signed in mode

In normal public mode I show just the "Sign in" link that leads to a page where email and password are requested. If you look at the HTML code of the template file below, this state is shown when "Model.Security.IsAuthorized" is "false."

Signing in

This what the user gets when he clicks on the "Sign in" link. Note that the link itself is hidden in this state. This due to the fact that "Model.IsHiddenOnPage" is "true" here, and the HTML code in the gadget's template file hides it in this state.

Signed in - regular page (i.e. Home)

After the user signs in, it shows only the name of current user as a link in standard blue color. Clicking on the link brings us to profile page. Signed in state is when "Model.Security.IsAuthorized" is "true".

Signed in - profile

This is the same link on the Profile page is still shown but in a different color - slightly dimmed. This state is when "Model.IsProfileLinkVisible" is "False".

Here are the steps I used to create this. First of all, I enabled "Theme override" mode via Settings / Theme overrides (BETA) page. This action gave me an additional folder called "ThemeOverrides" in my WebDAV filders structure, containing the "transparentvertical" subfolder which is based on the name of the theme I use on my site. The folder name will be different for other themes. This is where the "Theme overrides" magic starts. Basically this folder contains all the HTML, CSS, JS and template files that are used to render my site's pages. By "overrides" we mean that instead of having thousands of files being shown in this folder (that are part of theme and all are required to show final page) and changing just a few of them, now you can just upload the files you want to change. The uploaded files "override" the default theme behavior. To understand the default theme behavior and get the files, you need to download the theme pack ZIP file from "Theme overrides (BETA)" in Settings. The pack contains the same folder structure as in your WebDAV but with all theme files, which you can then edit and upload as needed.

In my case I needed to change the "LoginBox" gadget behavior, so I took default gadget template file containing the login box HTML code and changed it to my own code:

Gadgets/Login.LoginBox/GadgetTemplate.tpl - new code <$if(!Model.IsHiddenOnPage)$> <div id="loginData"> <$if(Model.Security.IsAuthorized)$> <div id="loginData-authed"> <$if (!Model.IsSystemAdminView)$> <span class="decoration-brackets<$if(!Model.IsProfileLinkVisible)$> profilelink-inactive<$endif$>" ><a href="<$if (Model.IsAdminView)$><$Model.Urls.ContactDetails$><$else$><$Model.Urls.Profile$><$endif$>"><$Model.UserFullName$></a ></span> <$else$> <span class="decoration-brackets mode-systemadmin">Global admin mode</span> <$endif$> <form action="<$Model.Urls.SignOut$>" <$if(Model.IsAdminView)$>target="_top"<$endif$> method="post"> <input type="submit" size="20" value="<$Model.Text.LinkSignOutText$>" class="loginButton"> </form> </div> <$else$> <div id="loginData-notauthed"> <span class="decoration-brackets" ><a href="/Sys/Login">Sign in</a ></span> </div> <$endif$> </div> <$endif$> If you look into the default code you will see much more complicated code. I simplified it a lot as I do not need to keep the code for all themes but just my own, so I can make it simple and do the rest with CSS. Note that this not just HTML code - the template file uses special language that allows you to make your template file active, not passive, so you can check conditions of request environment and use model data to compose the response code. The language is very powerful so you can achieve nearly anything you want - see StringTemplate syntax http://help.wildapricot.com/display/DOC/Theme+files+language+syntax .

To support my HTML code that I created in the gadget template file, I also added my own CSS file. I put the file into the "Styles" folder - all CSS files in this folder are automatically added into all system responses:

Styles/ez.css - my own css file /************************************ Decorations ***********************************/ .decoration-brackets { color: #666; } .decoration-brackets:before { content: "["; padding-right: 0.4em; } .decoration-brackets:after { content: "]"; padding-left: 0.4em; } /********************************* Login box **************************************/ div#loginData { margin: 15px 0px 15px 0px; } div#loginData-notauthed a { text-transform: uppercase; } div#loginData-authed a { text-transform: capitalize; } div#loginData-authed .profilelink-inactive a, div#loginData-authed .profilelink-inactive.decoration-brackets { color: #999; } div#loginData-authed { margin-bottom: 7px; } div#loginData form input { margin-left: 0; margin-top: 5px; } div#loginData .mode-systemadmin { color: red; font-weight: bold; text-transform: uppercase; } This combination of HTML and CSS allows my site login behavior to work the way I want it - in public, member and admin modes.

The true power here is that Theme Overrides gives you ability to change HTML code - not just CSS code as in previous versions. This makes overall customization experience much easier -- you can create your own themes now and make very simple HTML code for them, without all those nasty DIVs that were required in previous releases.

Enjoy!