Design elements.  This site's layout is based on the SmugMug's Spartan template but with considerable customization. The sidebars have been separately constructed for individual webpages or webpage types to be context-sensitive.  The homepage, folder displays, and information pages use a modified version of the Spartan color theme. Galleries and the Enjoy page use two just-slightly-different dark background themes.  The heading font is Andika.  The body font is Roboto.  The keyword displays on the Tools & Notes page use SmugMug's classes for formatting but use custom HTML for content.   Panoramas, such as the three that appear at the end of this gallery, use SmugMug's Carousel widget, set up to show only that one image.

I've kept the SmugMug header in desktop view.   Here, the header provides access to the search function and fits in acceptably.  On the desktop Home page and the Enjoy slideshow pages, where the basic header would distract, I have custom modifications to limit its intrusiveness.  When logged in, I have narrowed the two-line header and have softened the colors. In mobile mode, where the header seems more generally intrusive, I've removed it when not logged-in.

I've kept the footer in most cases since it provides a user login link.  It's always present in mobile mode, excepting only cases where SmugMug code itself hides it.  In desktop mode, the footer shows on all folders and those pages and galleries where it's not troublesome.  I've hidden it on the Home page, the Enjoy pages, and some galleries that use the SmugMug style.  On the first, it either disappears or can distract.  On the second two, it can induce an otherwise unneeded scroll bar: a visual complexity I'd rather avoid.  SmugMug's policy is that the footer should not be removed.  Since the header is present in desktop mode, SmugMug branding is always present, as is a link to the SmugMug site for visitors.  I believe this meets the intent, if not the letter, of their policy.

Internal site database structure and web page display of that structure. The root level of the database contains only three folders, one of which is unlisted.  These folders and their web display are discussed below.  These notes reflect recent (Feb. 2020) database updates.     

(In what follows, the word "page" is restricted to the narrower SmugMug usage as a database node that can show text, links, and pictures from elsewhere, but does not contain its own database items.  The word "webpage" or the phrase "web display" are used more generically to describe the viewer display for a gallery, folder, or page.)   

Photo Library is the first folder at the root level of the database.  It contains all the listed photo galleries and several pages to be described below.  A full listing of the Photo Library contents can be seen on the Site Mgt page.   Putting all the pictures here, rather than at the root level of the database, makes the breadcrumbs lead back to Photo Library, whose web page serves as a table of contents.  (SmugMug's nominal table of contents page, the Browse page, lives outside the breadcrumb sequence.)  

The "Browse by Year" section of the Photo Library display reflects the internal organization of the database.  The display of these yearly folders uses "Items I Choose" folder/gallery/page blocks so I can interleave galleries and sub-folders to show chronological order, but the nesting is unchanged. 

The "Browse By Topic" section lists pages giving a cross-cut.  These pages also live in the Photo Library folder.  Content blocks on these pages link to galleries, mixed across years, associated with a particular topic.  These too make use of the "Items I Choose" option to pick the desired folders and galleries in the desired order.   In most cases the listings on different topic pages are mutually exclusive, although three galleries appear under both Yosemite Frontcountry and Sierra North.  In a few cases, a topic page's listing points to a subsidiary page.  For example, the Farther Afield topic page has another page entry, Las Vegas, which, in turn, lists galleries showing visits to that Nevada city.  (Yes, Las Vegas is a fine hiking destination even if it's better known for other activities.)  These sub-pages have also been tucked into the Photo Library database folder although they do not show directly on that folder's web display. 

There's a "gotcha" in using this approach. It makes heavy use of Folders, Galleries, and Pages (FG&P) content blocks with the "Select From Items I Choose" option, and, unfortunately, SmugMug has a bug there. There is a tool for editing selections, but when applied, it reorders the selected items alphabetically, whether or not that's desired. So unless alphabetical works for you (it doesn't for me), there's no workable selection editing function. To add a new entry to such a content block, one has to delete the old selection and re-select all the items, including new ones, in order and correctly. (No editing!) When adding a new gallery to the database, the approach here typically requires updating two such content blocks. To avoid errors, I typically write the two desired lists on paper first. If there were no mixture of folder and galleries at the third level, this bug would not be an issue: editing a Gallery content block, unlike a FG&P content block, with "Select From Items I Choose" does not force alphabetical order.

There's one more cross-cut: the Plant Families folder.  This too lives inside the Photo Library database folder.   It contains keyword-based smart galleries that collect pictures from the regular galleries (those in the year folders).   Plant Families is listed in the "By Topic" section of the Photo Library web display.  Note it is the only folder in that section.   The rest are pages.  

Infrastructure is the second folder at the root level of the database. It houses items that feed the main menu.  That folder contains the Featured Galleries and Enjoy pages as well as the Info folder which has the About Me, Tools and Notes, Site Design, and Site Mgt pages.  There are actually eight Enjoy pages, all located in the Enjoy Pages folder.  The basic Enjoy page linked from the sidebar menu has images from the last year while the other selections in the "Collection >" menus on those pages bring up others in Enjoy Pages.  These Enjoy pages area fed by smart galleries in the Enjoy Source Galleries folder.  The Infrastructure folder contains three additional galleries that carry out special roles.  Splash has the images that appear on the home page.  These repeat images in the Photo Library, except that these versions have been cropped to fit the common 16x9 aspect ratio and some have different settings for tone and/or sharpening.  Logo has the flower image that appear at the top left of every page.  Auxiliary Pictures has photos that have no home in a regular gallery and serve special functions.  These include (1) pictures I wish to include in Plant Families but not otherwise posted in Photo Library, (2) copies of pictures from the regular galleries needing a different caption for use in Plant Families or on the Info pages, (3) special crops for thumbnails, (4) extracts from videos for the Enjoy pages, and (5) the panorama pictures to be displayed using the carousel viewer. The first group is by far the largest. Most come from excursions not posted; a few are from early excursions where I included some plant pictures separately.  On the SmugMug Android/iOS app, where pages are not displayed, the Infrastructure folder shows only the folders and galleries discussed above.  The Info and Enjoy Pages folders appear empty.

Other is the third, unlisted, gallery at the root level.  It contains unlisted test pages, folders, and galleries, as well as some reference material.

The SmugMug Android/iOS app drove some of the database design. The choice of "By Year" for the actual database structure and use of pages for the most of the "By Topic" display is not critical for the operation of the website.  It could have been easily reversed with very little visible difference to a website user.  (And it was before February 2020.)  The breadcrumbs change, but since I've put both year and topic links in the descriptive text near the top of the web pages for various galleries, folders, and pages, navigation works either way.  However, the app can display only the actual database structure.   It cannot show pages.   It cannot produce a cross-cutting display.  "By Date" was chosen as the structure that shows there.   It was judged to be a bit simpler to understand and work with when the supporting text of the web display was not available.  It makes it easier to find what's new.  Putting everything else in Infrastructure or Other, rather than having more individual items at the root level, serves to reduce the clutter in the app. 

Third party tools.  I manage site content via the SmugMug plugin for Adobe Lightroom, but I sometimes find it useful to edit captions on SmugMug since the browser interface provides spell checking.  The Smug Syncback for Lightroom plugin allows me to pull those updated captions back to Lightroom.  I use Nicholas Sherlock's SmugMug Extension for Chrome to fetch permalinks for galleries, which I use in all the in text blocks.  That extension also provides a partial backup function.  

CSS mods. There are many. Most are local in scope, adjusting font sizes, margins and spacing, etc. A few go farther, addressing operational behavior or removing unwanted elements. In writing all of this, my goal has been to make a design created with the standard SmugMug tools work and look better, not to create something fundamentally different. I've tried to maintain a responsive design to various screen sizes. SmugMug's out-of-the-box designs are quite good for this, but when I've changed things, I've sometimes had to create alternate versions for various screen sizes. I generally use the Firefox Web Developer tools to inspect the SmugMug HTML and CSS to find the selectors (classes and the like) to work with. Note user CSS does not apply to the Android/iOS app.

The listings below show code I've applied to the entire site, to the default (modified Spartan), Gallery, and Enjoy themes, and to several specific pages. Most of the CSS is at the site level: all "structural" adjustments go here. The theme CSS entries only adjust font color and other attributes whose choice depends on the colors, opacities, etc. set in the theme. The page-level adjustments address issues specific to that page (or to one block on that page).

In constructing these CSS mods, I've drawn on the discussions in the Digital Grin Support forums and Nicholas Sherlock's site. Many thanks. The color-highlighting tags in the listings below were generated using Notepad++, with colors and fonts of my own choosing.

Other SmugMug users: feel free to use this code, either directly or for inspiration. I strongly encourage anyone using custom CSS to learn enough to write their own. A good place to start is McFarland's book on CSS in the O'Reilly Missing Manual Series. There are many good on-line resources as well. I find I regularly access pages at https://www.w3schools.com/ and this discussion of flexbox.