Conference Design Customization Checklist
By terrie | No Comments
Many self-service conferences are doing design customizations that are amazingly beautiful and thorough. We love that!
Design customizations are one of the main services we provide in our support packages, but the tools we use are the exact same tools you get from our self-service packages. So doing a design customizations is just a matter of skill and experience.
On the skill side, we usually say you should have basic web development experience, know CSS, and have access to a tool like Firebug. If you are that person, or have that person on staff, you can make CrowdVine look like any of the networks from our Favorite Designs post.
Below are tips for the major decisions you need to make before you get started and the checklist we use internally to make sure we didn’t make any mistakes.
Getting Started
You’ll find your design customization options on the Admin panel in the “Content and Design” section.
“Design” gives you access to basic features like changing colors or adding a logo. “Customize our default templates” is where you’ll find the goodies for advanced users with knowledge of HTML and CSS.
Many of the templates that are used to display a network are completely customizable by you. The two most common templates to override are layouts/top_header, which allows customize your own navigation banner, and sites/css, which allows you to add your own custom CSS.
You will probably want access to images for your design. You can upload those through the Admin Manage Uploads page.
Decision Time
Check for compatibility between your existing design and CrowdVine. Most customizations are based on an existing design from the main conference website. For the most part, CrowdVine is extremely flexible. But there are two gotchas. CrowdVine likes to use the entire content area and so we have a strong preference for avoiding vertical navigation (i.e. navigation that appears in a sidebar). CrowdVine also uses the prototype javascript library. This often conflicts if you’re using jquery in your design. If either of these are the case, most conferences choose to create a simplified variation of the design for CrowdVine.
Most CrowdVine customizations are based on an existing conference website. You need to decide whether to add the CrowdVine navigation as additional navigation or as replacement of existing design’s navigation. – in most cases, you can keep your site’s navigation and let CrowdVine add its own navigation below. Here are two examples of how that design decision works out:
CrowdVine navigation only
Conference navigation + CrowdVine navigation
Our default CrowdVine networks have an overall width of 940px, with the left column (#left_side) being 620px and the right column (#right_side) being 280px. Please keep in mind as you adjust the design of your network that decreasing the overall width could cause problems on certain pages. If you do plan on reducing the size of your network, we suggest changing the width of the left side before the right side. Many items on the post-customization checklist are there because of potential issues you may run into with width changes.
Many conferences want to add a sidebar for sponsors. This is possible, although it’s basically the most complicated design customization because it often requires changing the width of the CrowdVine content, which creates cascading effects. A less invasive way to add a sponsor column is to just add the column to content pages by customizing the pages/show template. If you do want an extra sidebar on all pages, you can add content to sites/optional_third_column and CSS to sites/css along the lines of:
#third-col{float:right;width:180px;}
#outer_content{width:940px;margin:0 auto;}
#content{width:730px;float:left;}
#left_side{width:440px;}
body#sites.show #left_side .summary, #left_side .summary{width:420px;}
#right_side{margin-left:0;}
OK, on to the checklist!
- Check that #flash and .prompt are pleasantly styled. These often get missed if you’re doing heavy customizing of colors in the content area.
- Make sure text areas aren’t cut of on private messaging, discussion posts, comments, and profile comments.
- Check the login page for pleasant styling (http://yournetwork.crowdvne.com/account/login)
- Check the photo page for pleasant styling (http://yournetwork.crowdvne.com/posts/photos)
- Check the map page for potential overlap issues (http://yournetwork.crowdvne.com/maps/show)
- Check the twitter page for correct styling, esp. borders/margin/padding (http://yournetwork.crowdvne.com/posts/twitter)
- Make sure the right side is actually on the right side on /posts instead of below the content
- For sites with a smaller #left_side, add this for IE7 and IE6: body#profiles.show #left_side #bio_section .infobox{width:__px;}
Happy customizing!