Changing Your Website Theme: Tips from a Home Beer and Wine-Making Organization

Redesigning my website was a big undertaking. There were many things to consider: How should the layout look? What will be the new color scheme? How much time and effort should I spend?

I have recently switched the WildApricot website theme for the Wines and Steins website. Wines and Steins is a home beer and wine-making group based in the Paso Robles, CA wine country, focusing on the promotion, education, and enjoyment of hand-crafted wines and beers.

Our old website needed a fresh and modern look, and so we decided to switch our theme to Kaleidoscope Neon.

Here are before and after pictures of the homepage:

Old version:

Current site:

I kept track of lessons learned throughout the several weeks it took me to make my changes. If you’re embarking on making a switch, this blog will cover some best practices from my personal experiences.

Here are three main steps that I followed:

1. Preparing for changing your theme 
2. Working on the cloned site 
3. Implementation

1. Preparing for changing your theme

Create a cloned site

I asked WildApricot’s support team to create a cloned site. I recommend you do all your customization on your cloned site – but keep in mind that you can’t transfer those changes to your production site. They must be redone.

Pay attention to the nuisances of the theme you’re considering

If I had it to do over again, I don’t think I would have chosen Kaleidoscope.

Pay attention to the button styles, and gadget styles. I went with Kaleidoscope Neon, even though I didn’t particularly care for the pink button colors. I didn’t realize how much extra work this would cause me. Once I got into making changes, I was too far along with this theme to turn back.

• Buttons: I wanted to change my button color to blue.  I ended up with 51 CSS customizations to do this.  Tracking down what to customize was very tricky sometimes. Here’s a link with additional help on customizing button colors.
• Gadgets: Not all gadgets have a place for a title, so I had to add content gadgets and fiddle with padding and margins to make them appear like they were part of the same.
• Login button/form: Kaleidoscope uses a little “man” icon as the login form/button. There is no caption explaining that you click it to log in. My users were confused so I added content gadgets above and below the little man that said (top) “Click icon to”, (bottom) “Login/Logout” and had to play with the margins, making them negative so they looked like they belonged to the icon. Unfortunately, when viewed on a mobile device the captions remain on the screen without the button. I tried following the help article to create a new gadget with captions but I ended up breaking the gadget code somehow so I reverted to the regular login gadget and ended up doing a theme override to make the theme not responsive. Quite a trade-off.

2. Working on the cloned site

Work with layouts for everything

I created layouts for each “row” on my pages. This provides a lot of flexibility such as changing column sizes. Setting the background color of the layout to one color and the background color of the gadget that sits on it allows for adding some style when you change padding to show some of the background.

Modify the colors.cfg file If you’re adding specific colors to your site that aren’t in your theme

By adding frequently used colors to the colors.cfg file they will show up in the theme colors pallet at the top when working with font colors. This requires enabling theme overrides.

Keep track of new images you’ve added to your cloned site

I created a separate folder in my Pictures folder and put all new images in there. That way I knew what needed to be moved over.

Keep good track of theme override changes and changes you made to Color and Styles

You will need to reapply these on your production site. Please note that all theme overrides, and any customizations made on the colors and styles screen on your existing site, will be discarded when you switch themes.

Comment your CSS and Theme Override changes very well

You’ll go back and wonder “what does this one do?” – many of them are not obvious.

Use “public view” frequently

The website editor is not WYSIWYG. You’ve got to look at your changes in Public View.

When in doubt, use the Help Center

WildApricot has an excellent Help Center. If you’re wondering how to do something, try to search the help system for the answer. Most times it will be there although you may need to be creative with your search terms. You can also find the Help Center in WildApricot’s main navigation.
If you’re unable to find an answer in the help, you can also let WildApricot know by clicking the Feedback option within the Help center menu.

3. Implementation

Put an “under construction” Home page up and make your real Home page not in menu

I put something like “our site is undergoing a facelift” with a cute little image and a link to the webmaster email address in case anyone needed to contact me. It’s up to you if you want to leave your other pages available while you’re working on them. I did, but only because I forgot to take them off!  It didn’t cause a problem.

Do some of your work on your production site ahead of time

I changed the layout and content of several of my pages. Before I was ready to put the site into production, I duplicated the production pages, made them “not in menu” and modified them to the new look. Then, when it came time to implement, I applied the new theme and fine-tuned the pages, moving them into the menu and removing the old ones.

Focus on your most used pages first

Getting your homepage and any other popular pages up and running first will cause the least amount of disruption.

Copy html if you need to

If your production page doesn’t look like you expected it to after you’ve applied your changes, go back to your cloned site and copy/paste the html from the cloned gadget to the production gadget.

Don’t forget to update the template on your “not in menu” pages

We have pages that are not in the menu, but are linked to from website pages. For example, our “getting the most of the website” document. These pages need to get the new theme applied too. I also applied the new page template to the system pages.

Indicate your default page template

If you’ve created a new page template using your new theme be sure to tag it as the default template. Any new page you add will be based on that template.

If you need more help…

While it takes time to redesign your website, making it appear fresh and modern is certainly rewarding. If you have any questions about website themes, you can find more information on WildApricot’s Help Center. You can also contact WildApricot’s support team if you have any other questions.

Karen Wall is a retired Director of Information Security. She keeps her enjoyment of technology satisfied by volunteering as webmaster for two websites, both of which use the WildApricot system (the recently redesigned Wines and Steins and the soon-to-be redesigned www.northcountynewcomers.org). Karen and her husband moved to Central Coast California wine country a few years ago to expand their knowledge and love of viticulture and wine making. They have recently made their first vintage of Syrah wine from their backyard vineyard of 70 vines.