Site Design - Jim Ringland

Site design information, including a CSS listing. Explore if you're curious.  Borrow if it helps.

About the Site Design (for other SmugMug site owners)

This site's layout is based on the SmugMug's Spartan design but with considerable customization. The sidebars have been separately constructed for individual pages or page types to be context-sensitive.  The homepage, folder pages, 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 Notes & Tools 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 when in desktop view and have removed the SmugMug footer.  Having a header means the vertical alignment is the same logged in and logged out.  The header provides easy access to the search and login functions.  In the desktop view, the header seems a reasonable design element.  On the Home page and the Enjoy slideshow page, where the basic header would distract, I have custom modifications to limit its intrusiveness.  I have also made a large number of custom modifications to tone down the ugly and visually intrusive logged-in header styling SmugMug introduced in March 2018.  In mobile mode, where the header seems more generally intrusive, I've removed it (except when logged in) and have restored the footer.

Browse All is a folder that contains the regular photo galleries.  Putting all the pictures in the "Browse All" folder, rather than at the root level in the database, makes the breadcrumbs lead back to the Browse All page, which serves as a table of contents.  (SmugMug's nominal table of contents page, the Browse page, lives outside the breadcrumb sequence.)  The "Browse by Topic" section of that folder's page reflects the structuring of the gallery database.  The folder displays use "Items I Choose" folder/gallery/page blocks where necessary so I can interleave galleries and sub-folders.  In other cases, I get by with simple "Current Location" gallery blocks.  The "Browse By Year" section has folders that show galleries using "Items I Choose"  folder/gallery/page navigation content blocks that point to the appropriate galleries in the Topic folders.  No galleries actually live inside those Year folders!  The Plant Families folder (also inside Browse All) contains keyword-based smart galleries that collect pictures from the regular galleries.  The Topic / Year Site Organization gallery  (at the root level of the database) contains screen shots and explanatory text that walk though some of the details behind this site's database and user display construction.  This was posted in response to a request for an expansion on the few sentences above.

Three additional galleries lives at the root level of the database.More Nice Pictures has photos that have no home in a regular gallery: extra pictures (from 2010 and before) referenced in the Plant Families section but not elsewhere, pictures used in a second place (e.g., a smart gallery) but needing an alternate caption there, special crops for thumbnails or the Enjoy page, and the panorama pictures.  Splash has the images that appear on the home page.  These have versions in the regular galleries, but are specially cropped and have a little extra sharpening.  The  Enjoy-Recent Source Gallery is a smart gallery that collects images that feed the Enjoy page when it is set to limit its scope to only the last year or so (which is the default).  These galleries can be accessed by the links here or by the Site Mgt page which can be reached via the sidebar's Info entry.

At the root level there are also pages that support the Featured Galleries, Enjoy, and Info displays accessed via the sidebar.

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 provides a useful way 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. 

There are many CSS mods.  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. 

The listings below show code I've applied to the entire site, to the default (modified Spartan) and Gallery 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.  Colors are set by and are specific to 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 source is McFarland's book on CSS in the O'Reilly Missing Manual Series.  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.



CSS Code Attached to the Entire Site

/* Latest update 3 September 2019 -- Continuing tweaks to the new Lightbox V2, today's focusing on slideshows. /******************************/ /***** lightbox Version 2 *****/ /******************************/ /* In addition to the layout changes here, there are color changes in the Gallery Theme CSS. /* DETAILS SIDEBAR */ /* Narrow and darken the scroll bar in Firefox. This does not work at the moment since Smugmug strips this browser-specific non-standard code. If SM updates their CSS interpreter, this should function. 2019-08-16.*/ .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar { scrollbar-width: thin; scrollbar-color: #444 #777; } /* In the left side navbar, widen the marker next to the active panel icon. This provides a bit more of a visual cue as to what's going on. It also adds a guide on how to close the information panel. 2018-08-17*/ .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-primary-controls-list button.sm-button[data-selected="true"]::after { border-width: 0 0 0 6px; } /* Adjust the caption sizing and spacing to increase emphasis and visual focus to this section. There is a color change to pure white in the Gallery theme CSS. Modestly different values for desktop, mobile. 2019-08-18*/ @media (min-width:961px) { .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption { font-size: 18px; line-height:1.33em; margin-bottom:48px; } } @media (max-width:960px) { .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption { font-size: 16px; margin-bottom:36px; } } /* Remove the unnecessary keywords label. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2-sidebar-content .sm-image-metadata-keywords h5 { display:none; } /* When logged in on a desktop, realign the sidebar metadata section so the caption is on top but the keywords and edit button are side-by-side below. Shrink the edit button to just the pencil icon (no text). 2019-08-30*/ @media (min-width:961px) { .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content .sm-image-metadata{ display:flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content h2[data-elem-id="imagemetadata_title_text"] { width:100%; margin-bottom:24px; margin-top:24px; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content .sm-image-metadata-caption { width:100%; margin-bottom:36px; margin-top:0; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content .sm-image-metadata-keywords { width:81%; /* this makes space for the button. Sidebar is 364px, button needs 44px + margin, this allows 26px margin*/ margin-top:0; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content button[data-elem-id="imagemetadata_edit_button"] { min-width: auto; width:auto; padding: 0 12px; margin-top:0; background: transparent; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content button[data-elem-id="imagemetadata_edit_button"] > span{ display: none; } } /* Remove the Camera Info to lable line. Since it had quite a bit of vertical margin, add some to the information table, more on the desktop than on mobile. 2109-08-30*/ .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar-content > h5 { display:none; } .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar-content > .sm-imageinfo-container { margin-top:60px; } @media (max-width:960px) { .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar-content > .sm-imageinfo-container { margin-top:24px; } } /* Tighten up the spacing on camera info entries in the information sidebar. This reduces the need for scrolling in many cases. 2019-08-16.*/ .sm-lightbox-v2-sidebar-content .sm-imageinfo-container .sm-imageinfo-label, .sm-lightbox-v2-sidebar-content .sm-imageinfo-container .sm-imageinfo-value { padding-bottom: 4px; } /* Below area many specific adjustments to the entries in the Camera Info data table. Note the basic metadata fields are Camera, Lens, ISO,Focal Length, Aperture, Exposure Time, Name, Size, File Size, Date Taken, Date Modified, and Copyright. The goal here is to produce a more compact camera info section which does not compete as much for visual attention with the more important title and caption. To that end, I've reduced line spacing, adjusted spacing and wording to avoid multi-line wrapped entries, and have removed a few entries that seem unnecessary. /* Remove three of the basic entries. 2019-08-28*/ .sm-lightbox-v2-sidebar-content tr[data-metadata="File Size"] { display:none; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Name"] { display:none; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Date Modified"] { display:none; } /* For those that remain, set width of the label to 0%. This shrinks the width of the labek column to the length of longest word, rather than half the table width, leaving more space for the data. For the three two-word labels (Focal Lenth, Exposure Time, Date Taken), this would result in a word-wrap and uneven spacing. Replace these with one-word alternatives. Note that when SHOW MORE is active, there are entries without the 0% width so the table returns to 50% label, 50% data. That seems OK given the complexity of some of the labels there and that I plan to turn that option off except for my own use as site owner. 2019-08-28*/ .sm-lightbox-v2-sidebar-content tr[data-metadata="Camera"] .sm-imageinfo-label { width:0%; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Lens"] .sm-imageinfo-label { width:0%; } .sm-lightbox-v2-sidebar-content tr[data-metadata="ISO"] .sm-imageinfo-label { width:0%; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Focal Length"] .sm-imageinfo-label { font-size:0; width:0%; padding-bottom:0; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Focal Length"] .sm-imageinfo-label:before { Content:"Focal Ln"; font-size:12px; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Focal Length"] .sm-imageinfo-label { width:0%; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Aperture"] .sm-imageinfo-label { width:0%; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Size"] .sm-imageinfo-label { width:0%; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Exposure Time"] .sm-imageinfo-label { font-size:0; width:0%; padding-bottom:0; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Exposure Time"] .sm-imageinfo-label:before { Content:"Shutter"; font-size:12px; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Date Taken"] .sm-imageinfo-label { font-size:0; width:0%; padding-bottom:0; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Date Taken"] .sm-imageinfo-label:before { Content:"Date/Time"; font-size:12px; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Copyright"] .sm-imageinfo-label { width:0%; } /* Remove the SHOW MORE [camera info] button but restore when logged in as owner and reduce it from full width. It's too much information and too much clutter for general browsers, but I occaisionally like to check some of it as the owner. Thanks to Allen from Dgrin for correcting my earlier code here. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2 .sm-imageinfo-advanced-btn { display:none; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2 .sm-imageinfo-advanced-btn { display:inline-flex; width:auto; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2 .sm-imageinfo-advanced-btn span{ font-size:12px; font-weight:400; } /* PHOTO BUTTONS (ON TOP OF PHOTO) */ /* Update font for the overlay title on top of the image to be smaller than the default 24px This is mostly moot at the moment given I use titles only in one very-out-of-the way test gallery now, but I may use them more in the future. Note that when space is really constrained, SmugMug uses the h4 tag for the title, which uses a 14px font. That seems OK. For captions, change font weight slighly downward so it is the same as the h2 captions. Use same font. Default is 16px, so a lttle smaller yet compared to the title. 2019-08-28. */ .sm-user-ui .sm-lightbox-v2-photo-buttons h2 { font-size: 18px; } .sm-user-ui .sm-lightbox-v2-photo-buttons p { font-weight: 400; } /* Hide caption down there when title is present, and restore the field to the height used when just a title is present. 2019-08-27.*/ .sm-lightbox-v2-photo-title-and-caption > div > p.sm-text-ellipsis { display:none; } .sm-user-ui .sm-lightbox-v2-photo-title-and-caption {height:48px;} /* Cuts off caption or title at 30% of the width of image so as to not overwhelm it but to make it clear it's there. This cuts off very few titles (and when it does, it may be best to rewrite the titles), but it will cut off most captions. Limited to desktop and not applied when SM uses the space-contrained small-button version of the photo bouttons (the version with the h4 header). 2019-08-29*/ @media (min-width:961px) { .sm-user-ui .sm-lightbox-v2-photo-buttons button.sm-button-size-large { width:30%; } } /* AUTO HIDE */ /* Special handling of auto-hide. Auto-hide was on with the arrival of lightbox v2, and since the auto-hide setting lives in the lightbox section of gallery customization, every gallery not on the template would have to be changed individually. This turns it off for all galleries, but there are exceptions, making this a little convoluted. 2019-08-31. In default lightbox mode, retain auto-hide for the overlay title/caption. 2019-08-31. In slideshow lightbox mode, retain auto-hide everywhere (do not apply this adjustment) But in slideshow lightbox mode, SmugMug has opted not to apply auto-hide to the overlay title/caption, but rather to keep it permanent displayed. The argument is that this limits distraction. Certainly on-and-off is a distraction, but I'd prefer the other option. The second block permanently hides the overlay title/captions in slideshows. 2019-09-03.*/ .sm-user-ui .sm-lightbox-v2[data-hide-ui][data-lightbox-mode="default"] .sm-lightbox-v2-hideable:not(.sm-lightbox-v2-photo-buttons) { opacity:1; -webkit-transition: opacity .5s; transition: opacity .5s; } .sm-user-ui .sm-lightbox-v2[data-lightbox-mode="slideshow"] .sm-lightbox-v2-photo-buttons { opacity:0; } /* Additional option not currently implemented ... /* Add a "Read More" note to the title or caption in the photo buttons bar /* .sm-user-ui .sm-lightbox-v2-photo-title{ margin-right:0; } .sm-user-ui .sm-lightbox-v2-photo-buttons::after { content:"read more"; font-size:12px;*/ /* Hide photo buttons (caption or title) except on hover (on desktop only). Adopted from Lightbox 1 code 2019-08-26. @media (min-width:961px) { .sm-user-ui .sm-lightbox-v2-photo-buttons { opacity: 0; -webkit-transition: 0.25s opacity; -moz-transition: 0.25s opacity; transition: 0.25s opacity; } .sm-user-ui .sm-lightbox-v2-photo-buttons:hover { opacity: 1; } } /* Add a little space to separate scroll bar, if it appears, from the image On hold pending SM revisions of scroll bar. As this stands, it doesn work that well with the forward and back arrows. @Media (min-width: 961px) { .sm-lightbox-v2 .sm-lightbox-v2-sidebar { margin-right: 24px; } }*/ /* HEADER --------- Several separate changes here, although some are connected. First of all, just remove the header in the mobile display when not logged in. It's an OK design element on the desktop (with the modifications below), but it's a space eater on a mobile. 2017-12-25*/ @Media (max-width: 736px) { .sm-page:not(.sm-user-loggedin) .sm-page-header { display:none; } } /* Remove the header line advertisement that SM sometimes put in. Added 2013, removed when the advertisement went away, restored 2016-11-23. Flickr blub removed 2018-04-20*/ .sm-page-header-navitem-gosm, .sm-page-header-navitem-flickr { display:none; } /* Move the SmugMug logo over a little, centering the green smile over the center of sidebar when not logged in. This helps the visual balance on dark homepage backgrounds when the text doesn't show much. When logged in, better to have the logo flush left to make space for the left menu section. 2018-03-09*/ .sm-page:not(.sm-user-loggedin) .sm-logo-link { margin-left:32px; } /* Remove bottom line on header 2013-03-09*/ .sm-user-ui .sm-page-header { border-bottom-style:none; } /* Next, a bunch of changes to the header while logged in. SM made the logged in header all black in March 2018. I prefer a less obtrusive color and one that more closely reflects the general visual feel of the the non-logged in view. The following moves the header to more gentle grays. The theme CSS items define header background to match the theme but the drop downs and icon colors are fixed. Make the left menu section with the update, organize, and customize buttons transparent. Adjust spacing. Get rid of the lables and angle brackets at the top level but not in the popouts below. Make icon black with a white halo background. 2018-04-05 */ .sm-user-loggedin .sm-page-header .sm-page-header-nav-left .sm-component-menu { background-color: rgba(0,0,0,0); margin-left:0; } .sm-user-loggedin .sm-page-header .sm-page-header-nav-left .sm-component-menu-item .sm-icon + .sm-component-menu-label, .sm-user-loggedin .sm-page-header .sm-page-header-nav-left .sm-component-menu-item .sm-icon.sm-icon-AngleBracketDown { display:none; } .sm-user-loggedin .sm-page-header .sm-page-header-nav-left .sm-icon-AngleBracketRight { padding-left: 0; } .sm-user-loggedin .sm-page-header .sm-page-header-nav-left .sm-component-submenu .sm-component-menu-item .sm-icon + .sm-component-menu-label { display:inline; } .sm-user-loggedin .sm-page-header .sm-component-menu-item .sm-icon{ background: radial-gradient(closest-side at 50% 50%, white,transparent 110%); color:black; border: none; } @Media (max-width:1200px){ .sm-page-header-nav-left > .sm-component-menu > .sm-component-menu-item > .sm-component-menu-item-link > .sm-icon, .sm-page-header-nav-left > .sm-component-menu > .sm-component-menu-item > .sm-icon { background: radial-gradient(closest-side at 50% 50%, white,transparent 55%); } } .sm-page-header-nav-left > .sm-component-menu > .sm-component-menu-item > .sm-component-menu-item-link > .sm-icon{ border:none; } /* Some similar things are needed on the right side with the login avatar, search box, and help icon. Some of these need special adjustments to deal with backgrounds and get rid of some lables and extra icons. The mod Spartan theme also has text color adjustments for the search input box. Latest update 2018-04-05 */ .sm-user-loggedin .sm-page-header .sm-page-header-nav-right .sm-component-menu { background-color: rgba(0,0,0,0); margin-left:85px; } @Media (min-width: 737px) { .sm-user-loggedin .sm-page-header-navitem-account > .sm-component-menu-item { margin: 0; } } .sm-user-loggedin .sm-page-header-navitem-account:hover .sm-page-header-account-avatar-wrapper, .sm-user-loggedin .sm-page-header-navitem-account[data-user-menu-open="true"] .sm-page-header-account-avatar-wrapper { background:transparent; } .sm-user-loggedin .sm-page-header .sm-component-menu-item .sm-icon.sm-icon-MoreVert { display:none; } .sm-user-loggedin .sm-page-header-account-avatar-wrapper { border:none; } .sm-user-loggedin .sm-page-header .sm-button-header-support .sm-icon, .sm-user-loggedin .sm-page-header .sm-page-header-search .sm-icon, .sm-user-loggedin .sm-nui.sm-page-header .sm-page-header-search-button{ background: radial-gradient(closest-side at 50% 50%, white,transparent 110%); color:black; border:none; } @Media (max-width: 1200px){ .sm-user-loggedin .sm-nui.sm-page-header .sm-page-header-search-button{ background: radial-gradient(closest-side at 50% 50%, white,transparent 55%); } } .sm-user-loggedin .sm-page-header .sm-page-header-nav-right .sm-button-header-support { background-color:transparent; border:none; min-width:0; margin:0; padding: 0 15px; } .sm-button .sm-icon.sm-icon-HelpEncircled + .sm-button-label { display: none; } /* On both sides, use white text on dark gray (including when hovering) on the submenus. A little location adjustment too. 2018-03-08 */ .sm-user-loggedin .sm-page-header .sm-component-menu.sm-component-submenu { margin-left:10px; background-color: dimgray; } .sm-user-loggedin .sm-page-header .sm-component-menu-item:hover:not([aria-disabled="true"]) > .sm-component-menu-item-link, .sm-user-loggedin .sm-page-header .sm-component-menu-item:hover { color:white; } /* Some special handling of the header when not logged in. Remove the help icon and move the search field over a bit so it isn't flush right. There are some color adjustments in the themes. 2018-03-08*/ .sm-page:not(.sm-user-loggedin) .sm-button-header-support { display:none; } .sm-page:not(.sm-user-loggedin) .sm-page-header-navitem-login + .sm-page-header-search { margin-right: 24px; } /* The home page. Make the header background transparent and remove the bottom line. 2018-03-08*/ .sm-user-ui .sm-page-home .sm-page-header { background-color:rgba(0,0,0,0); border-bottom-style:none; } .sm-user-loggedin.sm-page-home .sm-nui .sm-page-header-search .sm-form-field-text-input { color:#000; border:none; } /* STATUS LINE -------------- The status line is the small text line that is inserted just below the header line when logged in to identify folders or galleries that are unlisted or protected. That insertion means the vertical layout when logged in is different from that for an un-logged-in regular user. This moves the status text into a blank space in the SM header and closes up the space. With this logged-in and -out views align. 2016-09-12*/ .sm-user-loggedin.sm-user-owner .sm-node-status { background: rgba(0,0,0,0); margin-top: -36px; margin-bottom: 12px; } /* SIDEBAR ---------- SmugMug's tools offer no way to pin sidebars introduced at the folder, page, or gallery level, which I use to provide context-specific information. SmugMug only has tools to pin a single site-wide sidebar. The following code pins all sidebars. The @Media limits the pinning to apply onbly when the screen is wide enough that the sidebar shows at the left (it's moved to the top for narrow screens) AND the screen is long enough to show the sidebar in its entirety plus some extra. The z-index makes sure the flyout for the Info submenu stays on top of the center-region elements. However, this interferes with the user customization editing tools, hence the second block. Initial version JTR 2014-06-20. Latest adjustment 2018-01-23. */ @Media (min-width:737px) and (min-height:765px) { .sm-user-ui .sm-page-layout-sitetemplate .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left { position:fixed; z-index:2; } .sm-user-ui .sm-page-edit .sm-page-layout-sitetemplate .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left { z-index:0; } } /* Center the bottom sidebar descriptive text box on on mobile. 2017-12-27. */ @Media (max-width: 736px) { .sm-page-layout-region-left div:nth-child(3) { text-align: center; } } /* Remove the descriptive text at the bottom of the sidebar on selected pages when in mobile mode. This simplifies the mobile display. The !important is needed because SmugMug uses the !important quite regularly in their CSS aimed at mobile mode. 2017-12-27, last updated 2018-12-07.*/ @Media (max-width: 736px) { .sm-page-node-SpHcs .sm-page-layout-region-left div:nth-child(3), /*Featured Galleries*/ .sm-page-node-TwCV6 .sm-page-layout-region-left div:nth-child(3), /*Browse All*/ .sm-page-node-5cMhRX .sm-page-layout-region-left div:nth-child(3), /*California Coast Range*/ .sm-page-node-8h4588 .sm-page-layout-region-left div:nth-child(3), /*Far Northern Califoria*/ .sm-page-node-WJ6ZQR .sm-page-layout-region-left div:nth-child(3), /*Farther Afield*/ .sm-page-node-ZcP74K .sm-page-layout-region-left div:nth-child(3), /*Sierra North*/ .sm-page-node-9TBWWX .sm-page-layout-region-left div:nth-child(3), /*Sierra South*/ .sm-page-node-gBJRkH .sm-page-layout-region-left div:nth-child(3), /*Yosemite*/ .sm-page-node-nrrS9k .sm-page-layout-region-left div:nth-child(3), /*SF Bay Area*/ .sm-page-node-bPCmhH .sm-page-layout-region-left div:nth-child(3), /*House and Garden*/ .sm-page-node-WkHQPc .sm-page-layout-region-left div:nth-child(3), /*Civilized Places and Events*/ .sm-page-node-5kXwj .sm-page-layout-region-left div:nth-child(3), /*Plant Families*/ .sm-page-node-Wpq6bK .sm-page-layout-region-left div:nth-child(3), /*2018*/ .sm-page-node-dCWpG7 .sm-page-layout-region-left div:nth-child(3), /*2017*/ .sm-page-node-WSxSgw .sm-page-layout-region-left div:nth-child(3), /*2016*/ .sm-page-node-MP7XZ9 .sm-page-layout-region-left div:nth-child(3), /*2015*/ .sm-page-node-rWjZNP .sm-page-layout-region-left div:nth-child(3), /*2014*/ .sm-page-node-3Gmc3L .sm-page-layout-region-left div:nth-child(3), /*2013*/ .sm-page-node-ndr7x6 .sm-page-layout-region-left div:nth-child(3), /*2012*/ .sm-page-node-LFZq8T .sm-page-layout-region-left div:nth-child(3), /*2011*/ .sm-page-node-knD8mw .sm-page-layout-region-left div:nth-child(3){ /*A Few 2006-10 Galleries*/ display:none !important; } } /*Adjusts the spacing between items on the vertical nav bar menu inside the sidebar. Ref: http://www.dgrin.com/showthread.php?t=239756 Font size adjustment for new version of the Roboto font. 2013-08-26, adjusted 2015-01-15. */ .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink { margin-bottom: 12pt; font-size: 17px; } /* Adjusts the spacing on the submenus. 2016-12-30*/ .sm-page-widget-nav-toplink .yui3-menu-item > .yui3-menu-label { padding: 0 36px 0 22px; } /* Internet explorer patch to get the logo text to wrap. 2018-09-10*/ .sm-browser-ie .sm-page-widget-logo .sm-page-widget-logo-align-center { display:block; } /* Remove the fifth element in the sidebar menu, a link to the search page, for desktop menus (which use .sm-page-widget-nav-popover), but not in mobile mode (which use don't) 2018-12-05 */ .sm-page-widget-nav-popover .sm-page-widget-nav-toplink:nth-child(5) { display:none; } /* JUMP TO TOP POP UP --------------------- As implemented, the JUMP TO TOP button can cover site content in undesirable ways. Two cases: First case: the screen is wide enough (screen width >= 737px) that the sidebar shows at left. The first block below moves the JUMP TO TOP button to open space at the left under the sidebar. The second block moves it up to just under the sidebar when the screen is tall enough that the sidebar is pinned. (See the SIDEBAR code above.) Inserted 2016-04-07, latest update 2018-03-27. */ @Media (min-width:737px) { .sm-button.sm-page-scroll-to-top { left:80px; max-width:135px; } } @Media (min-width:737px) and (min-height:765px) { .sm-button.sm-page-scroll-to-top { top:700px; bottom: inherit; } } /* Second case: narrower screens (screen width <= 736px)) where the "sidebar" is moved to the top. This reduces the button content to just an arrow Ref: http://dgrin.com/showthread.php?t=257626, code from Aaron Meyers at SmugMug, with some modifications. Added 2016-04-12, min-width adjusted 2017-12-11.*/ @media (max-width: 736px) { .sm-button.sm-page-scroll-to-top { padding: 4px; } .sm-button.sm-page-scroll-to-top .sm-page-scroll-to-top-label { display: none; } } /* BREADCRUMBS -------------- This adjusts the small breadcrumb font size upwards, in response to Google's new Roboto font. Before it was 14px. JTR 2015-01-15, last updated 2018-01-05*/ .sm-user-ui .sm-breadcrumbs > a { font-size: 15px; } /* And this adjusts the large breadcrumb font downwards, making this more in line with other text on the pages. Added 2013-11-04. Modified 2015-01-05, 2017-09-02.*/ .sm-breadcrumbs h1 { font-size:24px; } /* Add a little space above the breadcrumb. I thought there was some without my setting any margins, but that may have disappeared in one of the recent SM updates ... or maybe I'm just opting for a spacing change I didn't have before. Inserted 2017-09-02. */ .sm-breadcrumbs { margin-top: 12px; } /* BRIGHTEN SMALLER DISPLAY IMAGES ---------------------------------- This increases the brightness of small, medium, and large display image classes used in navigation content boxes (small and medium) and in the collage landscape gallery display (large). These display images seem slightly darker than the biggest ones, perhaps because of the scaling algorithm. I've not brightened the smallest thumbnails. I use them rarely. The class there would be .sm-tiles-Th img.sm-image. Display XL, X2, and X3's are, in theory, darker than the originals too, but that difference is even smaller. Note that the filter command only works on more recent versions of many browsers and, as of the date added, does not work on IE. Ref: http://dgrin.com/showthread.php?t=247548, which cites http://www.4p8.com/eric.brasseur/gamma.html although it is not clear whether that particular problem is at work here or not. Added 2015-04-08. Several small amount adjustments, most recently 2015-06-20. */ .sm-tiles-S img.sm-image { filter: brightness(109%); -webkit-filter:brightness(109%); } .sm-tiles-M img.sm-image { filter: brightness(106%); -webkit-filter:brightness(106%); } .sm-tiles-L img.sm-image { filter: brightness(104%); -webkit-filter:brightness(104%); } /* NAVIGATION CONTENT BOXES --------------------------- Sets the normal font weight (rather than light) and size. Added 2013-08-26, revised 2015-01-15 in response to new Roboto font.*/ .sm-page-widget-folders .sm-tile-title, .sm-page-widget-galleries .sm-tile-title, .sm-page-widget-nodes .sm-tile-title, .sm-page-widget-pages .sm-tile-title { font-size:17px; font-weight:400; } /* Allows multi-line titles on grid displays. First version 2013-08-31. 2015-01-15: Line height adjustments inserted for new Roboto font. 2015-09-29: Max-height, -webkit-line-clamp, align-items, and padding-bottom added to adjust after for SM updates 2018-09-16: Note this also affects thumbnail-style gallery displays. Since this site does use that style, this is moot, but if it did, some revision for that case would be needed. */ .sm-tiles-grid.sm-tiles-info-after .sm-tile-info p { overflow: visible; line-height: 1.25em; max-height: 3em; } .sm-tiles-grid.sm-tiles-info-after .sm-tile-info-text { -webkit-line-clamp:3; } .sm-tiles-grid.sm-tiles-info-after .sm-tile-info { align-items:initial; padding-bottom: 0.8em; } /* TEXT WIDGETS --------------- Adjusts the line spacing on text widgets to match behaviour before the 2013-10-31 text editor change. The SmugMug CSS forces a minimum line-height of 20px, too large if the text is 14 or 12pt. Added 2013-11-01.*/ .sm-widget-text p { line-height: inherit; } /* FOOTER --------- I've just gone ahead and hidden it when in desktop view and when logged in. In these cases, the header shows, so the footer is redundant. The latter can cause unnecessary scroll bars in some cases (e.g., in SmugMug style galleries in some window sizes under Firefox). While SmugMug officially requires the footer, using the header would seem to address the same requirement. The basic idea is from leftquark (http://www.aaronmphotography.com/Customizations/Sitewide/Remove-SmugMug-Footer) who cites Lamah as his source. Added 2016-02-18 for all cases. Limited to desktop view and when logged in, 2017-12-25 */ @Media (min-width: 737px) { .sm-page-powered-by { overflow:hidden; height:0; } } .sm-user-loggedin .sm-page-powered-by { overflow:hidden; height:0; } /* SEARCH PAGE -------------- Puts a bit of margin around the results section of the search page and around each icon. Added 2013-11-01. Last update 2018-01-23.*/ .sm-search { margin:0px 24px; } .sm-search-result-img { margin:12px; } /* DATE PAGE ------------------------- /* Spacing adjustments for the title on the second entry group to better match the first and to separate the two a bit more. 2018-01-23, updated 2018-01-25*/ .sm-page-date-range h2 { margin-top:18px; margin-bottom:8px; } /* Clarify date page titles. 2018-01-23*/ .sm-page-date-years h2::before { content: "Find Items in this " } .sm-page-date-range h2::before { content: "Find Items in this " } /* SLIDESHOW CAPTIONS --------------------- SM provides an option to have captions show in the slideshow. If turned on, this code provides that the captions only show when the mouse hovers over them. JTR 2015-03-30. Transition speed controls added 2015-04-02.*/ .sm-slideshow-image .sm-tile-info { opacity: 0; -webkit-transition: 0.25s opacity; -moz-transition: 0.25s opacity; transition: 0.25s opacity; } .sm-slideshow-image .sm-tile-info:hover { opacity: inherit; } /*************************************************************/ /**** Galleries (not including the Lightbox-specific code ****/ /*************************************************************/ /* CAROUSEL ----------- Removes arrows from the carousel display, which I only use in galleries as a single-image panorama viewer. The slider bar is much more useful and the arrows can impact the visual experiences, especially on smaller screens. Inserted 2016-02-20. Moved from Gallery Theme CSS to Entire Site CSS, 2017-01-02*/ .yui3-g .sm-component-carousel .sm-component-carousel-previous, .yui3-g .sm-component-carousel .sm-component-carousel-next { display:none; } /* Expands scroll bars in Chrome. Were 12px. Makes the moving part of the scroll bar higher contrast against the background. While this is primarly of value for the carousel, it apply to all scrollbars. The other major use is in the lightbox with image sizes larger than "fill". 2019-04-25*/ body ::-webkit-scrollbar, body ::-webkit-scrollbar-corner { width: 24px; height: 24px; } .sm-user-ui body ::-webkit-scrollbar-thumb { background-color: rgba(224,226,232,0.3); } /* GALLERY COVER (HEADER) ADJUSTMENTS ------------------------------------- The cover is the new gallery picture/title/description combination up top. I've many small adjustments. Spacing assumes the breadcrumb block has a bottom margin of of 6. Added 2016-06-03 -04 -05 or -06 except as noted. /* GALLERY COVER -- INFORMATION BOX, BOTH WITH AND WITHOUT IMAGE IN USE First, cover information box spacing adjustments. (This is the container for the title and description.) The first block below removes extra margin that is only inserted for one particular data-size parameter. I'm not sure why it's there, but it doesn't seem necessary. The galleries look better to me without. The second block adjusts spacing because of my hiding the "Download All" and "Buy Photos" buttons. In this block, first class sequence handles narrow screens where the buy button is automatically off; the second handles wider screens where it could be on if I wasn't hiding it.*/ .sm-user-ui .sm-gallery-content[data-size="medium"] .sm-gallery-header { margin: 0; } .sm-user-ui .sm-gallery-cover[data-show-slideshow="true"] .sm-gallery-cover-info, .sm-user-ui .sm-gallery-cover[data-show-download="true"][data-show-slideshow="true"] .sm-gallery-cover-info { padding-right:60px; } /* GALLERY COVER -- ADJUSTMENTS WHEN IMAGE NOT USED This makes the gallery header design look a little more like page and folder headers and a little more like the gallery alignment before the 2016-06 SmugMug changes ... but still moving in the direction of the future design using a cover picture. The special handling of SmugMug style galleries is there to reduce the occurrence of vertical scrollbars in Firefox when not operating in full screen mode. (There will be no scrollbars with single line descriptions, captions, and keyword lists.) Minor update 2018-01-12*/ .sm-user-ui .sm-gallery-cover[data-show-image="false"] { margin-bottom: 46px; /*change from 30 on 2017-01-12*/ } .sm-user-ui .sm-gallery-cover[data-show-image="false"] .sm-gallery-cover-title { font-size: 32px; margin-top: 24px; padding-bottom: 6px; line-height: 1.3em; } .sm-user-ui .sm-gallery-smugmug .sm-gallery-cover[data-show-image="false"] .sm-gallery-cover-title { margin-top: 6px; } .sm-user-ui .sm-gallery-cover[data-show-image="false"] .sm-gallery-cover-description { line-height: 1.3em; padding-top: 12px; } @Media (min-width:737px) { .sm-user-ui .sm-gallery-cover[data-show-image="false"] .sm-gallery-cover-description { font-size: 16px; } } /* GALLERY COVER -- DATE RESULTS, KEYWORD RESULTS, AND POPULAR PAGES On these three pages, there's no image and no title in the cover, just the slideshow button. It seems cleaner just to remove the cover altogether on these. This works better on smaller laptops where vertical space is limited. 2018-01-24*/ .sm-user-ui .sm-page-node-sw2Dz .sm-gallery-cover[data-show-image="false"], /*date results*/ .sm-user-ui .sm-page-node-8jPnf .sm-gallery-cover[data-show-image="false"], /*keyword results*/ .sm-user-ui .sm-page-node-tm2LX .sm-gallery-cover[data-show-image="false"] { /*popular*/ display:none; } /* GALLERY COVER -- ADJUSTMENTS WHEN IMAGE IS USED These make some of the details look more consistent with pages, folders, and galleries without the cover photo. The first block locates it with what seem appropriate margins and an appropriate size. The second block provides a larger and darker "scrim" background behind the text from improved readability with brighter or high-contrast images. SmugMug offers a small scrim with less contrast. The third and fourth blocks manage the title and description text. Last adjustment 2017-01-12*/ .sm-user-ui .sm-gallery-cover[data-show-image="true"] { margin-top: 24px; /*change from 12 on 2017-09-102*/ margin-bottom: 64px; /*change from 48 on 2017-01-12*/ max-height: 425px; } .sm-user-ui .sm-gallery-cover[data-show-image="true"] .sm-gallery-cover-info { background: no-repeat linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0) 100%); padding-top: 60px; padding-bottom: 10px; } .sm-user-ui .sm-gallery-cover[data-show-image="true"] .sm-gallery-cover-title { font-size: 36px; padding-bottom: 6px; } .sm-user-ui .sm-gallery-cover[data-show-image="true"] .sm-gallery-cover-description { font-size: 15px; line-height: 1.3em; max-height: calc(1.3em * 3); } .sm-user-ui .sm-gallery-cover-readmore, .sm-user-ui .sm-gallery-cover-info[data-show-readmore="true"][data-show-readmore-newline="false"] .sm-gallery-cover-readmore { line-height: 1.3em; margin-top: calc(1.3em * 2.2); } .sm-user-ui .sm-gallery-cover[data-show-image="true"] .sm-gallery-cover-description /* GALLERY COVER -- ADJUSTMENTS TO BUTTONS USED WITH THE COVER Fourth, adjustments to the buttons that show with the cover (the header buttons). The first block inserts a drop-shadow to match the "Jump to top" button when there is no cover image. The second block adjusts the spacing of the buttons to fit better. The third block turns off the buy-button that otherwise would show when I'm logged in. The fourth block turns off the download-all button. I'm OK with individual image downloads but think a one-stop gallery-level download is too much. These two capabilities are currently linked, so the only way to turn off the whole-gallery download while allowing single-image downloads is to eliminate this button. Latest update 2016-12-08 to reflect SM class definition changes when adjustment capability came in. */ .sm-gallery-cover[data-show-image="false"] .sm-gallery-cover-buttons .sm-button { box-shadow:3px 3px 9px rgba(0,0,0,0.5); } .sm-gallery-cover .sm-gallery-cover-buttons .sm-button { font-size:12px; line-height: 32px; margin-left: 4px; padding: 4px 8px 4px 8px; } .sm-gallery-cover .sm-gallery-cover-buttons .sm-gallery-cover-buy-button { display:none; } .sm-gallery-cover-download-button { display: none; } /* Special handling for OSC travel galleries. Download all button retained. 2019-05-17*/ .sm-page-parentnode-nr7gn2 .sm-gallery-cover-download-button, .sm-page-parentnode-hbWKJZ .sm-gallery-cover-download-button { display: inline-flex; } /* CAPTION ADJUSTMENTS IN SM STYLE GALLERIES -------------------------------------------- Centers captions in SM-style galleries and adjusts the font size on captions and keywords. Note this does not adjust the size of the vertical bars that separate keywords. Motivated by http://dgrin.com/showthread.php?t=237467 Font default seems to be 10pt. Added 2013-08-26, Modified 2013-10-14 and 2015-01-15.*/ .sm-user-ui .sm-gallery-smugmug .sm-tile-info { max-width: none; text-align: center; font-size: 15px; } /* NO TITLE PLACEHOLDERS IN SM STYLE GALLERIES ---------------------------------------------- If there is no title (always the case at this site), this turns off the "add title" notice that appears when logged in. Added 2015-04-04.*/ .sm-gallery-smugmug .sm-tile-info .sm-tile-title .sm-inlineedit-placeholder.sm-muted { display: none; } /* FULL CAPTION IN COLLAGE LANDSCAPE STYLE GALLERIES ---------------------------------------------------- Allows for multi-line captions in galleries using the collage landscape display and turns off some of the little icons. Added 2014-02-07. Latest update 2018-11-26 making the first block specific to galleries. Note max-height in the block below (rather than a fixed height) allows for the spacing to adjust based on the size of the captions. The -webkit-line-clamp is based on SM coding (SM but clamped at 2)*/ .sm-gallery-images .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info p { overflow: auto; max-height: 6.7em; font-size:15px; } .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info { padding-bottom: 20px; } .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-tile-info-text { -webkit-line-clamp: 5; } .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools { display: none; } /* Special handling for OSC galleries. Down load button retained on images. 2019-05-17*/ .sm-page-parentnode-nr7gn2 .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools, .sm-page-parentnode-hbWKJZ .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools, .sm-page-node-vWp8CZ .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools { display: block; } .sm-page-parentnode-nr7gn2 .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools .sm-button-image-buy, .sm-page-parentnode-hbWKJZ .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools .sm-button-image-buy, .sm-page-node-vWp8CZ .sm-tiles-row-organic.sm-tiles-info-after .sm-tile-info .sm-gallery-image-tools .sm-button-image-buy { display: none; } /* VIMEO EMBED WIDGET SIZING ---------------------------- /* Makes Vimeo video embeds set at 315p (one of the SM options) expandable to 540p in steps, depending on what fits. This is motivated by my wanting a 540p size. SmugMug does not offer that in their implementation of the Vimeo embed widget. SmugMug only offers embed sizes of "scale to fit", 315p, 360p, 480p, and 720p (no 1080p!), even though 540p is a "native" Vimeo size and one of the options for SmugMug's own video widget. This essentially hijacks one of the SmugMug widget size options. JTR 2017-12-12.*/ @media (min-width:945px) { iframe[height="315"][src*="vimeo"] { width:640px; height:360px; } } @media (min-width:1025px) { iframe[height="315"][src*="vimeo"] { width:720px; height:405px; } } @media (min-width:1105px) { iframe[height="315"][src*="vimeo"] { width:800px; height:450px; } } @media (min-width:1190px) { iframe[height="315"][src*="vimeo"] { width:880px; height:495px; } } @media (min-width:1265px) { iframe[height="315"][src*="vimeo"] { width:960px; height:540px; } } /* INFO BOX / PANEL --------------------------------------------- This is the pop-up that shows EXIF and other information on SM style galleries. It is very similar to the information sidebar in the lightbox. Adjusted the height setting to remove scroll bars in the pop-up version when not requesting additional information. Initial version 2015-03-31. Last update 2018-08-15. */ .sm-panel-imageinfo:not(.sm-imageinfo-expanded):not(.sm-imageinfo-tabs) .sm-panel-body { height: 430px; } /* Tightens up spacing on entries in the pop-up info box (added after SM expanded the spacing) in both applications. This reduces the need for scrolling in many cases. Inserted 2019-07-04. Adjusted comments 2019-08-15*/ .sm-panel .sm-imageinfo-container .sm-imageinfo-label, .sm-panel .sm-imageinfo-container .sm-imageinfo-value { padding-bottom: 3px; }

CSS Code Attached the the default (modified Spartan) theme

/* Latest update 17 August 2019 -- Remove items for Lightbox Version 1 /*Set color of all underlined links. These show in Creative Commons sidebar entries, folder descriptions, and a few stray HTML blocks (e.g, on the Tips and Tools page). This avoids having to put that color information in all the individual blocks. And it is tied to a light bkg. 2017-12-14*/ a u { color:#0024e3; } /* SEARCH WIDGET (CURRENTLY ONLY USED ON 404 PAGE) -------------------------------------------------- Makes the search button blue, more closely matching other entry button applications, although this page has an opacity shift that others do not. The second block lightens the font color so it works with the background. 2018-01-24.*/ .sm-user-ui .sm-search-form .sm-button.sm-button-skin-default, .sm-user-ui .sm-search-form .sm-button.sm-button-skin-default[disabled] { background: #001785; } .sm-user-ui .sm-button.sm-search-form-submit.sm-button-skin-default[disabled] { color: #6D6D6D; } /* HEADER (LOGGED IN) --------------------- SM made the logged-on header background black. I prefer it follow the theme. That's less visually obtrusive and allow the logged in view better represent the non-logged-in view. Structural changes are in the site CSS. Color changes are in the theme. 2018-03-09*/ .sm-user-ui .sm-user-loggedin .sm-page-header { background-color:rgba(214,214,214,0.75); border-bottom-style:none; } /* Flip the logo (a sprite) to have black text. 2018-03-09*/ .sm-user-ui .sm-user-loggedin .sm-logo { background-position: 0 -96px; } /* Text color adjustment for Search box */ .sm-user-loggedin .sm-nui .sm-page-header-search .sm-form-field-text-input { color:#000; border-color:#b5b5b5; } .sm-user-loggedin .sm-page-header-search .sm-form-field-text-input:hover { background-color: lightgray; color:black; } /* Color adjustment on the header search box when not logged in */ .sm-page:not(.sm-user-loggedin) .sm-page-header-search .sm-form-field-text-input:hover { background-color: #CFCFCF; }

CSS Code Attached to the Gallery Theme

/* Latest update 30 August 2019 -- Lightbox V2 tweaks /* HEADER (LOGGED IN) --------------------- SM made the logged-on header background black. I prefer it follow the theme. That's less visually obtrusive and allow the logged in view better represent the non-logged-in view. Structural changes are in the site CSS. Color changes are in the theme. 2018-03-09*/ .sm-user-ui .sm-user-loggedin .sm-page-header { background-color:rgba(66,66,66,0.75); } /* Color adjustment on the header search box when not logged in */ .sm-page:not(.sm-user-loggedin) .sm-page-header-search .sm-form-field-text-input:hover { background-color: #4A4A4A; } /* LIGHTBOX VERSION 2 --------------------- /* Reset Lightbox background color to be a bit darker than the theme dark color 2019-08-17*/ .sm-user-ui.sm-user-overlay-container .sm-modal-mask.sm-lightbox-v2-modal-mask[data-opacity="opaque"], .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar { background-color: #242526; } /* In the left side navbar, de-emphasize buttons not selected, but highlight the selected one by making the icon pure white. This provides a bit more of a visual cue as to what's going on. It also adds a guide on how to close the information panel. Only for desktop, not mobile in landscape mode. 2018-08-17*/ @media (min-width:961px) { .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar .sm-lightbox-v2-primary-controls-list button.sm-button { color: #989ba2; } .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar .sm-lightbox-v2-primary-controls-list button.sm-button[data-selected="true"] { color: white; } } /* Adjust the caption color to increase emphasis and visual focus to this section. 2019-08-18*/ .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption { color: white; } /* Adjust color on all secondary text in the information sidebar (all except the title, caption) to a light gray. This de-emphasizes this section so as to emphasize the title and caption. A little brigher for mobile. 2019-08-30*/ .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-keywords a, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar p.sm-image-metadata-attribution, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar p.sm-image-metadata-attribution a, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-label, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-value, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar button, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar h5, .sm-user-loggedin.sm-user-owner .sm-lightbox-v2 .sm-imageinfo-advanced-btn span{ color: #989ba2; } @media (max-width:960px) { .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-keywords a, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar p.sm-image-metadata-attribution, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar p.sm-image-metadata-attribution a, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-label, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-value, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar h5, .sm-user-loggedin.sm-user-owner .sm-lightbox-v2 .sm-imageinfo-advanced-btn span{ color: #c0c0c0; } }

CSS Code Attached to the Enjoy Theme used on the Enjoy and Enjoy-Recent Pages

/* Header color 2018-03-09*/ .sm-user-ui .sm-user-loggedin .sm-page-header { background-color:rgba(66,66,66,0.75); } /* Dims the two logo images and the various logged-in header icons. Last update 2018-03-09*/ .sm-page-widget-logo .sm-page-widget-logo-img { opacity:0.4; } .sm-page-header-account-avatar, .sm-logo, .sm-logo-badge { opacity:0.4; } .sm-user-loggedin .sm-page-header .sm-component-menu-item .sm-icon, .sm-user-loggedin .sm-page-header .sm-button-header-support .sm-icon, .sm-user-loggedin .sm-page-header .sm-page-header-search .sm-icon, .sm-user-loggedin .sm-page-header .sm-form-field-text-input{ opacity:0.4; }

CSS Code Attached to the Pt Reyes Light Station - Dec 29 2017 Gallery

/* SmugMug provides no way to pull a cover image, the one used along with the gallery title and description up at the top of the age, from any place except the gallery. One cannot pull the cover image from a video. For this gallery, I wanted a cover image that came from a video or a still photo that would otherwise be redundant with it. I've inserted a still photo for use as the cover image in the gallery and then applied the code below to hide it and its caption. Inserted 2018-01-01, updated 2018-01-05*/ a[href$="i-SWncb5Q"] { display:none; } a[href$="i-SWncb5Q"] + div { display:none!important; }

CSS Code Attached to the Featured Galleries Page

/* If SM wants to place three or five gallery icons across the page, this adjusts so there are four. The result is a display of 8 featured galleries showing in two rows of four. On narrow screens, the display reverts to rows of two (or even a column of one). The default size is such than on many phones / mobile devices the display comes out with two columns. Inserted 2016, last adjusted 2017-12-28.*/ .sm-page-widget-nodes .sm-tiles-grid.sm-tiles-col-3 .sm-tile-wrapper { width:25%; } .sm-page-widget-nodes .sm-tiles-grid.sm-tiles-col-5 .sm-tile-wrapper { width:25%; }

CSS Code Attached to the Browse All Page

/* Adds a border to the By Topic block, effectively supplying a vertical bar separating it from the By Year block. Added 2017-01-12, updated 2017-01-20*/ .sm-page-widget-2251210 { border-right: 2px solid #AAAAAA;} }

CSS Code Attached to the About Me Page

/* Expands the picture and text widgets text to full width when the screen gets moderately narrow, stacking them one above the other. This normally happens in mobile mode, but this makes it happen up to fairly intermediate widths. Side by side only works on a fairly wide screen. Unfortunately, the width for the blocks is set inline in a div above the ones with the specific class number. I have to apply the width to the very general class. That works with only two items in the center part of the page. 2017-01-12, min-width adjusted 2017-12-11. */ @media (max-width:1260px) and (min-width:737px) { .sm-page-layout-column.yui3-u { width:100% !important; } } /* This cleans up the text on this page. It uses the text widget rather than an html block so there are very limited controls. in the block itself. 2017-01-13.*/ .sm-page-widget-16893778 span { font-size:19px !important } .sm-page-widget-16893778 { line-height:1.2; }

CSS Code Attached to the Notes and Tools Page

/* As of 2018-12-06, the page is now named Using the Site This is expands the information text to full width when the screen gets narrow although it defaults to SM for mobile widths. That pushes the picture down to below the text. In normal (wide enough screen) operation the information text and the picture are in blocks taking 65% and 35% of the width beyond the sidebar respectively. The 65% width is set inline to a div without a specific identifying number, but for this simple a page, using a very general class specifier works. 2017-01-13, most recent adjustment 2018-12-06 */ @media (max-width:1365px) and (min-width:737px) { .sm-page-layout-column.yui3-u { width:100% !important } }

CSS Code Attached to the Site Mgt Page

/* Arranges 10 icons across on the nodes widget Ref: http://dgrin.com/showthread.php?t=243435 (Lamah again!) with adjustments for my own needs. Applied to the new Site Mgt page 2016-12-31 Latest mod 2017-12-14*/ @media only screen and (min-width: 960px) { .sm-page-widget-nodes .sm-tiles-grid .sm-tiles-list .sm-tile-wrapper { width:10%; } .sm-page-widget-nodes .sm-tile-title { font-size:14px; } }

CSS Code Attached to the Keyword Page

/* Adjusts keyword display. Last adjustment 2017-01-24 (to add comments).*/ .sm-keywords-list { line-height:24px; } .sm-keywords-list a { font-size:16px; }

CSS Code Attached to the 404 Page

/*This manages the text block on the 404 page. Half width for desktops, almost full width for mobile. 2018-01-23*/ .sm-page-widget.sm-page-widget-17001549 { width: 50%; margin-left: auto; margin-right: auto; font-size: 17px; text-align: center; } @Media(max-width: 736px) { .sm-page-widget.sm-page-widget-17001549 { width: 95%; } }

CSS Code Attached to this Site Design Page

/* CSS code for use with Notepad ++ generated files Inserted 12-29-2014, last edited 12-28-2017, JTR*/ /* Default */ .sc0 { color: #004080; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Tag - purple */ .sc1 { color: #5000A0; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Class - blue */ .sc2 { color: #0008AA; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Pseudo-class - purple italic */ .sc3 { color: #5000A0; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; font-style: italic; } /* Unknown Pseudo-class - purple italic */ .sc4 { color: #5000A0; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; font-style: italic; } /* Operator - black */ .sc5 { color: #000000; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Property (Identifier) - black */ .sc6 { color: #000000; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Unidentified Property (Identifier) - black italic */ .sc7 { color: #000000; font-family: monospace; line-height:1.15; font-size: 12pt; font-style: italic; } /* Value - pink*/ .sc8 { color: #9B0990; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Comment - dk green italic, bolded on mobile for better visibility */ .sc9 { color: #004020; font-family: "Consolas"; line-height:1.15; font-size: 12pt; font-weight: 100; font-style: italic; } @Media (max-width:736px){ .sc9 { font-weight: bold; } } /* ID - purple */ .sc10 { color: #5000A0; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* !Important - dark red bold italic */ .sc11 { color: #C00000; font-family: "Consolas"; line-height:1.15; font-size: 12pt; font-weight: bold; font-style: italic; } /* Directive - black */ .sc12 { color: #000000; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* HTML attribute value string (inside attribute selector) - brown */ .sc13 {color: #502800; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* @ HTMl attribute (inside attribute selector) - brown */ .sc16 { color: #502800; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Query - brown */ .sc22 { color: #502800; font-family: monospace; line-height:1.15; font-size: 12pt; font-weight: bold; } /* Link (inside comments) - bolded on mobile for better visibility */ .sc73 { color: #004020; font-family: "Consolas"; line-height:1.15; font-size: 12pt; font-weight: 100; font-style: italic; } @Media (max-width:736px){ .sc9 { font-weight: bold; } }

Powered by SmugMug Log In