Click here to download the session’s PowerPoint and some templates I’ve built that will hopefully help get you started.
Here’s what’s included:
- Arena-Website_Design.pptx – Some things to consider when you’re planning your template.
- Arena Folder – Sub-Folders and Files to be placed in your Arena Folder if you’d like to use any of the Templates, CSS, etc. Or you can dissect them to learn like I do.
- OHCLocalTemplate-HTMLFrom3rdParty Folder – Gives a point of reference for where the Oak Hills Template and CSS files started.
As a point of reference, the templates were built in the following order:
- servefest_main.ascx & servefest_subpage.ascx
- brookwood_home.ascx & brookwood_sub_l_main_r_nav.ascx
I point out the order in which these are built to say…
You’ll very quickly notice that some of the things I recommend in the PowerPoint are not followed in every one of my templates. Why? Because they’re…
…more what you’d call “guidelines” than actual rules.
At the end of the day it’s all in what you need and how fast you need to get it done. My first template probably took 12 hours to simply modify the SampleThree.ascx into the MyBrookwood.ascx and then the CSS evolved over countless hours after that. A few weeks ago I finished the initial build of the OHCPortal.ascx in four hours and have spent another eight or so hours tweaking the CSS throughout the portal.
Why so long on CSS?
Good question! When you start adding the calendar, promotion, registration, etc. modules you’ll see that there are several CSS classes defined that need to be formatted. It’s kinda like Christmas morning – you never know what you’re going to get.
One of your favorite Firefox Extensions will be (if it isn’t already) the Web Developer Toolbar (check it out here). Since the documentation is weak on CSS elements in modules, this little lifesaver eliminates the guess work!
I want a border only on the Event Calendar cells with dates (not the blank placeholders).
What’s the CSS class name? The Web Developer Toolbar’s “Outline Current Element” feature tells me it’s .CalendarCell (as opposed to .CalendarBlankCell). Check out this example here.
Building an Arena Template is actually very easy. It’s even easier if you already have free-standing HTML and CSS files to start from. Please dig through any of the files I’ve shared and post any comments or questions below.