How To 002 – Making Tabs or Buttons for Your Navigation - Radiant

The Radiant Blog

Most of the creative things that can be done with the AdvancedMinistry (“AM”) platform will stem from how you use background images. So this week I am going to share another secret of how to creatively use a background image that will change the look-and-feel of your navigation.

  1. Start by beginning to set up your new website in AdvancedMinistry
  2. Figure out what your main navigation items are going to be by setting up your site architecture in the AdvancedMinistry administration panel.
  3. Roughly set up your site on the platform. The main concern here is determining the order of your title header, banner and navigation and approximately the height/location of the banner.
  4. Once you have all of your info filled in, preview your site.
  5. Take a screen grab or caption of what you have previewed.
  6. Take your screen grab/caption into Photoshop and drop it into the bottom layer of your working design file. (Make sure your screen grab is centred to your art board so that when you save out your background and select it to be centred in the browser everything will line up. Also when using this technique make sure when you set up your background set the Scroll with Page options to “Don't scroll with page”)
  7. What you have now is a working blueprint of your site and you can design tabs or buttons for your navigation right into your background image knowing where the text for those buttons will be located on the screen. (keep in mind that when you design for this platform, about 80% of the design hangs on what you do with the background because everything else is handled by the platform for you, unless you get into doing some custom html for your site.)
  8. Make your design (tab or buttons) however you want it to look and then save out your background making sure that none of the type is showing because once it is in your site the actual text that you've added in the administration panel will populate that area.
  9. Upload your background through the file manager and link to it in the background tab of the design area of AM.
  10. Preview your site
  11. Make adjustments as necessary.

One thing that you need to consider when doing this with your site is whether or not you regularly change your main level navigation. If you do change it often, this approach is something you may want to avoid because you would need to be constantly updating your background design to coincide with the the new navigation options.

Just do a little planning ahead and this technique could suit your site well and make it stand apart from a lot of other sites in the AM arena.