Overall Design and Config Concepts
Programs in use
JOOMLA is the program creating this page, and most of the generated content
TNG is used when you select Family Tree in the main menu
Zenphoto is used when you select Family Photos in the main menu
All of the other options are articles or components of Joomla.
Making three separate programs (Joomla, TNG, and Zenphoto) look similar and work well together is not easy, and remains a work in progress. In this article, and sub-articles for each of the component programs, I will summarize what I have done. This is primarily for my own record keeping and reference, but if it helps someone else, then YAY!
Requirements
- Keep programs separate from each other and don't junk up the root directory.
- Web addresses and directories must be named for function rather than brand name. I reserve the right to change the programs that I use for things. I may decide to change from Joomla to Wordpress or TNG to PHPGedView or Zenphoto to Menalto Gallery, the tool I use should not define the web address.
/public_html
---/cms (this is where the Joomla installation is)
---/genealogy (this is where the TNG installation is)
---/gallery (this is where the Zenphoto installation is)
---/photos (this is where the jpg files are)
- Want similar fonts, colors, general layout.
- Want it to be easy to change - I'm not good at the "pretty" so changing colors needs to be easy and consistent when I realize things just don't work.
- Want it to work well cross browser, and be consistent across the modern browsers, as functional as possible for the old ones.
- Absolute minimum hackery, minimum coding. Since it's IE that needs the most hand-holding, those special hacks should be in different files that only load for those people that need them. That keeps the CSS files clean of freaky stuff, and focuses development on the modern stuff.
Reset and Sitestd.css
So I need to start clean, with as blank and predictable a page as I can, for everybody. That means I need a global reset to wipe out whatever browsers do on their own, and then a sitewide standard for fonts and colors and anything that would apply to every program. Research led me to the Yahoo reset, and then a sitestd.css file in my public_html directory that sets my fonts, a few generic settings, and has a reference list of the colors that I'm using. For every program that I have, the first CSS files that load, prior to anything the program itself does is:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="http://lptex.com/sitestd.css" />
Themes for each program
Each program comes with its own templates and themes, but since I want them to look similar to one another, and I want to control the colors and fonts, there's no way that I'll be able to use any out of the box template. I will however, pick one that is close, and modify from there. That's why it's especially important that I be able to keep my modifications in a separate directory, that won't be overwritten with any program upgrades and doesn't require a lot of hunting around to find things. Most programs are built to handle this concept, they expect you to copy one of their themes and rename it and modify it, upgrades then overwrite the standard themes but not your own. Of course, there's inconsistency as to whether they call them themes or templates, the terms have to kind of be used interchageably.
Joomla is simplest to configure: I copied one of the standard templates from cms/templates/beez to cms/templates/lptextheme and went to town customizing my index.php file, subdirectories for css, images, html, and js. If I want to customize the actual output, I can copy a file from the core, put it into the right place in my template's html directory, and voila, customized output. None of it gets overwritten with an upgrade, and it's easy for me to switch between templates to test stuff out. I haven't hacked anything, the core joomla stuff is still totally intact.
Zenphoto is pretty easy as well, at least as far as keeping things separate. Copy the default theme from gallery/themes/default to gallery/themes/lptextheme, select it to be used, and I off to the races!
Both Joomla and Zenphoto also have pretty active user communities developing themes that can be downloaded and unzipped, then activated quickly and easily. I have done that as a way to see how someone else implemented a particular design or feature, then use that code in my own theme.
TNG is a whole different animal. There are 8 different templates available from the author, and it is now possible to switch between them, but any changes you might make would get overwritten with an upgrade, so I've had to find my own way to have a theme-able design. It's a mix of things to set in the Admin interface, and files to load on the server. It's a bit of a mess actually, and with the latest upgrade to version 8.1.1 now also requires a hack to the system code, but it's still do-able, just not easy to explain or replicate. Separate article required.
Sitemenu.php
Rather than use any kind of Joomla wrapper, create a simple menu to go across the top of TNG and Zenphoto pages that will take the user back into the Joomla environment. This sitemenu.php will reside in the site root directory along with sitestd.css. It's manual, and won't have any submenus or dynamic interaction with Joomla. For now, this seems the best way to have some site consistency and not have all of the problems that wrappers bring to the party. This menu should look exactly like the main Joomla horizontal navigation menu. The css file for each programs' theme will highlight the appropriate menu item to indicate "active" status.
| Next > |
|---|